hi,

using this lovely theme, i have the node-type class in the body element and in the div.node element, but nowhere in between.

i'm trying to add the node type to the div#content-region inside page.tpl so i could control things like the title and the block-system-main, without it being page wide (and thus interfering with overlays i might add).

the only reference i found in the code was this -
$page['content']['system_main']['nodes'][node-number]['#bundle']
but it seems a bit complicated. any ideas?

Comments

sheena_d’s picture

sheena_d commented
Status: Active » Fixed

You can use the body class as part of your CSS selector in order to make your CSS for other body elements more specific. For example, i you wanted to style the page title only for blog node types, you would use this CSS selector:

 .node-type-blog h1.title {
  //title styles for the blog node type only
}

or if you wanted to style paragraphs inside #block-system-main only for blog node types, you would use:

.node-type-blog #block-system-main p {
  //only affects paragraphs in the system-main block on blog nodes
}

And so forth. You can learn a bit more about CSS specificity here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you...

Cheers,
Sheena

IdanC’s picture

IdanC commented

sheena, again you amaze me with you're quick and thorough respond, thank you!

but with your example, if another h1.title would appear in that page (for example inside a colorbox window) it will have the same styling, even though it is not a blog title.

therefore, i'm looking for a way to add the node-type class to something less general than the body tag, for example div#content-region.

sheena_d’s picture

sheena_d commented

You could narrow the CSS selector by whatever region the element you want to affect is in.

For example, you could use this selector:

.node-type-blog #content-region h1.title {
 //only affects the h1.title within the content region on blog pages
}

This would serve the same purpose as if the "node-type-blog" class were added to the #content-region div. You can make the selectors as specific or general as you need, without needing to implement heavy programatic solutions within your theme.

IdanC’s picture

IdanC commented
Status: Fixed » Active

as always, you are right, but in my case it's a bit more complicated -

to be specific, when i load an overlay, i don't load the body element of the page i'm loading, but only the main or the content div. and in those cases, I can't refer to the h1 element in the overlay.

did i explained my self better?

sheena_d’s picture

sheena_d commented

Can you perhaps provide a link to the site where this is occuring and let me know how I can get the overlay to display?

Usually, these overlays will not use the theme's page.tpl.php, but have their own, so changing your theme's page template may have no affect on the overlay and it is difficult for me to predict what CSS would work best for you without seeing a specific example.

Thanks!

IdanC’s picture

IdanC commented

usually these overlays will have their own .tpl, but i thought using the jquery load function with a reference to the #content-group element would be simpler.

and for the link, please visit hallo.co.il and click the bottom banner.

sheena_d’s picture

sheena_d commented
Status: Active » Fixed

Sorry this issue fell off my radar. There are a number of ways you could structure the page template for these overlays so that you have a node type-based CSS class to target your styling with. This will most likely involve writing a custom implementation of temlate_preoprocess_page() to creates a custom variable that can be printed out as the class on one of the page content's wrapping divs. If you are new to preprocess functions in Drupal themes, I would recommend reading the documentation on Overriding Themable Output.

Cheers,
Sheena

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.