Sidebar height to match size of widget
-
We’ve added a sign-up block for a newsletter. The line that divides the sidebar blocks is in the middle of the sign-up form. How do I add to the height of the sidebar block/make that divider line float to accommodate the entire sign-up block?
Site: https://www.resolutionsblog.com
Any help would be appreciated.
Thanks!
Melinda
-
Try adding:
#sidebar ul li #webFrmID ul {border:none;)
to the bottom of style.css
OK – I must be thick or something.
Do I add it before or after the following line:
/* End Various Tags & Classes*/
I tried adding it before the line above – no change. I tried adding it after the last mention of sidebar with the css stylesheet – no change.
Can I just delete the divider lines in the sidebar altogether? that would solve the problem.
Thanks for your help.
Melinda
Try adding this to the bottom of your style.css file:
#sidebar ul li #webFrmID ul {background-image: none !important;}
The above code will delete the line altogether…
If you want the line back below the subscribe button, you can add the following code to the style.css file as well…
#sidebar ul li #webFrmID {background:url(images/bg_li_bottom.gif) left bottom repeat-x !important; margin-bottom: 20px !important;}
You can add all the above after “/* End Various Tags & Classes*/” or just before it.
No joy with removing the line. Any other suggestions?
The theme is Deep Silent, if that helps.
Here is the code for the newsletter opt-in field. Maybe there’s something wonky in the code that’s causing the problem.
<style type=”text/css”>
<!–
#webFrmID { font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif; font-size: 12px; color: #000000; width:200px;}
#webFrmID .cntBox { position: relative; left: 50%; width: auto; float: left; clear: both; text-align: left; margin: 0; }
#webFrmID .cntBox .box { position: relative; left: -50%; float: left; padding: 0; }
#webFrmID .chikLet { margin: 0; padding: 0; height: 24px; }
#webFrmID .chikLet li, .chikLet li span { display: block; height: 24px; }
#webFrmID .chikLet li { margin: 0; padding: 0; float: left; line-height: 24px; }
#webFrmID .chikLet li span { background-position: right bottom; padding: 0; float: left; }
#webFrmID .clearer { width: 100%; height: 0.1px; font-size: 0.1px; clear: both; line-height: 0.1px; }
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
–>
</style><div id=”webFrmID”>
<form accept-charset=”utf-8″ action=”https://www.getresponse.com/cgi-bin/add.cgi” target=”_blank” style=”width: 200px; margin: 0;”>
<div style=”width: 210px; font-family: tahoma; background:none;”>
<div style=”font-size: 12px; color: #000000; border: 0px solid #000000; padding: 10px 0px 0px 0px; margin: 10px;”>
<ul id=”fields” style=”list-style: none; padding: 0; margin: 0;”>
<li id=”subscriber_name-field” style=”list-style: inherit; background: none; float: none; height: 20px; width: 165px; padding: 0px 0px 0px 10px; margin-bottom: 10px; margin-left: 0px;”>
<label style=”float: left;” for=”subscriber_name”>Name</label>
<input id=”subscriber_name” name=”subscriber_name” value=”” type=”text” style=” float: right;width: 100px; border: 1px solid #000000;”/>
<div style=”clear: both;”></div><li id=”subscriber_email-field” style=”list-style: inherit; background: none; float: none; height: 20px; width: 165px; padding: 0px 0px 0px 10px; margin-bottom: 10px; margin-left: 0px;”>
<label style=”float: left;” for=”subscriber_email”>Email</label>
<input id=”subscriber_email” name=”subscriber_email” value=”” type=”text” style=” float: right;width: 100px; border: 1px solid #000000;”/>
<div style=”clear: both;”></div></div>
<input type=”hidden” name=”confirmation_url” id=”confirmation_url” value=””/>
<input type=”hidden” name=”error_url” id=”error_url” value=””/>
<input type=”hidden” name=”campaign_name” id=”campaign_name” value=”resolutionsnewsletter”/>
<input type=”hidden” name=”custom_ref” id=”custom_ref” value=””/>
<input type=”hidden” name=”custom_http_referer” id=”custom_http_referer” value=””/>
<div style=”padding-bottom: 0px; padding-top: 0px; text-align: center; “>
<input type=”submit” value=”Subscribe” style=”width:100px; background-color:transparent; border:1px solid #000000; color:#000000;” /></div>
<div class=”clearer”></div>
</div>
</form>
</div><script type=”text/javascript”>var el=document.getElementById(“custom_http_referer”);if(el != null){el.value = document.location};</script>Thanks!
Melinda
It should work…
Did you include it correctly? I copied and paste the HTML for the page to a local html file and added the codes I stated in the previous reply and the line was removed…..fyi: The line that you see is actually an image file… not a border setting..
geraldyeo,
Thanks for your help! I pasted that code in the right spot and…nothing changed. However, you did provide the tidbit of info that brought about the breakthrough – the line is an image file. Aha!
I went into the style.css code and changed the background from an image url to none – that did the trick! Woo hoo!
Here’s where I made the change:
.widgettitle{
border-bottom:1px solid #767155;
}
#sidebar ul{
background-image:none;
}
#sidebar ul li ul li ul{
background-image:none;
margin-bottom:50px;
padding-top:0px;
padding-bottom:0px;
border:none;
}
#sidebar ul li ul{
background-image:none;
background-repeat:repeat-x;
background-position:bottom left;
padding-bottom:10px;
margin-bottom:20px;
padding-top:5px;
border-top:1px solid #767155;The third #sidebar ul li ul{ section (under .widgettitle{) originally had this code:
background-image:url(images/bg_li_bottom.gif);Thanks again and hope this can help others, too.
Ciao,
Melinda
- The topic ‘Sidebar height to match size of widget’ is closed to new replies.