How do I prevent my CSS from altering the design mode / design tab?

Mike Bilz asked on December 8, 2016 18:16

Is there a trick to writing CSS for Kentico so that the editing environment doesn't become a jumbled mess?

I've already written a handful of .DesignMode specific styles to try and keep the Design Tab clean, but it seems silly to have to do that every time I write a new style.

Is there a body tag class or something that I can add to my styles so that Kentico knows that I only want these changes to appear on the live site?

Any assistance would be greatly appreciated. Thanks in advance.

Recent Answers


Roman Hutnyk answered on December 8, 2016 20:51

Have you tried to setup Site CSS stylesheet and Editor CSS stylesheet for your site under Sites application?

0 votesVote for this answer Mark as a Correct answer

Jan Hermann answered on December 8, 2016 21:49

I would add an ID for your body tag on your root page -> Master page and then start every custom css definition with this id.

0 votesVote for this answer Mark as a Correct answer

Mike Bilz answered on December 9, 2016 01:12

Thanks for the responses everyone, but we're still not there yet.

Roman, I have an Editor CSS Stylesheet activated, but it doesn't seem to be doing anything. I threw a div{background:#ff0000;} in there just to see what would happen, and didn't see it make any change at all on any tab.

Jan, the issue here is that the ID tag would also appear inside the Design Tab. Since the entire page is called in to the editing area in an iFrame my fix can't appear in the Master Template.

I'm surprised to see that there isn't an equivalent to the .DesignMode body tag that appears only on the live site. Is there a way that such a thing could be added? or is there maybe some obvious fix I'm missing?

Thanks.

0 votesVote for this answer Mark as a Correct answer

Jan Hermann answered on December 9, 2016 14:34 (last edited on December 9, 2016 14:34)

You can make one. Just add this to the body tag:

{%PortalContext.ViewMode=="LiveSite"?"id='livesite'":""%}

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on December 9, 2016 16:44

What does your CSS look like? Are you using a lot of the same class names as the Kentico UI? I've done a lot of sites and only had to add at most 10 different class overrides for .EditMode and .DesignMode in 9 years.

0 votesVote for this answer Mark as a Correct answer

Mike Bilz answered on December 12, 2016 18:01

Hello Everyone, thank you for the responses.

Jan, I will try out this trick today, that sounds like exactly what I needed.

Brenden, I'm using unique class names and making my styling as specific as I can to avoid bleed through. The problem I'm having is that all of the unique classes I assign to my web parts and containers also appear in the design and page tabs, so their styling appears there too.

I suppose the problem could be related to the way I'm building my site? Am I not supposed to use the "Web Part Container" fields to add classes to web parts?

Actually, would it be possible for me to use Jan's trick within my Web Part Containers? I am currently using this: <div class="{%ContainerCSSClass%}"> "web part goes here"</div>

but maybe I could change it to something like:

<div {%PortalContext.ViewMode=="LiveSite" ? class="ContainerCSSClass" : ""%}> "web part goes here"</div>

Would that work?

0 votesVote for this answer Mark as a Correct answer

Mike Bilz answered on December 13, 2016 00:30

Hello Everyone,

Thanks to Jan for pointing me in the right direction.

I was able to rewrite my Web Part Containers to only use their class names on the Live Site, Live Edit and Preview modes so that the back-end can be kept clean. My new code looks like this:

<div class="{%PortalContext.ViewMode=="LiveSite"||PortalContext.ViewMode=="Preview"||PortalContext.ViewMode=="EditLive"?ContainerCSSClass:""#%}"> {%String.IsNullOrEmpty(ContainerCustomContent)?"":ContainerCustomContent#%} "web part goes here"</div>

Thanks again.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.