Bingo Slots Yono.Claim Your Free 999 Pesos Bonus Today

(@bbelack)

My site is benbelack.com/blog
I use the Imprezz theme.

Finally got my second sidebar (sidebar-right) dynamic. I can control it now in the control panel as I set out to do.

However, when I start adding widgets to this sidebar the alignment is all wrong. It actually posts underneath/behind sidebar one.

That doesn’t work. I trying to get all widgets after “Favorite Websites” aligned properly with what is already above.

I’m a bit of a newb, but I think since the sidebar is registered in the functions.php file, and its code is placed in the index.php file where it should be, what’s missing now is the HTML in the syles.css defining where the widgets go, padding, text, etc.

Please help!

Here is all relevant code:
From index.php

<?php get_sidebar(); ?>
<div class="sidebar-right">
<div class="twitter">
<div class="twitter-content">
        <ul id="twitter_update_list"><li></li></ul></div>
		<script type="text/javascript" src="https://twitter.com/javascripts/blogger.js"></script>
        <script type="text/javascript" src="https://twitter.com/statuses/user_timeline/bbelack.json?callback=twitterCallback2&amp;count=1"></script>
<a class="followme" href="https://twitter.com/bbelack">Follow us on twitter</a>
</div>

<img src="<?php bloginfo('template_url'); ?>/images/pdlogo.gif" alt="productivedreams" class="pdlogo"/>

</div>

<?php dynamic_sidebar( 'sidebar-right' ); ?>

From functions.php

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
    ));

register_sidebar( array( 'sidebar-right' => 'sidebar-right', 'id' => 'sidebar-right', 'before_widget' => '<div id="%1$s" class="widget %2$s widget-%2$s"><div class="widget-inside">', 'after_widget' => '</div></div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );

From style.css

.sidebar-right{
width:175px;
float: left;
padding-top: 70px;
margin-left: 12px;
}

.narrowcolumn, .widecolumn{
float: left;
padding-top:40px;
width:480px;
}

.narrowcolumn .post{
padding-right: 30px;
position: relative;
padding-bottom: 0px;
padding-top: 113px;
_overflow: hidden;
_width: 468px;
}

p.postmetadata{
padding-bottom: 20px;
display: none;
}

.comments a{
text-decoration: none;
font-size: 12px;
text-transform: lowercase;
background: #D0E6EC url(images/comments.gif) no-repeat scroll 99% 50%;
display: block;
margin-left: -15px;
padding-right: 25px;
width:460px;
text-align: right;
margin-bottom: 20px;
}

.narrowcolumn .post .comments a span{
font-size: 12px;
}

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter

bbelack

(@bbelack)

15 years, 11 months ago

Looks like I was missing some of the sidebar code in style.css… Here is what I meant to post

#sidebar{
width:285px;
float: left;
background: transparent url(images/sidebarbg.gif) repeat-y center top;
_margin-left:-18px;
}

#sidebar a:hover{
color: #FFF;
}

#sidebar h1.logo{
width: 250px;
padding: 0px;
margin: 0px auto;
}

#sidebar h1.logo a{
background: url(images/logo.gif) no-repeat center top;
width: 250px;
height: 120px;
display: block;
overflow: hidden;
text-indent: -999px;
border-top:6px solid #111f22;
}

input#submit{
border:1px solid #7BA2AD;
padding: 10px;
font-family: Helvetica, Arial, Verdana;
background: #242f31;
text-transform: uppercase;
color: #FFF;
cursor: pointer;
font-size: 14px;
}

#commentform input#submit{
float: right;

}

#sidebar h2{
padding: 10px 10px 20px 10px;
background: url(images/heads.jpg) no-repeat center;
font-family: Helvetica, Arial, Verdana;
font-size: 18px;
color: #FFF;
font-weight: bold;
letter-spacing: -1px;
text-transform: uppercase;
}

