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

Fri Feb 4 23:26:30 UTC 2011

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
> >> :)
>
>
> _______________________________________________
> themes mailing list
> themes at drupal.org
> http://lists.drupal.org/mailman/listinfo/themes
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.drupal.org/pipermail/themes/attachments/20110204/c96c3b12/attachment-0001.html 