Design and CSS styles
Version 5.x > Design and CSS styles > Main CSS interferring with Design CSS View modes: 
User avatar
Member
Member
sammy - 2/1/2014 6:09:20 PM
   
Main CSS interferring with Design CSS
Hi All,
Does anyone know how to stop the main css file, from interfering with the design CSS?

It's really annoying when trying to edit the web parts, and you can't see their names.

Here is what I'm looking at:

User image

Thanks!

User avatar
Member
Member
kentico_davidb2 - 2/3/2014 2:04:59 AM
   
RE:Main CSS interferring with Design CSS
Please try using more specific selectors in your CSS. i.e. no "div" or "a", but rather div.myclass a#mylink and similar. This way you should be safe.

User avatar
Member
Member
sammy - 2/3/2014 6:16:55 AM
   
RE:Main CSS interferring with Design CSS
I was afraid that was the answer.

Unfortunately, the css was set by a design firm, that I can't change (i'm just the lowly developer implementing the site).

Thanks for the reply.

User avatar
Member
Member
sammy - 2/3/2014 6:18:58 AM
   
RE:Main CSS interferring with Design CSS
Is there a way, I could have a css only show up in design mode?

This way, I could have a css override those generic div styles.

Thanks!

User avatar
Member
Member
kentico_davidb2 - 2/3/2014 6:40:38 AM
   
RE:Main CSS interferring with Design CSS
Well, if you want to override it using another CSS, you could try using the Head HTML code webpart (placed on your Master page) and use code like:
{% ViewMode == "Design" ? "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">" : "" %}

This macro will link the CSS only for Design tab. Therefore, if you are linking the original CSS before linking this one, it should get overridden for the Design tab.

Dave

User avatar
Member
Member
sammy - 2/3/2014 4:22:44 PM
   
RE:Main CSS interferring with Design CSS
Thanks!

So, could I just do this?
{% ViewMode != "Design" ? "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">" : "" %}

Then, my real style sheet will work when it's being displayed on the home page, and not when i'm in cmsdesk.

So, where does this code go? Right in the <head> section of the MasterPage?

Thanks!

User avatar
Member
Member
kentico_davidb2 - 2/4/2014 1:14:43 AM
   
RE:Main CSS interferring with Design CSS
Yes, when you change the condition to the one you specified, the stylesheet will be linked in all ViewModes apart from the Design tab (i.e. Live site, Page view, ...)

The best place to put this code will be the mentioned webpart (Head HTML code), which you can place on the root node in content tree (Design tab).