WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Styling individual widgets with background images (7 posts)

  1. MKULTRON
    Member
    Posted 2 years ago #

    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) -
    http://sistersnoir.com/test2/test.html

    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
    Thanks
    MK

  2. Michael Arestad
    Member
    Posted 2 years ago #

    Got a link to the WordPress site?

  3. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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?

    http://codex.wordpress.org/Function_Reference/register_sidebar

  4. Michael Arestad
    Member
    Posted 2 years ago #

    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.

  5. MKULTRON
    Member
    Posted 2 years ago #

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

    <?php
    
    if ( function_exists('register_sidebar') )
    register_sidebar(array('name'=>'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.

    Thanks

  6. Redefine
    Member
    Posted 2 years ago #

    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.

    register_sidebar(array(
      		'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">
    <ul>
    <li>content</li>
    </ul>
    </div>
    <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.

  7. MKULTRON
    Member
    Posted 2 years ago #

    That works absolutely perfectly, thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic