Magento – Change default top blue header color to some other color – 5 minute tutorial

There are 2 ways of doing this change, I will be covering both below:

  1. Method 1 – From Magento Admin backend without modifying theme’s CSS files: Magento backend gives us the ability to add custom CSS at the end of head section from the admin backend. We can use it to override existing CSS or add new one.
    1. Go to magento backend-> System -> Configuration -> Design -> HTML Head -> Miscellaneous Scripts field.
    2. Add below :
      .header-language-background {background-color:#95B533;color:#FFFFFF;} 


    3. That’s it. This changes background to greenish and font color to white. You can customize as per your needs.
    4. This can be extended to modify other css elemets to load new ones. Use Chrome’s inspect element feature to identify what classes/elements to override.
  2. Method 2: By modifying Theme’s style.css :
    1. If you have not created a custom theme already, make sure to create one using this tutorial:
    2. Copy styles.css (and madissonisland.css if using)  from rwd/default/css directory to your custom theme’s CSS directory.
    3. Look for class .header-language-background and update the background-color property as per your needs.

That’s it. You should be able to see new header color on your website now. Happy customization .

Updated: October 18, 2015 — 2:04 pm

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.