[themes] Background image in front page but not in others/how?

Mon Feb 7 14:34:12 UTC 2011

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 at soligsoft.com> wrote:
>
>> Sorry.
>>
>> http://pastebin.com/ZWENLvjM
>>
>> 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 at 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
>> >> :)
>>