.narrowcolumn textarea{
border:2px solid #7BA2AD;
width:93%;width:415px;
font-family: Arial, Helvetica, Verdana;
font-size: 16px;
padding: 5px;
_width:405px;
}

.narrowcolumn h2.pagetitle{
margin-top: 30px;
text-transform: uppercase;
_margin-top:70px;
}

.narrowcolumn #commentform label{
display: block;
float: left;
text-align: right !important;
width:130px;
}

.narrowcolumn #commentform{
margin: 0px auto;
_margin-left:20px;
overflow: hidden;
height: 1%;
}

.narrowcolumn #commentform label small{
float: right;
}

.narrowcolumn .add_comment h3#respond{
font-family: Helvetica, Arial, Verdana;
font-size: 20px;
text-transform: uppercase;
padding:10px;
margin: 10px 0px;color: #293538;
border-bottom: 2px solid #293538;
text-align: right;
position: absolute;
top:-10px;
left: 0px;
letter-spacing: -1px;
width: 430px;
}

.narrowcolumn .add_comment{
position: relative;
padding:55px 10px 40px 10px;
margin: 10px 0px;
}

.narrowcolumn #commentform #author, .narrowcolumn #commentform #email, .narrowcolumn #commentform #url{
float: right;
border:2px solid #7BA2AD;
font-family: Arial, Helvetica, Verdana;
font-size: 16px;
padding:5px 5px;
width:245px;
}
.narrowcolumn #commentform #author:focus, .narrowcolumn #commentform #email:focus, .narrowcolumn #commentform #url:focus, .narrowcolumn textarea:focus{
background:#FFFFF5;
}

.narrowcolumn #commentform p{
clear: both;
overflow: hidden;
padding: 5px 0px;
height: 1%;
}

.innerpage .post{
padding-top: 40px !important;
}

#sidebar ul li ul li{
border-bottom:1px solid #1F2A2C;
}

#sidebar ul li ul.top_commenters{
margin: 0px auto;
}

#sidebar ul li ul.top_commenters li{
padding-top: 10px;
}

#sidebar ul li ul{
width:80%;
margin: 0px auto;
}

#sidebar ul li ul li{
display: block;
padding-bottom: 10px;
}

#sidebar ul li ul li a{
color: #888d8f;
font-family: Helvetica, Arial, Verdana;
text-transform: uppercase;
letter-spacing: -1px;
font-size: 13px;
text-decoration: none;
}

#sidebar ul li ul{
margin: 10px auto 0px auto;
}

#sidebar .description{
width:230px;
font-family: Helvetica, Arial, Verdana;
margin: 0px auto;
color: #a8acad;
}

#sidebar .searchfield{
width:250px;
margin: 0px auto;
overflow:hidden;
clear: both;
padding: 5px 0px 3px 0px;
}

#sidebar .searchfield span, #sidebar .searchfield label{
display: none;
} 

#sidebar .searchfield input#searchsubmit{
border: none;
width:55px;
height: 28px;
display: block;
overflow: hidden;
text-indent: -999px;
line-height: 0;
float: left;
background: #0d1618 url(images/search_btn.gif) no-repeat center;
cursor: pointer;
}

#sidebar .searchfield input{
border: none;
color: #ededed;
background: #101c1f;
float:left;
height:16px;
padding:6px;
width:183px;
}

.sidebar-right{
width:175px;
float: left;
padding-top: 70px;
margin-left: 12px;
}

.narrowcolumn, .widecolumn{
float: left;
padding-top:40px;
width:480px;
}

.narrowcolumn .post{
padding-right: 30px;
position: relative;
padding-bottom: 0px;
padding-top: 113px;
_overflow: hidden;
_width: 468px;
}

p.postmetadata{
padding-bottom: 20px;
display: none;
}

.comments a{
text-decoration: none;
font-size: 12px;
text-transform: lowercase;
background: #D0E6EC url(images/comments.gif) no-repeat scroll 99% 50%;
display: block;
margin-left: -15px;
padding-right: 25px;
width:460px;
text-align: right;
margin-bottom: 20px;
}

