treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Wordpress: Sidebar widget help

  • Hey,

    I originally posted this in the css help forum, when I guess I should of posted it here. Hopefully someone can help me out, it's really frustrating. Maybe my whole problem is something to do with functions sidebar array? Do I have to define that the widget will be in a div? Ive seen other people trying to style their widgets, having to add some array code to functions.php. Not sure on if that's what I have to do, I haven't come across any posts on wordpress forums that have tried to style widgets into a div... is it even possible?

    anywho, my original post.

    ------------------------------------------

    I'm a wordpress noob, as of recently I've been putting together my own template. It has gone relatively smoothly until I had to deal with the widgets, then I hit a wall. I need some help on how to position a widget, is it possible to position a widget inside a div? If so how would I go about this?

    Here is my sidebar code:
     <div id=\"sidebar\">
    <?php

    if(!function_exists('dynamic_sidebar')
    || !dynamic_sidebar()) :
    ?>
    <?php endif; ?>
    <div class=\"ad125x125\">
    <p class=\"ad\">125x125 AD SPOT</p>
    </div>
    <!-- End Ad box 125x125 -->
    <div class=\"ad2125x125\">
    <p class=\"ad\">125x125 AD SPOT</p>
    </div>
    <!-- End Ad box 125x125 -->
    <div class=\"ad3125x125\">
    <p class=\"ad\">125x125 AD SPOT</p>
    </div>
    <!-- End Ad box 125x125 -->
    <div class=\"ad4125x125\">
    <p class=\"ad\">125x125 AD SPOT</p>
    </div>
    <!-- End Ad box 125x125 -->
    <div id=\"search\">
    <?php include TEMPLATEPATH . '/searchform.php'; ?>
    </div><!-- End Search -->
    <div id=\"featured\">
    <div class=\"featuredheader\"></div>
    <div class=\"features\">
    <div id=\"featureone\"><a href=\"#\"><img src=\"<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/featured/Ontheroad.jpg\" alt=\"on the road\" width=\"286\" height=\"62\" border=\"0\" /></a></div>
    <!-- End Feature One -->
    <div id=\"featuretwo\"><a href=\"#\"><img src=\"<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/featured/getdirty.jpg\" alt=\"get dirty\" width=\"286\" height=\"62\" border=\"0\" /></a></div>
    <!-- End Feature Two -->
    <div id=\"featurethree\"><a href=\"#\"><img src=\"<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/featured/historyofblackmetal.jpg\" alt=\"history of\" width=\"286\" height=\"62\" border=\"0\" /></a></div>
    </div>
    <!-- End Features -->
    </div>
    <!-- End Featured -->
    <div class=\"popularstories\"\">
    <div class=\"popularheader\"></div>
    <ul class=\"h5\">

    </ul>
    </div>
    <!-- End Popular stories -->
    <div class=\"ad300x250\">
    <p class=\"ad\">300x250 AD SPOT</p>
    </div>
    <!-- End 300x250 AD -->
    <div class=\"mostcommented\">
    <div class=\"commentheader\"></div>
    <ul class=\"h5\">

    </ul>
    </div>
    <!-- End Most Commented -->
    <div class=\"archives\">
    <div class=\"archivesheader\"></div>
    <ul class=\"h5\">

    </ul>
    </div>
    <!-- End Archives -->
    <div id=\"submitstory\"><a href=\"#\"><img src=\"<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/submitstory.png\" width=\"246\" height=\"70\" alt=\"submit a story\" /></a></div>
    <!-- End Submit Story -->
    </div>
    <!-- End Sidebar -->

    I've read that wordpress only seems like to <ul>'s for sidebars, not divs. I doubt that has anything to do with my problem, since I've change it to a <ul> while I was trying different things to get it to work.

    CSS:
    /*/ Side Bar(News) /*/


    #sidebar #archives {
    position: relative;
    height: 427px;
    width: 294px;
    background-image: url(img/sidebar/news/contentboxbg.png);
    background-repeat: repeat;
    left: 15px;
    top: 30px;
    }


    #sidebar #archives .archivesheader {
    background-image: url(img/sidebar/news/archiveheader.jpg);
    position: relative;
    height: 44px;
    width: 291px;
    left: 2px;
    top: 1px;

    }

    #sidebar #archives .h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #FFF;
    text-decoration: none;
    list-style-type: none;
    overflow: hidden;
    padding: 2px;
    max-height:425;
    max-width:295;
    margin-top: 8px;
    margin-right: 5px;
    margin-bottom: 0px;
    margin-left: 5px;
    text-align: justify;
    }

    #sidebar #popularstories {
    position: relative;
    height: 276px;
    width: 294px;
    background-image: url(img/sidebar/news/smallcontentboxbg.png);
    background-repeat: repeat;
    left: 15px;
    bottom: 120px;
    }

    #sidebar #popularstories .popularheader {
    background-image:url(img/sidebar/news/popularstoriesheader.jpg);
    height: 44px;
    width: 290px;
    left: 2px;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
    font-size: 20px;
    text-align: left;
    top: 1px;
    }

    #sidebar #popularstories .h5,li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    text-decoration: none;
    list-style-type: none;
    overflow: hidden;
    padding: 12px;

    }

    #sidebar #mostcommented {
    position: relative;
    height: 276px;
    width: 294px;
    background-image: url(img/sidebar/news/smallcontentboxbg.png);
    background-repeat: repeat;
    left: 15px;
    bottom: 10px;

    }

    #sidebar #mostcommented .commentheader {
    background-image:url(img/sidebar/news/mostcommentedheader.jpg);
    height: 44px;
    width: 290px;
    left: 2px;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFF;
    font-size: 20px;
    text-align: left;
    top: 1px;

    }

    #sidebar #mostcommented .h5,li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
    text-decoration: none;
    list-style-type: none;
    overflow: hidden;
    padding: 12px;
    }

    #sidebar #submitstory {
    position: relative;
    height: 70px;
    width: 246px;
    left: 40px;
    top: 100px;


    }

    I've tried the widget class wordpress generates for the widget, it changes the styling but yet I can't position where I want it on my sidebar nor can I seem to get the widget inside the div over the background image I want.

    Here is the widget with no styling, as you can see placed at the top of the sidebar.
    http://i141.photobucket.com/albums/r47/harristhegod/sidebar1.png

    Here is the non dynamic sidebar without the widget. As you can see I have specific divs (boxs) for where I want my widgets. How would I go about getting specific widgets into those divs, specifically the archive widget at the moment?
    http://i141.photobucket.com/albums/r47/harristhegod/sidebar2.png

    Hopefully someone will be able to help me out, any help is much appreciated.
  • yes you can position it all with css....

    here is the best thing you can do.

    go to your wordpress page and view > source

    then scroll down until you get to your sidebar code.

    and then take a note of all the elements you want/need to style.

    even take a hierarchy if need be, then style to your hearts content.

    remember you are styling the HTML tags/id's/classes not the PHP code.