WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] help with alignment of side bar (28 posts)

  1. Jojo
    Member
    Posted 1 year ago #

    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

  2. Paul Kaiser
    Member
    Posted 1 year ago #

    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

  3. Jojo
    Member
    Posted 1 year ago #

    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;
    }
  4. Paul Kaiser
    Member
    Posted 1 year ago #

    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

  5. Jojo
    Member
    Posted 1 year ago #

    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

  6. Paul Kaiser
    Member
    Posted 1 year ago #

    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

  7. Jojo
    Member
    Posted 1 year ago #

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

  8. Paul Kaiser
    Member
    Posted 1 year ago #

    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

  9. Jojo
    Member
    Posted 1 year ago #

    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

  10. Paul Kaiser
    Member
    Posted 1 year ago #

    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

  11. Jojo
    Member
    Posted 1 year ago #

    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 :(

  12. Jojo
    Member
    Posted 1 year ago #

    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

  13. Jojo
    Member
    Posted 1 year ago #

    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

  14. Shail
    Member
    Posted 1 year ago #

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

    float: left;
    margin: 0 0 0 70px;
    width: 385px;
  15. twinax
    Member
    Posted 1 year ago #

    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?

  16. Jojo
    Member
    Posted 1 year ago #

    Fantastic, thanks Shall!!

    Worked a treat! ;0)

  17. Jojo
    Member
    Posted 1 year ago #

    Ok, things have been going really well since this was fixed. However, regardless of what I put in my css file the default font for posts and pages will only change if I manually update it in each page/post.

    Here's the css I have included:

    html, body {
    
            background: url(/images/background.png) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    
    height: 100%;
    	<!--background-image:url('/images/background.png');
    background-repeat:repeat-y;-->
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: 13px;
        color: #FFCC33;
        line-height:1.4em; /* 16*1.4=18 */
    }

    Can anyone advise why it's not picking this up as default please?

    Thanks

    Jo

  18. Paul Kaiser
    Member
    Posted 1 year ago #

    Hi Jo,

    OH! Wait... CSS comments are /* mycomment */, not the HTML comment you have in the above for background-image. Remove or fix that.

    Paul

  19. Jojo
    Member
    Posted 1 year ago #

    Hi Paul

    Thanks for getting back to me. So basically you mean I shouldn't have this bit?
    html, body {

    it should just be
    body {
    without the html bit?

  20. Jojo
    Member
    Posted 1 year ago #

    D'oh not to worry I've sussed what you meant!!!

    Not that bit at all but to get rid of the bit I'd commented out by using <!--[content]-->

    Did that and all is up and working!!

    Thanks so much Paul!

    Jo

  21. Paul Kaiser
    Member
    Posted 1 year ago #

    Fantastic, Jo. Keep on truckin'.
    Paul

  22. Jojo
    Member
    Posted 1 year ago #

    I'm sorry...another questions... :-/

    So I've been doing really well and have set myself up a separate 'splash' page as the main entry page into the site but i cannot get the content of the splash page to centre. I have tried everything I can think of but it still doesn't work. When I added the two images to the post I chose centre alignment. I've tried adding <center> tags to the html and I've even tried adding an overall page centering in the css but still no joy!!

    Can anyone see anything I've missed please?? here's the link

    Thanks

    Jo

  23. Paul Kaiser
    Member
    Posted 1 year ago #

    Howdy,
    On those images (actually I did it on their containing divs:
    1. Give them margin-left:auto; and margin-right:auto;
    -- This will center them insider their containing div.
    -- It is important for them to have a specific width, which you already have on them. Don't remove that width.

    2. You probably need to drop the "positioning:absolute;" for this to work.

    Good luck. Looks cool.
    Paul

  24. Jojo
    Member
    Posted 1 year ago #

    Hi Paul

    Sorry a bit lost there, I can't see I have a positioning:absolute anywhere?

    Thanks, it's my younger brother's website, he's just mad I think!!

    Jo

  25. Paul Kaiser
    Member
    Posted 1 year ago #

    Howdy,

    It is a style applied directly to the <div> element, rather than being in your stylesheet. If you don't already, you should install Firebug for Firefox or use Chrome developer extension (F12)

    Anyway, here is one example from the page:

    <div style="overflow: hidden; position: absolute;  width:575px; height:79px; z-index:1;">
    <img width="1" height="1" border="0" alt="" src="/home/jamiefly/public_html/wp-content/plugins/protect-content/protector.gif" title="Image Protector">
    </div>

    So, that <div> needs:
    a. remove position:absolute;
    b. add margin:0 auto;

    Best,
    Paul

  26. Paul Kaiser
    Member
    Posted 1 year ago #

    Actually that one is not a visible image... but the visible images are done the same way, with a div with inline styles. Check out the source and you'll see.

  27. Jojo
    Member
    Posted 1 year ago #

    ok thanks for that Paul, I've now installed Firebug. However, I discovered the code you were referring to was being generated by a plugin I no longer use so I have uninstalled the plug in but still can't center my images. When I view it in Firebug now I just get the standard code generated by importing an image in WordPress.

  28. Jojo
    Member
    Posted 1 year ago #

    I seem to have come across a little glitch :(

    When I view the site on my Mac in Firefox it looks great, but when I view it in other browsers the layout is all different. I know its very hard to get it exactly the same in all browsers but it would be great if I could at least get it similar.

    Here's how I want it to look as it displays in FireFox on the Mac
    Here's how it looks on Safari (and obviously when viewed on iPhone) with the two content boxes overlapping
    Here's how it looks in Firefox on Windows with a huge gap between the two boxes
    Here's how it looks in IE9 on Windows
    And here's the CSS again

    Does anyone have any suggestions please?

    Thanks

    Jo

Topic Closed

This topic has been closed to new replies.

About this Topic