• Resolved maladjustment

    (@maladjustment)


    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Try adding:

    #sidebar ul li #webFrmID ul {border:none;)

    to the bottom of style.css

    Thread Starter maladjustment

    (@maladjustment)

    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.

    Thread Starter maladjustment

    (@maladjustment)

    No joy with removing the line. Any other suggestions?

    The theme is Deep Silent, if that helps.

    Thread Starter maladjustment

    (@maladjustment)

    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&#8221; 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..

    Thread Starter maladjustment

    (@maladjustment)

    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

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Sidebar height to match size of widget’ is closed to new replies.