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? Nov 7, 2014 at 20:19

3 Answers 3


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, 2014 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, 2014 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, 2014 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, 2014 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, 2014 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, 2014 at 20:01
  • i know about it...
    – Amit Bera
    Nov 7, 2014 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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