Designer-Only CSS

Posted by Community Admin on 05-Aug-2018 19:04

Designer-Only CSS

All Replies

Posted by Community Admin on 14-Nov-2011 00:00

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.

Posted by Community Admin on 17-Nov-2011 00:00

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

Posted by Community Admin on 17-Nov-2011 00:00

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

Posted by Community Admin on 18-Nov-2011 00:00

@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.

Posted by Community Admin on 18-Nov-2011 00:00

@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)

Posted by Community Admin on 18-Nov-2011 00:00

Well, sent that from the wrong account clearly :) (managing the teams licenses on a diff account)

Posted by Community Admin on 18-Nov-2011 00:00

@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.

Posted by Community Admin on 22-Nov-2011 00:00

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

Posted by Community Admin on 22-Nov-2011 00:00

Hey Jen,

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

Jochem

Posted by Community Admin on 22-Nov-2011 00:00

@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

Posted by Community Admin on 23-Nov-2011 00:00

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

Posted by Community Admin on 23-Nov-2011 00:00

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

Posted by Community Admin on 23-Nov-2011 00:00

@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

Posted by Community Admin on 24-Nov-2011 00:00

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

This thread is closed