Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Specificity question; multiple h2 tags

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #27085
    Ian G
    Participant

    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 Science

    Normally 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> ?

    #67568
    Ian G
    Participant

    Thanks 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. org

    The 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.

    #67571
    JaredAM
    Member

    Since 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 ?>
#67579
JaredAM
Member
"Robskiwarrior" wrote:
and wow if that’s drupal the code it outputs is awful! lol

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.

#67583
Ian G
Participant
"Robskiwarrior" wrote:
Well your title for Latest News you can target like we did above, then the post titles inside you can target with:

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!

#67590
JaredAM
Member

Yeah, Views can be a kick in the teeth to template! CSS is the easiest way to go.

#67630
AshtonSanders
Participant
"Robskiwarrior" wrote:
and wow Views is evil. lol

Hahaha. Funniest quote all day.

#67641
Chris Coyier
Keymaster

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

Code:
$(“h2:contains(‘monster’)”).css(“color”, “green”);
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.