Sidebar Widget Postion Help

• 

  misterchrs · Member · Sep 7, 2009 at 4:31 am

  • Copy link
  • Add topic to favorites

  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”>125×125 AD SPOT</p>
  </div>
  <!– End Ad box 125×125 –>
  <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”>300×250 AD SPOT</p>
  </div>
  <!– End 300×250 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 –>’

  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 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.

• 

  zefontainhas · Member · Sep 7, 2009 at 4:31 am

  • Copy link

  You did not specify a blog address or reason for posting when you created this topic.

  This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

  If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

  If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

  This is an automated message.