WordPress.org

Ready to get started?Download WordPress

Forums

Is it possible to add a style sheet to an individual widget? (8 posts)

  1. Tiff.web
    Member
    Posted 4 years ago #

    When i attached a style sheet to a "text" widget... it seems to have applied it to each widget... Here is my link.. http://www.designbytiffany.com/BlogDesign - I've used BLogger for so long and am now trying to learn WordPress. So this is my "testing" site! =)
    What I want to do is use an image for the block header. Which I did by adding a text widget and just insert an image in html.
    Next I was going to add another text widget below that to add the content for that header. But I wanted the content to have a background color.
    As you can see the background color is behind all the widgets including my image.... which doesn't look right...
    Know what I mean? Thanks for your time!

  2. Jonathan Dingman
    Member
    Posted 4 years ago #

    I would just add a div around the custom widget and give the div a class, then specify the CSS for that class in the style.css.

    that's the best route, imo.

  3. Tiff.web
    Member
    Posted 4 years ago #

    Okay! Do I do that inside the widget, or is that somewhere else?

  4. Jonathan Dingman
    Member
    Posted 4 years ago #

    yeah, put the div and class inside the widget text.

  5. Tiff.web
    Member
    Posted 4 years ago #

    That sounds good, but I realized I can't do that to the widgets that don't have a text space to add html.
    What I'm actually trying to do here is use a different image for each widget header.
    THere must be a simple way to do that.... any ideas?

  6. Jonathan Dingman
    Member
    Posted 4 years ago #

    well actually, the sidebar should insert some widget class already, you could probably do something like

    .widgetclass img { padding:5px; } or something

  7. Tiff.web
    Member
    Posted 4 years ago #

    I appreciate it but I'll need a little more direction than that! I'm fairly new at this.... =)

  8. Jonathan Dingman
    Member
    Posted 4 years ago #

    Dont link the style sheet like you're doing, just add the style to the style.css file

    next step, use the .textwidget class that already exists. you can specify a class in the img if you need to, or put a <span> around the img, then specify like: .textwidget span img { text-align:center; } or whatever you need to do.

    Use a tool like Firebug to figure out how you can specify for the CSS.

Topic Closed

This topic has been closed to new replies.

About this Topic