Hello all,
I'd like to thank everyone for their help and patience, especially since I'm sure I'll have additional questions to follow.
The answer that worked for me was a simple .front: {.......);
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.
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 http://css-discuss.incutio.com/wiki/Multiple_Id_Class_Bug
#container { ... } #container.front { ... } /* Will NOT work in IE. */
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:
.front { ... } /* for front page */ .not-front { ... } /* for everything else, if it exists */
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.
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 http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
So, this doesn't work:
#container { ... } .front { ... } /* for front page */
because IDs are more specific than classes and #container will always override .front.
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
<body class="front"> ... <div id="container"> ... </div> ... </body>
then *ideally* you could use
#container { ... } .front #container { ... } /* what we normally do using the body tag */
This is leveraging ancestry and is what we're used to in Drupal 6. I like this.
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.
<body> ... <div id="container" class="html front logged-in no-sidebars page-node toolbar toolbar-drawer"> <div id="container-inner"> ... </div> </div> ... </body>
Then you can apply your background-image property to the inner element.
#container-inner { ... } .front #container-inner { ... } /* for front page */
I hope this helps. Cheers and good luck.
Carl
On Fri, Feb 4, 2011 at 3:20 PM, pat@soligsoft.com wrote:
Sorry.
Hopefully this helps
I didn't mean the code on page--front.tpl.php, I meant the HTML source from your browser.
On Fri, Feb 4, 2011 at 2:37 PM, pat@soligsoft.com wrote:
The page--front.tpl.php code is basically a copy of the page.tpl.php code, Ithink a error in it is unlikely.
here is the site were the page--front.tpl.php code is with some of
the
css: http://pastebin.com/7KvxtpHe
Thank you
PChuprina
If you put a http://pastebin.com/ link with some of your HTML
source,
that
would be very helpful to provide guidance on the proper CSS
selectors
:)