WordPress.org

Ready to get started?Download WordPress

Forums

Widget titles in different colors (6 posts)

  1. angelcakeslewis
    Member
    Posted 1 year 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

  2. angelcakeslewis
    Member
    Posted 1 year ago #

    The Hip Soiree

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

  3. Melindrea
    Member
    Posted 1 year ago #

    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.

  4. angelcakeslewis
    Member
    Posted 1 year ago #

    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?

  5. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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; http://csscreator.com/forum

  6. angelcakeslewis
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic