Forums

CSS Conflict with Admin Interface

Permalink
Hey Guys,

This occasionally happens and sometimes it's fine. I sometimes have problems with the CSS from the theme conflict with the C5 Core styles. Normally I can put up with this but now since I'm using a White text, it looks like all of the headers are missing.

I'm attaching an image showing what it looks like after i highlight all of the text, otherwise you can't read anything.

Let me know if you require more info. The dev site is located here:
http://209.15.212.245/~ellendot/... (version 5.5.2.1)

Thanks!
Roz

1 Attachment

creativeorange
 
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Hi,
I see from your css that your selectors are not very specific. For instance your H2 are styled using 
h2 {
font-size: 37px;
line-height: normal;
color: #ffffff;
margin: 0 0 10px;
}


Which means all H2 are going to be like that. Usually not being too specific is a good thing but here you have two competing systems, your page and the system backend.

I suggest you go through your css and modify all yur non-specific selectors.
Since your whole page is within a div with an ID of "page", using that should solve the problem. Your H2 for instance would become
#page h2 {
font-size: 37px;
line-height: normal;
color: #ffffff;
margin: 0 0 10px;
}
creativeorange replied on at Permalink Reply
creativeorange
Perfect! I knew it was something like that but my method wasn't working.
Thanks for your help.

On 3/25/2013 2:04 AM, concrete5 Community wrote:
mnakalay replied on at Permalink Reply
mnakalay
You're welcome. Could you mark the answer as best answer then so others know it's ok (and I get good karma :)
creativeorange replied on at Permalink Reply
creativeorange
And Good Karma, you deserve! Thanks again.
chameleondesign replied on at Permalink Reply
chameleondesign
This seems like a resource heavy way of going through a css file and adding selectors to everything. Wouldnt it have been a better design consideration to do it the other way around and have selectors on the admin interface which wouldn't get affected by site css?
JohntheFish replied on at Permalink Reply
JohntheFish
You can achieve a similar modification of CSS automatically using a LESS compiler.

Using a text editor, construct
#page{
  ... all content of old css file ...
}

Then run that through a LESS compiler.

Less compilers are available in:
- The LESS compiler addon
- My Style Quickie Addon
http://www.concrete5.org/marketplace/addons/style-quickie/...
- Various installable tools to run on a development system
- Online tools such as
http://www.freeformatter.com/less-compiler.html...