Prevent CSS in Page and Template Editor - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Prevent CSS in Page and Template Editor

  • Prevent CSS in Page and Template Editor
  • Is there a way to prevent style sheets from being applied when using the Page and Template editors?  

    While the CSS looks good on our pages, it doesn't work so well when trying to add content controls or widgets to the page.  This seems to really impact controls that are fixed to the very top and very right side of the template/page.  

    For example, the "edit" option which is above and to the right of each control/widget is off-screen, or obscured by the right control list overlay.  

    I'm using Sitefinity 8.2.

  • Hello,

    The issue you are experiencing might be related to the issue described in the below KB article:

    What I assume is that you may have responsive design rules created in our project. if so, these rules will be applied when you edit the pages in the backend. What I can suggest is that you try to re-size the browser's screen until you can see the Edit buttons of the widgets dropped on the page.

    If you are not using responsive design rules in your project, you can just delete the rules that are already created. Then the rules will not be applied when editing the page in the backend.

    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
  • Just for future reference, Sitefinity wraps its page editing layouts (header and sidebar) outside of the 

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

    So always try and keep your styles scoped within this.

    As a work around for layouts breaking editing functionality if you're not using the default responsive rule-set Sabrie is referring to when editing Sitefinity adds a class to the body:

    //Page editing:
    <body class="sfPageEditor zeContentMode">
    //Template editing:
    <body class="sfPageEditor sfTemplateEditor zeContentMode">

    You can use these classes to hide/alter certain design elements that may interfere with the default editing view.

    Hope it helps.