Putting a greyright.gif inside my custom theme messes up Dashboard?

Permalink
Hi there,

My custom them is inside the following directory:

/home/carlos/web/carlosgonzalezconsulting.com.c5/themes/my_theme/

If I put a file called greyright.gif into the images directory of this theme at:

/home/carlos/web/carlosgonzalezconsulting.com.c5/themes/my_theme/images/

My Dashboard gets messed up. This image appears inside all buttons, to the left of file names in my sitemap, on some buttons, etc.

If I rename the file to anything else, the problem disappears.

The CSS where I define the use of this image is inside a main.css file in the my_theme directory.

ul li {
   list-style: disc outside;
   list-style-image: url(images/greyright.gif);
   margin-left: 14px;
   }


Is my CSS code affecting all ul's inside the Dashboard or something?

Carlos

 
carlos123 replied on at Permalink Reply
Never mind.

I fixed this by making my CSS more specific to avoid any conflict with CSS that might be controlling the Dashboard appearance.

That is what it must have been.

Thanks.

Carlos
triplei replied on at Permalink Reply
triplei
Yeah, you'll want to be more specific on a number of html elements... I typically try to scope all my css to my container to keep things from conflicting (such as h1/h2/h3 hr, p, etc) with the concrete5 interface.
carlos123 replied on at Permalink Reply
Thanks triplei.

I didn't realize that the admin interface was rendered with just regular CSS and could be affected this way.

What's the best way to encapsulate the CSS for a Theme and prevent any unintentional side effects like?

Wrap the theme template code in a DIV using an ID and prepending all CSS used by this theme with the ID name?

Carlos
triplei replied on at Permalink Reply
triplei
It actually shouldn't affect the dashboard at all, just the in-context editing interface since your css is loaded at that point.

if you're using a grid css framework or anything like that you probably already have a container_12 or something similar in your html already. So prefixing them with something like
.container_12 h1 {
   my_awesome_css_here
}


will prevent your changes from affecting the concrete UI

Hope that helps :)
carlos123 replied on at Permalink Reply
Gosh there must be a lot of Geek types around here :).

I thought I was one till I came here. I don't know what a grid css framework even is LOL (though I kinda suspect what it is).

I understand what you are saying though triplei. I think I'll just encase everything in a DIV for purposes of encapsulating any CSS I use in my custom theme.

Thanks again.

Carlos

PS. No offense intended when I imply that you are a Geek type. That's a good thing to be as far as I am concerned.
triplei replied on at Permalink Reply
triplei
Hey Carlos,

I'd certainly be the first to refer to myself as a geek type (oddly enough my fingers typed mysql instead of myself there... further proving my point)

Anyway, glad you sorted it out :)