Try Now
More in this section

Forums / Designing & Styling / .sf_cols class overriding Styles

.sf_cols class overriding Styles

2 posts, 0 answered
  1. Scott
    Scott avatar
    4 posts
    09 Jul 2015
    19 Oct 2015
    Link to this post
    Can someone tell me why the class .sf_cols is added to every layout element in sitefinity? It is overriding bootstrap styles that I have on my site with a width:100%, padding:0 and margin:0 style. I would like the ability to remove it or turn it off on certain layout elements. Any help would be appreciated.
  2. Arnob Makhlaqur
    Arnob Makhlaqur avatar
    41 posts
    24 Apr 2017
    05 Nov 2015
    Link to this post
    Hi Scott,

    .sf_cols is the default css class for the layout element. It is possible to override this class for individual layout element by setting the wrapper class "test" [Ref. image 1] for that element and then by dropping a CSS widget to that element and write the CSS code[Ref. image 2] inside the .test.sf_cols class.

    Steps to follow:

    Edit Layout Element-->Classes & Labels-->write the Wrapper field with a class name (test)-->Click Done and then from Content-->Script and Styles--> drop a CSS widget to the layout element-->Edit-->Write CSS--> .test.sf_cols{ write the custom CSS code here } [Ref. image 3, element inspect in google chrome]

    To remove the .sf_cols class use the custom page template ( custom .master file). Please read our documentation on Create a template using a Master page at http://docs.sitefinity.com/create-a-template-using-a-master-page.

    Arnob Makhlaqur
    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
2 posts, 0 answered