1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS to Center Wordpress Theme

Discussion in 'CSS' started by jhmattern, Mar 14, 2007.

  1. #1
    I'm using the Gridlock theme for a new blog I'm going to soon be launching at www.FadMarketing.com - if you look at the theme on there now, it's all left-aligned with a gray block to the right. I'd like to get the theme centered if possible (or expandable would be fine... just don't want that space on the right).

    I tried following some basic css guides saying to set the left and right margins to auto, but that didn't work. I played with it for a while trying to make it expandable, by setting the header area to 100% and the main content area to auto so it would expand (at least I think that was right), but only the header actually expanded for me. :(

    It looks from the creator's page that centering this one gave a few others trouble too. Someone did it and posted an article about it, but that article doesn't seem to be available on their site anymore, and I can't find anything else to help me figure out what I'm missing. :(

    Has anyone worked with this theme before, and successfully gotten things to center? Any help would be appreciated. :)

    Jenn
     
    jhmattern, Mar 14, 2007 IP
  2. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It seems that that theme doesn't have a global/parent container which holds the rest of the site. So my suggestion is to create a new <div> inside the header template, and close it in the footer template.

    As for the CSS for this div, use any centering method you like, be it, text-align: center; or margin: 0 auto; or a combination of the two. You might also have to center the body in CSS for IE.
     
    crazybjörn, Mar 15, 2007 IP
    jhmattern likes this.
  3. jhmattern

    jhmattern Illustrious Member

    Messages:
    8,909
    Likes Received:
    794
    Best Answers:
    2
    Trophy Points:
    455
    #3
    I setup a new div called "page" and used both text-align: center; and margin: 0 auto; and added text-align: center; to the body. I placed the div tags in the header right after <body> and in the footer right before the closing body tag. Absolutely nothing changed on-site. :( Normally, it's not such a pain for me to simply center something, but this theme just isn't playing nicely. Any other thoughts?

    Jenn
     
    jhmattern, Mar 15, 2007 IP
  4. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I've been having ago at sorting this out and you are right its a bit of a pain in the rear.

    Anyway I came up with this here

    All I have added to the style sheet is the following 2 div id's - The wrap takes the place of your page id and the footer is their to show where the page ends.

    #wrap {
    border: 4px solid #333333;
    height: auto;
    width: 775px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-color: #FFFFFF;
    }
    #footer{
    clear: both;
    height: auto;
    width: 775px;
    font-size: 12px;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    border-top-width: thin;
    border-top-style: dotted;
    border-top-color: #999999;
    }


    I also removed the absolute positioning for your sidebar and main content which I think was giving you the problem (bits in bold removed)

    #sidebar {
    width: 220px;
    margin: 10px 0px 10px 0px;
    padding: 0 0 10px 0px;
    text-align: left;
    position: absolute;
    left: 550px;
    top: 122px;
    display: block;
    overflow: visible;

    }

    #main_content {
    width: 532px;
    margin: 10px 10px 0 8px;
    padding-right: 10px;
    border-right: 0px dotted #333;
    position: absolute;
    top: 122px;
    left: 0px;
    text-align: left;
    display: block;
    overflow: visible;

    }

    I tested it in Firefox, Netscape and Safari and it works fine. You might want to test it in IE (I don't have it) to make sure.

    Also play around with sizes and padding to get it to suit your purpose.

    I also think that starting with the default Wordpress theme might be an easier place to start. This theme looked way to over complicated to me.

    Anyway I hope this helps out :D
     
    Blame Me, Mar 15, 2007 IP
  5. jhmattern

    jhmattern Illustrious Member

    Messages:
    8,909
    Likes Received:
    794
    Best Answers:
    2
    Trophy Points:
    455
    #5
    I definitely don't want to start with the WP default theme. I run quite a few blogs on WP, and this was just a new issue that I hadn't not been able to solve before. ;) It's a great theme, but yes, a bit complicated.

    I really appreciate the help, and the time you took to look into it. I'll definitely give it a try and report back. :)

    Jenn
     
    jhmattern, Mar 15, 2007 IP
  6. jhmattern

    jhmattern Illustrious Member

    Messages:
    8,909
    Likes Received:
    794
    Best Answers:
    2
    Trophy Points:
    455
    #6
    Oh goodie. I spoke too soon. :( It was working great in both browsers before, and then when I checked again a bit later, the sidebar for both was floating way to the right. I used padding or margins to fix it in firefox, but on IE the whole sidebar is pushed all the way down to the bottom. :( Any tips on that?

    And now I've officially been playing with this theme too long, b/c I'm going to risk being late for a meeting. :D
     
    jhmattern, Mar 15, 2007 IP
  7. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I had another look at what you have done (looking good btw) and you have the closing "wrap" </div> tag in the wrong place, it should be the last div before the end </body> tag.

    It also looks like you padded out the sidebar a little to much (see below):

    #sidebar {
    width: 220px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    float: right;
    margin-right: 10px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 140px; << -- this is a little to much I think -- I made it 10px:
    padding-left: 0px;
    }

    Basically the sidebar was to big to fit the space when you changed the margin/padding so it moves below the left main content. Your basic page is 775 px wide your main content 520px wide (with padding and margins) leaving 255px for sidebar width, padding and margins, go over this and the sidebar will not fit.

    I also noticed that the sidebar moves to the lower right of the page when you open the actual post in its parent page (with comments box). The reason that it moves down the page is because (I think it might be this) the text-area for the comments is to large. Reduce the text-area so it is no more than 490pixels wide, this will make sure it fit inside the main content div and will not overlap into the sidebar area (see below).

    #comment {
    background-color: #eee;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #666;
    border: 1px solid #333;
    padding: 2px;
    width: 528px; <<-- change to 490px;
    }

    I've managed to test both pages (front page and comments page) in Firefox and IE 7 and they both work.

    Front Page
    Comments Page

    One tip I always use is place different color borders around the main page elements like header, navbar, page content, sidebars and footer to see where they all react to each other. If you have some thing to big it gives you a visual straight away - when happy remove borders.

    Well I hope this one works for you as its not a fun CSS script to work with :(
     
    Blame Me, Mar 15, 2007 IP
  8. jhmattern

    jhmattern Illustrious Member

    Messages:
    8,909
    Likes Received:
    794
    Best Answers:
    2
    Trophy Points:
    455
    #8
    The div thing, I had originally put before the closing body tag, but it came up as a validation error, which was corrected when I removed it. I'll put that back and see what happens. :)

    Oddly enough, it was when I used 10px that it looked perfect in both browsers. Then I didn't touch anything, was away from the computer for a bit, and when I came back and looked at the site, it was screwed up in both, which is why I went back to the 140, b/c it at least then looked right in Firefox.

    I just played with it a bit more, and I'll have to look at it again tomorrow with a fresh set of eyes. Thanks again for the help! :)
     
    jhmattern, Mar 15, 2007 IP
  9. WarpedMind

    WarpedMind Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Hello... first of all, GREAT thread! Thanks so much for it, as I'm trying myself to get this theme working for me. I'm not the expert that you two are... but can you please help me?

    My sidebar is now way to the left... and all my content seems to be outside of the wrap div, even though I ensured that it was within that div tag.

    Could you please look at it?

    Here's the link: http://www.kettlebell.com/index.php

    Thanks so much... any help in helping me get this thing looking good would be much appreciated. I'd also be very open to hearing any design suggestions (color, etc.)

    I hope you can help me. I don't know what to do and I don't want to screw up! (I'm good at that.) :)
     
    WarpedMind, Mar 19, 2007 IP
  10. Blame Me

    Blame Me Guest

    Messages:
    162
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #10
    PM sent sent just waiting to see if it works.

    :D
     
    Blame Me, Mar 20, 2007 IP
  11. WarpedMind

    WarpedMind Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Ugh. Sidebar is on the right now. And my colors are all messed up.
     
    WarpedMind, Mar 20, 2007 IP
  12. iluminatus

    iluminatus Well-Known Member

    Messages:
    357
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    128
    #12
    iluminatus, Apr 5, 2007 IP