Widget titles in different colors

  • angelcakeslewis

    (@angelcakeslewis)


    12 years ago

    Is there a way to easily differentiate my h3 class so that I can make each widget title a different color? Right now they’re all listed as “widgettitle” which (obviously) means I can only style them together. I JUST started taking a CSS class, so to say I’m a newbie is an understatement. I think I might be a level below newbie.

    Any help would be greatly appreciated. I’m drowning in a sea of .php, .html and .css code.

    Thanks,

    Lizzie

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter angelcakeslewis

    (@angelcakeslewis)

    The Hip Soiree

    I forgot to close the html code. See, I told you I’m a newbie…

    Melindrea

    (@melindrea)

    Yes you can. If you inspect the code using either Firebug or the Chrome Inspector, you’ll see that the parent of the widget itself has both a series of classes and an id.

    If it’s “each unique widget” should have it’s own colour, then you can use the ID (where for instance the DIY has the id linkcat-12 for the moment) like the following:

    #linkcat-12 .widgettitle { color: blue; }

    Hope this helps.

    Thread Starter angelcakeslewis

    (@angelcakeslewis)

    But the .widgettitle is linked to h3, so it changes the color of all the widget titles.

    For example, “Pages” is in:

    li class=”widget-1 widget-first widget-odd pages widgetcontainer widget_pages” id=”pages-2″
    h3 class=”widgettitle”

    and Categories is in:

    li class=”widget-3 widget-odd cat widgetcontainer widget_categories” id=”categories-3″
    h3 class=”widgettitle”

    Is it possible to make each of these a different color?

    Michael

    (@alchymyth)

    the widget seems to have individual css classes like .widget-1 and also individual css ids like #pages-2 and #categories-3 (as @melindrea already pointed out).

    examples:
    for the ‘pages’ widget:
    .widget-1 h3.widgettitle { color: #abc123; }
    or alternatively for the same widget:
    #pages-2 h3.widgettitle { color: #abc123; }

    and for the ‘categories’ widget:
    .widget-3 h3.widgettitle { color: #567edf; }
    or alternatively for the same widget:
    #categories-3 h3.widgettitle { color: #567edf; }

    please refer to a css forum for further help with basics in formatting; https://csscreator.com/forum

    Thread Starter angelcakeslewis

    (@angelcakeslewis)

    Sorry about that. I’ll go to the CSS board. Thanks for the help, though.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Widget titles in different colors’ is closed to new replies.