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

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

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.

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.

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

{%PortalContext.ViewMode=="LiveSite"?"id='livesite'":""|(identity)GlobalAdministrator%}

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.

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" : ""|(identity)GlobalAdministrator%}> "web part goes here"</div>

Would that work?

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:""|(identity)GlobalAdministrator%} "web part goes here"</div>

Thanks again.