Drupal 7 Theme: Genesis(modified)
Hello all,
First off thankyou for your assistance in my page--front.tpl.php issues.
Using the theme css sheet I applied a background image through: "#container" div. This applied the image to all my page backgrounds. I then discovered my "#container" div resided in my html.tpl.php file. What would be the best way to apply a background image only to my container on the page--front.tpl.php page?
I'm sorry if I'm bothering the readers of this group too much, but I am appreciative of the help.
PChuprina
Sorry didn't work. Should it be .page--front #container { }?
use body classes for theming.
.page-front #container { }
/Stanislav
Am 04.02.2011 um 20:44 schrieb pat@soligsoft.com:
#container
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
Use Firebug to inspect your CSS and determine the relevant classes on the <body> tag.
On Fri, Feb 4, 2011 at 12:56 PM, pat@soligsoft.com wrote:
Sorry didn't work. Should it be .page--front #container { ……… }?
use body classes for theming.
.page-front #container { ……… }
/Stanislav
Am 04.02.2011 um 20:44 schrieb pat@soligsoft.com:
#container
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
Use Firebug to inspect your CSS and determine the relevant classes on the
<body> tag.
On Fri, Feb 4, 2011 at 12:56 PM, pat@soligsoft.com wrote:
Sorry didn't work. Should it be .page--front #container { }?
use body classes for theming.
.page-front #container { }
/Stanislav
Am 04.02.2011 um 20:44 schrieb pat@soligsoft.com:
#container
_______________________________________________
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
.front #somediv { background... }
On Fri, Feb 4, 2011 at 5:16 PM, pat@soligsoft.com wrote:
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
Use Firebug to inspect your CSS and determine the relevant classes on the
<body> tag.
On Fri, Feb 4, 2011 at 12:56 PM, pat@soligsoft.com wrote:
Sorry didn't work. Should it be .page--front #container { ……… }?
use body classes for theming.
.page-front #container { ……… }
/Stanislav
Am 04.02.2011 um 20:44 schrieb pat@soligsoft.com:
#container
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
What are the classes on the <body> tag?
Is class="html front not-logged-in no-sidebars page-node" on the <body>?
If so, target the #container this way:
.front #container { ... }
Consider getting a book on CSS to help learn how to properly use selectors.
On Fri, Feb 4, 2011 at 1:16 PM, pat@soligsoft.com wrote:
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
Use Firebug to inspect your CSS and determine the relevant classes on the
<body> tag.
On Fri, Feb 4, 2011 at 12:56 PM, pat@soligsoft.com wrote:
Sorry didn't work. Should it be .page--front #container { ……… }?
use body classes for theming.
.page-front #container { ……… }
/Stanislav
Am 04.02.2011 um 20:44 schrieb pat@soligsoft.com:
#container
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
Will get css book. But still confused. No examples seem to work, totally confused.
PChuprina
What are the classes on the <body> tag?
Is class="html front not-logged-in no-sidebars page-node" on the <body>?
If so, target the #container this way:
.front #container { ... }
Consider getting a book on CSS to help learn how to properly use selectors.
On Fri, Feb 4, 2011 at 1:16 PM, pat@soligsoft.com wrote:
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
Let's suppose you wanted to put a background image into the div header.inner.group, only on the front page.
.front #header.inner.group { background-image: url('images/my-background-image.png'); }
This would go into style.css in your theme, or local.css (check out your theme's info file to see which css file is being invoked).
See http://www.w3schools.com/css/css_background.asp where you can learn css without buying a book. But books are good (css cookbook, etc.) if you can spare the cash.
Victor Kane http://awebfactory.com.ar http://drupal.org/project/pft
On Fri, Feb 4, 2011 at 5:41 PM, pat@soligsoft.com wrote:
Will get css book. But still confused. No examples seem to work, totally confused.
PChuprina
What are the classes on the <body> tag?
Is class="html front not-logged-in no-sidebars page-node" on the <body>?
If so, target the #container this way:
.front #container { ... }
Consider getting a book on CSS to help learn how to properly use selectors.
On Fri, Feb 4, 2011 at 1:16 PM, pat@soligsoft.com wrote:
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
Hi I am not sure, but try to create custom css class(MYCLASS) and then add it to front-page.tpl.php <div id="container" class="html front not-logged-in no-sidebars page-node MYCLASS"> Not sure if it does make any sense.
Tom
On Fri, Feb 4, 2011 at 8:41 PM, pat@soligsoft.com wrote:
Will get css book. But still confused. No examples seem to work, totally confused.
PChuprina
What are the classes on the <body> tag?
Is class="html front not-logged-in no-sidebars page-node" on the <body>?
If so, target the #container this way:
.front #container { ... }
Consider getting a book on CSS to help learn how to properly use selectors.
On Fri, Feb 4, 2011 at 1:16 PM, pat@soligsoft.com wrote:
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
Check your tpl.php file for errors, messy unclosed divs etc and your css class( or ID ) as well. Good luck Tom If it is drupal 7 then...everything can happen
On Fri, Feb 4, 2011 at 8:51 PM, pat@soligsoft.com wrote:
Thanks Tom,
Tried but no success at all.
Hi I am not sure, but try to create custom css class(MYCLASS) and then add
it
to front-page.tpl.php
<div id="container" class="html front not-logged-in no-sidebars
page-node
MYCLASS"> Not sure if it does make any sense.
Tom
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
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 :)
On Fri, Feb 4, 2011 at 2:00 PM, Tomasz Kisielewski < tom.kisielewski@gmail.com> wrote:
Check your tpl.php file for errors, messy unclosed divs etc and your css class( or ID ) as well. Good luck Tom If it is drupal 7 then...everything can happen
On Fri, Feb 4, 2011 at 8:51 PM, pat@soligsoft.com wrote:
Thanks Tom,
Tried but no success at all.
Hi I am not sure, but try to create custom css class(MYCLASS) and then add
it
to front-page.tpl.php
<div id="container" class="html front not-logged-in no-sidebars
page-node
MYCLASS"> Not sure if it does make any sense.
Tom
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
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 :)
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 :)
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
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
:)
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
:)
themes mailing list themes@drupal.org http://lists.drupal.org/mailman/listinfo/themes
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
:)
This is what firebug gives me.
<body id="genesis-1c"> <div id="skip-link"> <div class="region region-page-top"> <div id="container" class="html front not-logged-in no-sidebars page-node"> </body>
So confused. Sorry to bother anyone.
PChuprina
What are the classes on the <body> tag?
Is class="html front not-logged-in no-sidebars page-node" on the <body>?
If so, target the #container this way:
.front #container { ... }
Consider getting a book on CSS to help learn how to properly use selectors.
On Fri, Feb 4, 2011 at 1:16 PM, pat@soligsoft.com wrote:
When I used firebug to inspect I got:
<div id="container" class="html front not-logged-in no-sidebars page-node"> I'm not really sure what to use.
PChuprina
Use Firebug to inspect your CSS and determine the relevant classes on
the
<body> tag.
On Fri, Feb 4, 2011 at 12:56 PM, pat@soligsoft.com wrote:
-
Carl Wiedemann -
pat＠soligsoft.com -
Stanislav Müller -
Tomasz Kisielewski -
Victor Kane