- This topic is empty.
-
AuthorPosts
-
December 4, 2009 at 6:03 pm #27085Ian GParticipant
Hey guys,
Just a quick question, is there a way to target specific h2 titles based on what they say(print)?
My problem is that I have a sidebar with sections using h2 tags as their headers, but since the titles of articles underneath are h2 as well, I want each h2 to have a separate background to improve the distinction between the two. So I want to give the section title that is called "Latest News" a background without theming the rest of the article titles
Ex:
:mrgreen: :mrgreen: :mrgreen: Latest News :mrgreen: :mrgreen: :mrgreen:
Doctor Who Struck Cyclist Found Guilty
Plastic From Sugar Cane?
Climate Change Skeptics Questionable ScienceNormally I would just add a h2 class to the section if I were coding it myself (h2 class= "Latest News") but I am using a CMS that autogenerates the classes, and there is no way to override or add new classes to the individual titles. :|
So what I am working with is this:
<div id="block-views-Mainpage_News_block-block_1" class="block block-views region-odd even region-count-1 count-2 with-block-editing">
<div class="block-inner">
<h2 class="title">Latest News</h2><h2 class="title"> also controls the styling of the article titles within the section, so I don’t think I can use that. Is it possible to write the CSS to style the <h2 class="title">>Latest News</h2> ?
December 4, 2009 at 6:59 pm #67568Ian GParticipantThanks for the quick reply Rob
I tried div.block-inner h2 and div.block-inner h2.title and was scratching my head until I realized that both the Section Title and the article title links fall under the div.block-inner, and that seemed to be the highest level of specificity I could get for that block. The site is up online, you can poke around on it with Firebug.
ecoevolution. orgThe sections I am trying to theme are the Latest news and the Blogroll sections on the front page. I want to make them more purty to clean up the look a bit and to make the sections more distinct. Right now, you can see the h2 have a background image that underlines titles. I’d like to have a class or other CSS-TRICK!!!!! that allows me to have a separate background image for the Latest News, and Blog Roll headers that doesn’t apply across to the actual article title h2’s themselves.
I am a total novice, so I may be missing something obvious. Unfortunately the CMS won’t let me add my own specific title class (as far as I know) so I am stuck working with what you see there.
December 4, 2009 at 8:10 pm #67571JaredAMMemberSince your using drupal, go into your theme folder and open block.tpl.php. There you can add your own superawesome class. You’ll probably see something like:
Code:content ?>
Actually, it’s Views output. Views is basically a database tool which is very flexible and allows you to get content out of your database and display it in a lot of different ways. However, it outputs UGLY html code – mainly to give you the flexibility to style everything. But with caching, Views really doth rock.
div.view-content h2 { }
and the blogroll inner titles you can do with
div.node-inner h2 { }
and wow if that’s drupal the code it outputs is awful! lol
Yeah, it’s more than a little daunting to try and dig through when you are learning CSS.
Thanks Rob, Your plan worked. I used:
#block-views-Mainpage_Blog_block-block_1 div.block-inner h2
for the Section Title and
#block-views-Mainpage_Blog_block-block_1 div.block-inner .view-content h2
for the articles.
Being such a noob on CSS I was too focused on the actual article title element, I should have looked at the containing element to see if I could find something to grab there (.view-content).
@JaredAM
[img]http://i282.photobucket.com/albums/kk275/richwell888/fry-see-what-you-did-there-scaled.jpg[/img]
You nailed it, it is Drupal and views. You’re right, I could do a custom block template, but I run into this issue frequently so I thought rather than pollute my site with a bunch of templates, I’d actually learn the CSS for once. Didn’t want having such a powerful tool making me lazy. ;)
I have the Blogroll themed now, working on the News section. Thanks guys, taught me something I needed to know!
Yeah, Views can be a kick in the teeth to template! CSS is the easiest way to go.
Hahaha. Funniest quote all day.
CSS can’t see content, so you can’t write a selector that can match based on what an h2 tag "says". JavaScript can though. via jQuery
- The forum ‘CSS’ is closed to new topics and replies.