[Resolved] Style sidebar widgets individually

Home Forums Support Style sidebar widgets individually

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #44761
    Josh Lake

    I’m looking to customize the style for each sidebar widget individually, much like the right sidbar on your site here: https://www.generatepress.com/support/ (top login widget is white bg, the rest are blue)

    Is this built in to the add-ons?

    #44788
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    You will need to use a tool like Chrome’s inspect element, or Firefox’s Firebug.

    Each widget has a unique ID.

    For example, the 30 day guarantee on the right has this id: text-6

    So the CSS would be:

    #text-6 {
          background: #1e72bd;
          color: #FFF;
          padding: 0;
    }

    Let me know if that makes sense πŸ™‚

    #93054
    Roberto Enrique

    ahhhh, is that easy.

    #93115
    Tom
    Lead Developer
    Lead Developer
    #202852
    Daniele

    hi Tom,
    I knew that code works but just with text widget.

    I gave a try indeed because i was customizing some widgets in the right sidebar and I applied the same class

    {
    background: #1e72bd;
    color: #FFF;
    padding: 0;
    }

    to 2 different widgets but:

    the first one (a text widget) got all styles, the second (standard tag cloud widget) got only the background.

    Why? And then, how to modify the widget title too (actually I need to change just the color)?

    Thank you,
    Daniele

    In love with GeneratePress

    #202899
    Tom
    Lead Developer
    Lead Developer

    You need to use your browser’s code inspector to find the specific IDs for the widgets you’re trying to alter, for example: http://screencast.com/t/TiXaLlJHvb

    The CSS you added above is missing a selector, not sure if that’s intentional?

    The class for the widget title is .widget-title

    So CSS to apply to all widget titles would be:

    .widget-title {
        /* CSS in here */
    }

    And a specific widget:

    #unique-widget-id .widget-title {
        /* CSS in here */
    }
    #202962
    Daniele

    Hi Tom,
    sorry if I didn’t put the selector and thanks for the widget title customization.

    But actually, that matter still remains.

    I gave this css to the text widget (“Oggi negli anni ’80”)

    ‘#text-20, #text-20 .widget-title {
    background: #227DD0;
    color: #FFF;
    }

    #text-20 {
    background: #227DD0;
    color: #FFF;
    border: 2px dashed;
    border-color: #000;
    }’

    and it works as you can see.

    I gave this to the tag cloud widget

    ‘#tag_cloud-2 {
    background: #f30;
    color: #fff;
    border: 2px dashed;
    border-color: #000;
    }

    #tag_cloud-2 .widget-title {
    background: #f30;
    color: #fff;
    }’

    and it works with everything but text (that still remains #000).

    what’s wrong?

    In love with GeneratePress

    #202969
    Tom
    Lead Developer
    Lead Developer

    Ah, tags use links, so you’ll need to target the links directly like this:

    #tag_cloud-2 a {
        /* CSS in here */
    }
    #202970
    Roberto

    You should try
    https://wordpress.org/plugins/widget-css-classes/

    It simplifies everything.

    #202971
    Tom
    Lead Developer
    Lead Developer
    #217656
    Nine Dark Moons

    OMG thank you!!! you just helped me in 10 seconds, after i spent 3 hours searching the web. i was just able to update the background of my archive dropdown to black. thank you thank you thank you!!!

    #217657
    Nine Dark Moons

    i am using the archive that comes with wordpress/jetpack and all i did was add these 3 lines to my child-theme’s style.css sheet:

    #archives-dropdown-2 {
    background: #000000;
    color: #DC143C;
    }

    you have no idea how many things i have been trying. thank you!!!

    #217694
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad we could help πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.