Better looking sign in | register in Cs-cart ?

Do you want your Cs-cart sign in / register to look like this

sign_in_modified

instead of

sign_in_original

If yes, this post shows you how to do it with minor addon css code.  Which means you don’t have to edit any core files.   This is a minor modification so you can edit any of your existing addon.  If you don’t have an existing addon, do the changes in my_changes addon.  To illustrate I will do the changes in my_changes addon.

  1. Make sure you have the addon installed.  Verify from Administration->addons page.
    my_changes_installed
  2. Create styles.post.tpl, create folder and files if not present.
    skins\basic\customer\addons\my_changes\hooks\index\styles.post.tpl
    	<link href="{$config.skin_path}/addons/my_changes/styles.css" rel="stylesheet" type="text/css" />
  3. Create styles.css, this contains the necessary css code.
    skins\basic\customer\addons\my_changes\styles.css
    /* top dropdown sign in | register */#account_info_48 .buttons-container { /*background-color: #333333;*/ border-top: 1px solid #DDDDDD; color: #999999; background: #353535 url(../../images/menu_bg.gif) 0 0 repeat-x; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 0px 0px 4px 4px ;}#account_info_48 .buttons-container a.account { color: #FFFFFF; font-size: 14px; text-shadow: 0 1px 0 #000000;}#account_info_48 .buttons-container a.account:hover { color: #FFFFFF;}
  4. That’s it, just the clear cache admin.php?cc and check sign in / register.

Following steps are for Cs-cart 4.x version :

  1. Make sure My changes addon is installed. Verify from Addons -> Manage Addons
  2. Create styles.post.tpl, create folder and files if not present. design/themes/basic/templates/addons/my_changes/hooks/index/styles.post.tpl
    {style src="addons/my_changes/styles.css"}
  3. Create styles.css, this contains the necessary css code.
    design/themes/basic/css/addons/aprod/styles.css
    /* top dropdown sign in | register */div[id^="account_info_"] .buttons-container { /*background-color: #333333;*/ border-top: 1px solid #DDDDDD; color: #999999; background: #353535 url("images/addons/aprod/menu_bg.gif") 0 0 repeat-x; -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 0px 0px 4px 4px ;}div[id^="account_info_"] .buttons-container a.account { color: #FFFFFF; font-size: 14px; text-shadow: 0 1px 0 #000000;}div[id^="account_info_"] .buttons-container a.account:hover { color: #FFFFFF;}
  4. Add the following image for gradient to the directory
    design/themes/basic/media/images/addons/my_changes/
Posted in CS-Cart, CS-Cart Addons Tagged with: ,
3 comments on “Better looking sign in | register in Cs-cart ?
  1. This is yet another simple design change I had overlooked. I have now applied it to my conservatory furniture shop and you can see the change in action.

    One thing you must note, however, is that not every store will have the same grid and block layouts, therefore not every store has the same ID numbers. In your example, “account_info_48” the “48” should correspond with the block ID of the block which has the My Account template assigned to it. In my case, it was ID #306.

  2. Warren says:

    Can someone please show where the element ID is for my theme iKonix.co.za

Leave a Reply

Your email address will not be published. Required fields are marked *

*