+1-888-365-2779
Try Now
More in this section

Forums / Suggestions / Designer-Only CSS

Designer-Only CSS

14 posts, 0 answered
  1. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    14 Nov 2011
    Link to this post
    Please give me a way to have a specific CSS file loaded only when in design mode :)  I don't want to bloat the live CSS sheet with designer-only css styles.
  2. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    17 Nov 2011
    Link to this post
    Hello Steve,

    There is a class, applied to the body in the page editor - sfPageEditor. You can use it to apply css to the elements in page editor mode. For example:
    body.sfPageEditor
    {
    background-color: red;
    }


    Kind regards,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    17 Nov 2011
    Link to this post
    Hey Jen, yes I know :)

    ...and I fully utilize that when styling so my editors get a better backend theme editing experience

    The problem is that every PUBLIC user who doesn't have access to the backend is getting those CSS styles sent to them as well when they'll never ever even need them.

    I want the ability to separate the concerns into two CSS files....one public...one for the editor
  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 Nov 2011
    Link to this post
    @Steve

    Would love a setting under Administration >> Settings >> Appearance for PageEditor css file just like there is for the Rad Editor css file.

    Blonde suggestion perhaps but why not just extend the BackEnd theme in the meantime? There's a seperate PageEditor.css in the theme or you could leave the entire theme alone and just add a projectname_pageditor.css to it for each project. I'm assuming of course Telerik keeps the backend theme which is included in the SDK totally up to date :)

    All it would take is to override the Backend theme on project configuration to not use the default (embedded) one but the default (extracted from the sdk) one.

    J.
  5. Anthony
    Anthony avatar
    1 posts
    Registered:
    22 Oct 2012
    18 Nov 2011
    Link to this post
    @Jochem
      Yeah thats a whole ball of wax I don't like getting into; same reason I don't like mapping views.  Something always changes, might be small...but ends up causing issues.  At least with embedded versions I can at least be assured that some QA dude somewhere has looked at it :)

    (Also, I don't install the SDKs :o)

  6. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    18 Nov 2011
    Link to this post
    Well, sent that from the wrong account clearly :) (managing the teams licenses on a diff account)
  7. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    18 Nov 2011
    Link to this post
    @Steve,

    I'm sure Marie won't mind you borrowing her wax :) and I know you're smart enough to come up with that suggestion as well. To be honest it's my fear also (not being totally update and sdk's get published later)...

    But alternative solutions like Javascript checks and inline adding css files are even a worse/wonkier solution for the meantime.

    J.
  8. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    22 Nov 2011
    Link to this post
    Hey guys,

    I've came up with a workaround. Take a look at the attached master page, which can be used to create a page template. In its head section I've added a css control and in the code behind I've used the IsDesignMode property to include the css only when the template is in edit mode. I believe this is what you're trying to achieve.

    Kind Regards,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  9. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    22 Nov 2011
    Link to this post
    Hey Jen,

    Awesome! Thanks! I know it's your job, but with this you definately deserve a hug!

    Jochem
  10. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    22 Nov 2011
    Link to this post
    @Jen
      Yeah, thats a way to do it, but I kindof want a "codeless" way to go about that...now you I guess have struck on a good point though... :)

    Perhaps I could get a PITS feature request to have a checkbox or an advanced property on the Css widget to only show in design mode...or a select list for Live\Design\Both?

    Steve
  11. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    23 Nov 2011
    Link to this post
    Hey again,

    Thank you, @Jochem! It's always great to know that what you do matters. Actually, I wouldn't have been able to offer this workaround without the help of my colleagues, so I'm sharing the hug with them, if you don't mind. ;)

    @Steve, I just logged logged your suggestion as a feature request, and here's the link to our PITS, where you can track its progress.

    Kind Regards,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  12. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    23 Nov 2011
    Link to this post
    Hey Jen,

    Not at all, go for it! I hope Georgi behaved? ;) Not to tell Steve he's wrong but can you undo the PITS issue? Setting BE site settings on a widget level isn't a route I believe Sitefinity should want to take.

    First it exposes another setting to in-experienced content editors, this clearly is a BackEnd theme/styling issue and although it makes sense that you sometimes just want to 'enhance' the editing experience on a page, the widget clearly isn't the place for it.

    Secondly its error prone. Content editors can change settings/remove widgets (and imagine the difficulties with synchronized pages) where some widgets would be set to PageEdit and others to FrontEnd without no immediate distinction between the two. Changing the value of this widget field can easily result in unexpecting page behavior when a BE css setting is exposed to a FE page.

    Thirdly it will most likely negatively impact page performance on the website. For each css widget on the page, you'd have to do a pre-render check to see if it should be rendered on the frontend or not. 

    And lastly, I can almost see the next comment popping up: "This would be cool to have for the Javascript widget as well" :)


    Utilizing an Administration >> Settings >> Appereance option to allow for a PageEditor.css, just like for RadEditor.css would, to me at least, be a far cleaner solution.

    I'm fully aware we're not the easiest guys to satisfy but 'robust' and 'fail-safe' should be the keywords in this case. It's our fault that we don't trust, or extend, the the non-embedded default backend theme (found in the SDK) but it shouldn't impact website performance and usability because of it.

    Jochem
  13. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    23 Nov 2011
    Link to this post
    @Jochem
      Good points, I will admit that it's convenient for me (I'd only put it on the root .master, not editable by anyone)...but still valid points...that being said, I'd still like it to be a property on the widget, perhaps not EXPOSED in the designer.

      However I'd say the more PREFERRED method would be to have a single file called PageEditor.css in the themes global folder, and if it sees that then it loads it, OR have an attribute in the CSS XML loader that defines where the CSS would load (frontend, backend, both).

    If you do it in the backend settings then you'd need to put it in the Theme nodes as you might have multiple themes all with different editor style requirements....so you wouldn't want to load the single file.

    Steve
  14. Jen Peleva
    Jen Peleva avatar
    568 posts
    Registered:
    10 Nov 2016
    24 Nov 2011
    Link to this post
    Hey guys,

    I've added all your suggestions to the internal description of the feature, so that they'd be considered by our development team when choosing the most appropriate way  to implement the required functionality.

    Greetings,
    Jen Peleva
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
14 posts, 0 answered