Support » Theme: Esquire » Part of theme not centering

  • Resolved sirhunna



    I was looking into centering my theme so on bigger screens than mine there wasn’t a huge blank space to the right. I know how to do this in the CSS, but the black line that runs along the y-axis, where the dates are attached to does not move when I stretch the page out as it centers, stays right where it is. Fixed.

    I found it in the style.css and it’s in the body tag under the theme section as:

    background: #fff url(img/bg.png) repeat-y 0 0;

    I was under the impression I knew what all that meant and wondered why the bar was sticking to the same spot.

    To make it centered, i just added, a width of 1200 and margin: 0 auto right above where the background image is in the CSS and it everything worked perfectly except the black line stayed put.

    the site is

    currently it’s where it originally was, all of it pushed left. It just looks weird and I didn’t want to leave it like that, though I could change it if someone wanted to see exactly what I meant. Any help appreciated. Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn


    Automattic Happiness Engineer

    Hi sirhunna, did you still need any help with this? Just let me know and I’ll have a look. Thanks!

    I do!

    Honestly, I haven’t looked at it much since I posted this. I try not to post questions until I exhaust every option and that is where I was.

    I can get everything but that dang black vertical line to center and I couldn’t figure out why. grrrrrrr:)


    Moderator Kathryn


    Automattic Happiness Engineer

    Hi there, the way I was able to get the vertical black line to be in the right place is by adding the following CSS:

    body {
    	background-image: none;
    #wrapper {
    	width: 1200px;
    	margin: 0 auto;
    	background: #fff url(http://your-site/wp-content/themes/esquire/img/bg.png) repeat-y 0 0;

    Adjust “your-site” accordingly.

    You’ll need to add a new wrapper div in whatever files you’re using, including at least index.php.

    I added

    <div id="wrapper">

    just above

    <div id="posts">

    and its corresponding closing


    just above

    <?php get_footer(); ?>

    You can repeat this process in any of the relevant template files you’re using, such as archive.php

    Let me know it goes!

    Just a heads-up that the best way to make changes to a theme is to use a child theme, so your tweaks won’t be overwritten when updating the theme. Here are some guides in case you haven’t made one before:

    So this worked!!! almost lol….

    I had to moved around that <div id="wrapper"> to a higher place to include the yellow sidebar but that was easy.

    The only issue is that the link to my design portfolio and email address that floats towards the bottom left won’t adhere to the width. And I know it’s because it has a position: fixed attached to the div. I figured out how to have it hang out at the bottom and move around within the width but I want to have it fixed to that area so it is visible at all times.

    That link/email in under <div id="credit"> which is of course is included in the <div id="wrapper">, though that obviously didn’t do it. I thought if including a width within #credit as well, but above the position: fixed, that that would do it, but no dice.

    Check it out now and widen the page, you will see what I mean.

    Like I said, I want it fixed flush underneath the yellow sidebar but always appear right at the bottom of anyone’s page, hovering as they scroll down.

    Either way, thanks for all your help:)

    I figured it out!

    I moved the <div id="credit"> up in the footer.php and I guess that then included it properly into the wrapper.

    Thanks SO much for your help:)

    Moderator Kathryn


    Automattic Happiness Engineer

    Glad you got this working as you wanted – it looks great!

    Thanks for sharing what you did – it may help others on an Esquire centering adventure in the future. 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Part of theme not centering’ is closed to new replies.