WordPress.org

Ready to get started?Download WordPress

Forums

Sidebar Widget Positioning Help (2 posts)

  1. misterchrs
    Member
    Posted 4 years ago #

    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?

    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. At the moment I'm using the generic archive widget that comes with wordpress.

    Sidebar:

    <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"><img src="<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/featured/Ontheroad.jpg" alt="on the road" width="286" height="62" border="0" /></div>
    <!-- End Feature One -->
    <div id="featuretwo"><img src="<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/featured/getdirty.jpg" alt="get dirty" width="286" height="62" border="0" /></div>
    <!-- End Feature Two -->
    <div id="featurethree"><img src="<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/featured/historyofblackmetal.jpg" alt="history of" width="286" height="62" border="0" /></div>
    </div>
    <!-- End Features -->
    </div>
    <!-- End Featured -->
    <div class="popularstories"">
    <div class="popularheader"></div>
    <ul class="h5">
    
    </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">
    
    </div>
    <!-- End Most Commented -->
    <div class="archives">
    <div class="archivesheader"></div>
    <ul class="h5">
    
    </div>
    <!-- End Archives -->
    <div id="submitstory"><img src="<?php echo bloginfo('template_directory'); ?>/img/sidebar/news/submitstory.png" width="246" height="70" alt="submit a story" /></div>
    <!-- End Submit Story -->
    </div>
    <!-- End Sidebar -->'
    /*/ 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 know my div id's are off in the css, I've tried finding the div class that wordpress generates, no real luck. Only luck I have had is with .widget but that doesn't help position specific widgets.

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    Please don't post huge chunks of code here. For larger blocks of code, use the WordPress pastebin. It makes life easier for everyone.

    In this case, a link to a page on your site demonstrating the problem would be more helpful.

Topic Closed

This topic has been closed to new replies.

About this Topic