Support » Themes and Templates » Styling individual widgets with background images

  • Resolved MKULTRON


    Hi guys,

    I’m wanting to make each widget on my sidebar individual so that they are seperate –

    each widget has a top, middle and bottom graphic, am I able to style each widget individually so that each incorporates these three graphics? I know that “widget”

    Here’s an example of what I’m after with plain html (see right sidebar) –

    in my WordPress theme I’m pulling the sidebar in like this, only the widgets are all lumped into the cornered box graphics together –

    [code moderated – please follow the forum guidelines for posting code]

    Any help would be much appreciated

Viewing 6 replies - 1 through 6 (of 6 total)
  • Got a link to the WordPress site?



    Forum Moderator

    unless the widgets have individual css ids or classes, your idea will be difficult;

    what is the code for registering the sidebars, in functions.php of your theme?

    Well, without knowing what his funtions.php code is, it’s tough to recommend anything, but I’m betting nth-child will come in handy for this situation.

    Hi guys, all I have right now in functions.php is the following:

    if ( function_exists('register_sidebar') )

    Am I right in saying each widget has its own id anyway? So I guess I could style them individually, though this could be a cumbersome approach, especially if I wanted to change to a new widget.


    It’s a bit hard to help you without seeing a link to your working site. We will need to look at your css and know your functions.php.

    If you want to have individual “widgets” in the sidebar, you just need to be creative when registering your sidebars.

      		'name'          => 'Sidebar',
    		'description'   => 'Standard sidebar for all pages.',
    		'before_widget' => '<div class="top-img"><div id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</div><div class="bottom-img"></div>',
    		'before_title'  => '<h2>',
    		'after_title'   => '</h2>'

    This will output the following:

    <div class="top-img"></div>
    <div id="uniqueID" class="widget widget_name">
    <div class="bottom-img"></div>

    All you need to do now is style .top-img, .bottom-img & .widget with what you want.

    Hope that helps.

    That works absolutely perfectly, thank you so much!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Styling individual widgets with background images’ is closed to new replies.