.sf_cols class overriding Styles - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

.sf_cols class overriding Styles

  • .sf_cols class overriding Styles
  • 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.
  • 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