Page template layout class css being overridden? - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Page template layout class css being overridden?

  • Page template layout class css being overridden?
  • b4a1fc0f-3fc0-467e-a996-046111902889_firebug-screen-shot.png

    Please bear with me as I am new to Sitefinity and am still a long way from mastering css.  I have a page template for which I have added a custom theme.   I have given my layout elements wrapper classes and added them to my custom theme css class.  However, these do not appear to be working.  In Firebug, the wrapper class elements are shown with a strike-through line, like they are being ignored and, of course, the screen appears that they ARE being ignored.   Is there something I am diong wrong?

    This shows one of my wrapper classes being applied in the html:

    <div id="PublicWrapper" class="sfPublicWrapper">
    <div class="sf_cols gmc_header">

    This is the pertinent code from my custom theme css file:

        background: #fff url('Images/gmcbackground.png') none;   
        margin: 0 auto;
        width: 900px;

    I have attached a screenshot of what is shown in Firebug.

    I would appreciate any advice!

    Update:  I added !important to the two lines in my wrapper class gmc_header and that works, but is this the best way to go about this?


  • Hey Donna,

    The reason why .sf_cols overrides .gmc_header is because its defined later in the css.
    Either you load the styles for .sf_cols in a different css files that gets added after the one that defines the .gmc_header class or its defined further down in the same .css.

    So you can leave it as is, with using !important but then you'll never be able to override it again in case you run into some browser quirk you need to 'hack'.

    You can change the loading order to ensure that sf_cols gets defined before the actual project styles. Either by changing the cssloadorder.xml in your global folder or re-arrange the stylesheet.

    Or you can go the id route instead of using a class and make it <div id="gmc_header" class="sf_cols">.

    Hope it helps...
  • Hi Jochem,

    I really appreciate your help.  I have tried a couple of your suggestions.  I put an empty .sf_cols entry in the same css file as my .gmc_header.  I put it before and then I put it after and neither worked.  I then edited the cssLoadOrder.xml - I put Site.css as the last entry and then as the first entry - again, neither worked.  I may have done all of this wrong as I am a bit confused first because I thought whatever is loaded last (css-wise) is applied.  I would think that the custom theme css would be loaded last.  I can't control when the default Sitefinity classes are loaded.   Or is that what changing the cssLoadOrder file does?  If so, that did not work - possibly I did something wrong.  

    I would love to go the id route, but how do I do this?  This is a page layout element with an image and a navigation widget.  I can only see how to add a wrapper class to this.

    Thank you again, so much, for your help,
  • 060b7a04-38ca-45d6-af00-25a7ad5c153b_sfv523700-sf_cols-class.png
    Hey Donna,

    Sorry to hear its not working so far.
    First of all, don't get confused - you are absolutely right, whatever gets loaded last gets applied.
    If you look at your firebug screenshot, you see that the sf_cols stuff gets loaded from teleri... and not from Site.css meaning that site.css gets loaded somehow prior to the teleri... stuff.

    Not to frustrate you, but to show you that your way is right I've attached a screenshot. In it you'll see the .box styles being applied instead of the .sf_cols styling. So your .css classes are good, its just somehow the loading order that's mixed up somewhere but based on just your screenshot I can't see where or why.

    Regarding going the ID route, are you using one of Sitefinity's default templates? Or are you using a .Master page as the base of your template?

    (You can check this by going to Sitefinity backend >> Design >> Page Templates. In the overview you can see the column 'Based on' which will tell you if its based on a file or not).

    If it is somehow based on a .Master page, we can add those ID's outside of Sitefinity and they'll work.

    If we can't fix your loading issue, and if its one of sitefinity's default templates, we can always cheat and make the most out of it no?

    .sf_cols.gmc_header ... should take precedence over .sf_cols ... so if you changed your css to something like th
    .sf_cols.gmc_header margin:0 auto;width:900px;

    your styling should kick in.

    As a last resort (not advisable because you're bound to run into other issues later on)

    .sf_cols applies width:100% and you need it to be 900px. So if the parent element (PublicWrapper) has 900px space, the 100% will equal to 900px no? Either by setting the width of #PublicWrapper to 900px or wider and compensate with a padding.

    With forum notifcations out and the weekend upon us, feel free to hit me up on twitter ( if you run into further issues...


  • Thank you Jochem.  You are so nice!  I really appreciate your help.  To answer some of your questions.  I am using a default template not a master page.  I could switch to a master page and might have to eventually if I keep running into these things.  I don't want to set the width on the PublicWrapper class as I have a background image I want to take up 100%.  I changed my site.css to .sf_cols.gmc_header and that works!  Thank you again for everything!  I hope you have lovely weekend.
  • Hi

     I am also a new-bie to Sitefinity.  I am also facing the same issue. My css classes are overridden by Sitefinity's i tried the above solution for my class client-logos to sfcols-client-logos. But in browser i debugged it and found sfcols-sfcols-client-logos. 

  • Hi Sajian,

    Can you please try to use the !important clause in your custom css styles as also suggested in the forum posts below. Here is a sample for your convenience of its usage:

      background: #ffffff !important;

    This is the best approach in order to override the built-in css styles and make sure that your own style will be applied. 

    You can also use the DevTools of your browser in order to inspect the css classes and default styles applied by Sitefinity and set your own css styles.

    Sabrie Nedzhip
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items