WordPress.org

Support

Support » Themes and Templates » [Resolved] help with alignment of side bar

[Resolved] help with alignment of side bar

  • Hi
    I am attempting my first child theme to make my blog page look like the rest of my website.

    I’ve been getting on really well but I’ve done something in the css of the side bar that means its now displaying under the body rather than next to it (although in the right location on the right hand side of the page!!)

    Is anyone able to help me understand where I’ve gone wrong please? CSS is copied below but if any further info is required please just let me know. Page link is http://jamieflynnbase.com/blog/?p=1

    div.sidebar {
    float:right;
    overflow:hidden;
    width:250px;
    min-height: 100%;
    background-color:rgba(0,45,80,0.6);
    margin:0 80px 0 150px;
    border: 30px solid rgb(0,45,80);
        border: 30px solid rgba(0,45,80,0.6);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-radius:25px;
    }
    * html #container {
    height: 100%;
    }

    Many thanks

    Jo

Viewing 15 replies - 1 through 15 (of 27 total)
  • Hey Jo,

    You probably need to put the div#primary back inside the div#container.
    Right now it comes after the #container is already closed.

    Paul

    Hey Paul

    I think I get what you mean (sorry a little new to this!)
    I’ve changed my code and have copied the whole lot below this time as it still hasn’t changed 🙁

    /*
    Theme Name: sandboxkid
    Theme URI: http://www.plaintxt.org/themes/sandbox
    Description: Child Theme for Sandbox
    Author: JoJoField
    Author URI: http://www.plaintxt.org
    Template: sandbox
    Version: 0.1
    */
    
    @import url("/sandbox/style.css");
    
    html, body {
    height: 100%;
    	background-image:url('/images/background.png');
    background-repeat:repeat-y;
        font-family: "Lucida Grande", Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
        font-size: 13px;
        color: #FFCC33;
        line-height:1.7em; /* 16*1.7=18 */
    }
    
    h1, h2, h3 {
    	font-weight: normal;
    	color: #FFCC33;
    }
    
    a:link {
    	color: #FFCC33;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    a:visited {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    div#container {
    float:left;
    margin:0 -490px 0 0;
    width:100%;
    }
    
    div#content {
    min-height: 100%;
    background-color:rgba(0,45,80,0.6);
    margin:0 520px 0 180px;
    border: 30px solid rgb(0,45,80);
        border: 30px solid rgba(0,45,80,0.6);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-radius:25px;
    
    div.sidebar {
    float:right;
    overflow:hidden;
    width:250px;
    min-height: 100%;
    background-color:rgba(0,45,80,0.6);
    margin:0 80px 0 150px;
    border: 30px solid rgb(0,45,80);
        border: 30px solid rgba(0,45,80,0.6);
        -webkit-background-clip: padding-box; /* for Safari */
        background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    border-radius:25px;
    }
    
    div#secondary {
    clear:right;
    }
    
    div#footer {
    clear:both;
    width:100%;
    font-size: 12px;
    color: #FFFFFF;
    }

    Howdy Jo,
    First, my bad: I should have encouraged you to post code using PasteBin (anything more than, say, 10 lines)
    http://codex.wordpress.org/Forum_Welcome#Posting_Code

    Again, my bad.

    Second, I didn’t mean changing your CSS file.
    The actual page template file is what needs change (from what I can tell.)

    My best guess is it’s the single.php file. (you’re building from some sandbox theme, right?)

    If you don’t see what I mean in single.php — or whatever template file is serving up your home page — paste the template file in pastebin, put the pastebin URL here in a reply, and I’ll check it out, fix it, and tell you how I fixed it (uh… assuming I actually get it fixed…)

    Thanks,
    Paul

    Hi Paul

    Sorry, joys of being a newbie :-/

    I haven’t amended the Sandbox single.php file from the original Sandbox one so not sure it’s there that I’ve upset it! I have made child header, footer and sidebar files though. I’ve taken a look at the sidebar.php code but can’t see anything obvious. I’ve posted it to PasteBin as you suggested and would be really grateful if you wouldn’t mind taking a look for me please. However, if you still think it should be single.php I should upload please just let me know!
    PastBin Code

    Many thanks

    Jo

    Hi Jo,

    Yes, sidebar.php looks good, thanks for sending it.
    If you do have a single.php file — or sometimes single-post.php — for your theme, please pastebin it for me.
    If you do not have a single.php file, then WordPress will be falling back to index.php, so pastebin it instead.

    We’ll figure it out, eh?!

    Paul

    Hi Paul

    No problem at all, here’s the single.php code

    Thank you so much

    Jo

    Code

    [ Mod note: use the short URL instead of the embed_js.php link, it works better. ]

    Groovy. You need to change the order of the lines at the end of single.php.

    Here are the last few lines, in the order I think they’ll work for you:

    </div><!-- #content -->
    <?php get_sidebar() ?>
    </div><!-- #container -->
    
    <?php get_footer() ?>

    Give it a shot.
    Paul

    Hi Paul

    Many thanks for this but unfortunately it’s still not in the right place, and on top of that it’s now repeated 🙁

    Any more ideas?

    Thanks

    Jo

    Okay, thanks for trying that, but please revert that change. I see that indeed some CSS changes should get you where you need to be. Your mileage may vary — there are different ways of doing this. Here is one way.

    1. div#container needs a specific width (usually important when floating things.)
    — Set width to 548px; — that matches the non-blog part of the site.
    — also give it 59px left margin and 20px bottom margin (remove other margins, so margin: 0 0 59px 20px; )

    2. div#content
    — remove the margin entirely

    3. div.sidebar has wide margins forcing the sidebars to break to new lines
    — It might work better to change the float to float:left;
    — change margin to only left margin 20px; (so, margin: 0 0 0 20px; )

    4. I’m assuming you want the secondary sidebar NEXT to the first sidebar. If that is true, then:
    div#secondary needs to NOT “clear:right;”

    Let me know if this gets you closer. Probably should save a copy of your CSS file before making these changes in case you don’t like them.

    Good luck,
    Paul

    Hi Paul

    Thank you so much for your continued help with this.
    I’ve applied all the changes you recommended (having saved a copy of my style sheet first) and unfortunately it’s still showing the sidebar underneath the blog content. 🙁

    Here’s the updated code

    And this is how the page looks now

    I feel almost tempted to go back to the original template and start again 🙁

    Ok so now I’m even more confused 🙁

    I’ve started my style.css file all over again to see where it went wrong but as soon as I add anything to it it drops the sidebar down below. I feel as if I could cry :'( lol

    I am unsure what to do short of downloading a completely different base theme and starting again.

    Before I do that does anyone have any suggestions for me to try please??

    Thanks

    Jo

    Ahh okay I have notice something further this morning that may help with resolving this issue.

    I recently added a new post and when I view the main blog page that lists all posts the sidebar is in the correct position, but when I go into an individual post page the sidebar drops to the bottom.

    What may cause this? Have I been looking at the wrong files to amend maybe?

    Main blog page
    Individual post page

    Any help greatly appreciated as always

    Shailesh

    @shaileshsavaliya

    Change in style.css for id div#content line : 48

    float: left;
    margin: 0 0 0 70px;
    width: 385px;

    Ahh okay I have notice something further this morning that may help with resolving this issue.

    I recently added a new post and when I view the main blog page that lists all posts the sidebar is in the correct position, but when I go into an individual post page the sidebar drops to the bottom.

    What may cause this? Have I been looking at the wrong files to amend maybe?

    Fantastic, thanks Shall!!

    Worked a treat! ;0)

Viewing 15 replies - 1 through 15 (of 27 total)
  • The topic ‘[Resolved] help with alignment of side bar’ is closed to new replies.