I would like to have specific css parameters for the header of the HomePage. (a different height and some text displayed)

how can I do that?

(I tried creating a specific .css file and linked it to the homepage vis the CMS admin panel by adding

<reference name="head">
<action method="addCss">

the css file is loaded, but the general style.css is also applied and has the last word…)

thank you of your help

  • hi @Alexglvr, Marius is correct. can you try his solution and accept it? – Sander Mangel Nov 7 '14 at 20:19

You can add your own style in the same styles.css file. Each page has a different class on the body. You can use that.
The homepage has the body class cms_index_index.


You can add a custom css class only for the homepage, and create a new css rule only for this class.

<reference name="root">
  <action method="addBodyClass"><classname>myHomepageBodyClass</classname></action>
  • where may I add this code? In the CMS panel? could please tell me how to make a css rule for this class only? thank you for your help. – Alexglvr Jun 19 '14 at 6:32
  • yes, you can add this xml code in magento backend, when editing the cms page, tab layout. .myHomepageBodyClass { margin-top:100px; // css rules } – Alex Dinca Jun 19 '14 at 9:52

If you want css from cms admin then goto admin it cms page content tab click on Show/Hidden tab add below code on page code

<link rel="stylesheet" type="text/css" href="{{skin url='css/my.css'}}" />  
  • I tried adding another modification (texted displayed) and now it is not working any more… I tried stepping back… still not working… what is strange, is when you go back to the homepage content in the CMS admin panel, the added line is automatically removed.. – Alexglvr Jun 19 '14 at 6:06
  • I found the problem : (I am changing the header height.) At the first test, when it worked, I was having a general height for testing. After i commented it because I have different height regarding the windows size : @include bp(min-width, $bp-large + 1) { .main-header { height: 37em; }} ... and that is what is not working... – Alexglvr Jun 19 '14 at 6:44
  • I then just changed it with the compiled version (found in style.css) : @media only screen and (min-width: 1051px) { .main-header { height: 37em; } } working like a charm ! – Alexglvr Jun 19 '14 at 6:49
  • That option can be easily removed by someone in Administrator Panel without knowledge about coding. Definetly not a good option. – versedi Nov 7 '14 at 20:01
  • i know about it... – Amit Bera Nov 7 '14 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.