I see. It looks like the most useful classes are on the #container itself, which I didn't really understand. Conventionally, these are put on the <body> tag for the sake of descendant selectors. However, Drupal 7 (or perhaps just this theme) likes to do things differently.<div>
<br></div><div><div>So, you have an element with both an ID and a class which you would like to use as a selector. Normally, you would want to create a selector which uses both, however this does NOT work in IE, see <a href="http://css-discuss.incutio.com/wiki/Multiple_Id_Class_Bug" target="_blank">http://css-discuss.incutio.com/wiki/Multiple_Id_Class_Bug</a></div>
<div><br></div><div><br></div><div>#container { ... }</div><div>#container.front { ... } /* Will NOT work in IE. */</div></div><div><br></div><div><br></div><div>What about just using the class? I assume if you're *not* on the front page, the class is .not-front? So one option is this:</div>
<div><br></div><div><br></div><div>.front { ... } /* for front page */</div><div>.not-front { ... } /* for everything else, if it exists */</div><div><br></div><div><br></div><div>However there's a (small) chance some other element would have a style for .front, or that 'not-front' never exists. Try this one, see if it works for you.</div>
<div><br></div><div>One thing to remember is, you can't use the class in one instance and the ID in the other--classes don't usually have precedence over IDs <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" target="_blank">http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/</a></div>
<div><br></div><div>So, this doesn't work:</div><div><br></div><div><br></div><div>#container { ... }</div><div>.front { ... } /* for front page */</div><div><br></div><div><br></div><div>because IDs are more specific than classes and #container will always override .front.</div>
<div><br></div><div><div>This is the general utility of using <body> for this sort of thing, because descendant selectors are supported in all browsers. *Ideally,* we would want</div><div><br></div><div><br></div><div>
<body class="front"></div><div> ...</div><div> <div id="container"></div><div> ...</div><div> </div></div><div> ...</div><div></body></div><div><br></div><div><br></div>
<div>
then *ideally* you could use</div><div><br></div><div><br></div><div>#container { ... }</div><div>.front #container { ... } /* what we normally do using the body tag */</div><div><br></div><div><br></div><div>This is leveraging ancestry and is what we're used to in Drupal 6. I like this.</div>
<div><br></div><div>So, in the same convention as the previous example, what you might consider is creating a separate "inner" element for the sake of selecting descendants. Not completely semantic, and means more markup, but we *have* to deal with IE.</div>
<div><br></div><div><br></div><div><body></div><div> ... </div><div> <div id="container" class="html front logged-in no-sidebars page-node toolbar toolbar-drawer"></div><div> <div id="container-inner"></div>
<div> ...</div><div> </div></div><div> </div></div><div> ... </div><div></body></div><div><br></div><div><br></div><div>Then you can apply your background-image property to the inner element.</div>
<div><br></div><div><br></div>
<div>#container-inner { ... }</div><div>.front #container-inner { ... } /* for front page */</div><div><br></div><div><br></div><div>I hope this helps. Cheers and good luck.</div><div><br></div><div>Carl</div>
<br><br><div class="gmail_quote">On Fri, Feb 4, 2011 at 3:20 PM, <span dir="ltr"><<a href="mailto:pat@soligsoft.com" target="_blank">pat@soligsoft.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
Sorry.<br>
<br>
<a href="http://pastebin.com/ZWENLvjM" target="_blank">http://pastebin.com/ZWENLvjM</a><br>
<br>
Hopefully this helps<br>
<div><div></div><div><br>
<br>
> I didn't mean the code on page--front.tpl.php, I meant the HTML source<br>
> from<br>
> your browser.<br>
><br>
> On Fri, Feb 4, 2011 at 2:37 PM, <<a href="mailto:pat@soligsoft.com" target="_blank">pat@soligsoft.com</a>> wrote:<br>
><br>
>><br>
>> The page--front.tpl.php code is basically a copy of the page.tpl.php<br>
>> code,<br>
>> Ithink a error in it is unlikely.<br>
>><br>
>> here is the site were the page--front.tpl.php code is with some of the<br>
>> css: <a href="http://pastebin.com/7KvxtpHe" target="_blank">http://pastebin.com/7KvxtpHe</a><br>
>><br>
>> Thank you<br>
>><br>
>> PChuprina<br>
>><br>
>> > If you put a <a href="http://pastebin.com/" target="_blank">http://pastebin.com/</a> link with some of your HTML source,<br>
>> that<br>
>> > would be very helpful to provide guidance on the proper CSS selectors<br>
>> :)<br>
<br>
<br>
_______________________________________________<br>
themes mailing list<br>
<a href="mailto:themes@drupal.org" target="_blank">themes@drupal.org</a><br>
<a href="http://lists.drupal.org/mailman/listinfo/themes" target="_blank">http://lists.drupal.org/mailman/listinfo/themes</a><br>
</div></div></blockquote></div><br></div>