.narrowcolumn .post .comments a span{
font-size: 12px;
}

.PostHead{
left:-30px;
position:absolute;
top:30px;
}

.PostHead h2, .innerpage .post h2{
float: left;
width:380px;
_width:360px;
padding-top: 5px;
padding-left: 11px;
font-size: 30px;
font-family: Helvetica, Arial, "Trebuchet MS";
letter-spacing: -1px;
text-transform: uppercase;
text-decoration: none;
}

.innerpage .post h2{
float:none;
padding-left: 0px;
width:auto;
}

.PostHead h2 a{
font-size: 30px;
font-family: Helvetica, Arial, "Trebuchet MS";
letter-spacing: -1px;
text-transform: uppercase;
text-decoration: none;

}

.PostTime{
float:left;
overflow:hidden;
width:100px;

}
.PostHead small.PostDet, .PostHead small.PostDet a{
font-size: 12px;
text-decoration: none;
}

.PostHead small.PostDet{
clear:both;
display:block;
left:10px;
position:absolute;
top:-26px;
height: 23px;
width:395px;
overflow: hidden;
display: none;
}

.PostTime b{
background:#C30301 none repeat scroll 0 0;
clear:both;
color:#FFFFFF;
display:block;
font-family:Helvetica,Arial,"Trebuchet MS";
font-size:62px;
font-weight:bold;
height:54px;
line-height:58px;
overflow:hidden;
padding:0;
text-align:right;
width:95px;
z-index:999;
}

.PostTime pm,
.PostTime am {
background: #293538 repeat scroll 0 0;
color: #FFF;
padding:0px;
display: block;
width:95px;
left: 0;
font-size: 14px;
text-align: right;
}

#page{
background: transparent url(images/wrapperbg.jpg) repeat-x center top;
width:959px;
margin: 0px auto;
overflow: hidden;
padding: 0px 15px 0px 30px;
position: relative;
z-index: 999;
}

.bgimage{
width:1004px;
margin: 0px auto;
background: #FFF url(images/sidebarbg.gif) repeat-y 511px 0px;
}

div.twitter{
background:#FFFFFF url(images/twitter.gif) no-repeat scroll left top;
margin-left:-14px;
overflow:hidden;
padding-top:20px;
width:200px;
}

div.twitter-content{
border-top:medium none;
overflow:hidden;
padding:0px 15px 0px 35px;
height: 135px;
}

div.twitter-content *{
font-size: 12px;
line-height: 18px;
width: 100%;
}

div.twitter-content li{
padding-top: 2px;
}

div.twitter-content li span{
clear: both;
display: block;
width:131px;
}

a.followme{
display: block;
width: 175px;
padding: 0 0 10px 0;
text-indent: -999px;
letter-spacing: -1px;
color: #AB3730;
text-decoration: none;
}

img.pdlogo{
margin-top: 15px;
clear: both;
}

.google-ads{
width:175px;
overflow: hidden;
padding-top: 20px;
float: left;
display: block;
margin-left: 15px;
}

#sidebar ul.top_commenters li{
float: left;
padding-left: 15px;
}

#sidebar ul.top_commenters li span img{
border: 3px solid #101C1F;
overflow: hidden;
display: block;
width:32px;
height:32px;
}

#sidebar ul.top_commenters li span img:hover{
border: 3px solid #FFF;
}

esmi

(@esmi)

15 years, 11 months ago

The new widget text isn’t underneath. It’s on top correctly but it’s dark text on a dark background, so you can’t see it. The reason for this is that your new widgets appear to be added after the right sidebar code. Looks like you added the new code for the dynamic sidebar in the wrong place within sidebar.php.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Quick HTML Question. Need help aligning widgets in my new dynamic sidebar…’ is closed to new replies.

Quick HTML Question. Need help aligning widgets in my new dynamic sidebar…

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics