Support » Themes and Templates » Increase width of template

  • Resolved TheGerm



    I am trying to edit a theme’s css so that the content is in a container box of 750 px wide and have the content be 500px and the side bar making up the rest of the space.

    My site is

    As you can see the sidebar is squashed on the right. I havent been able to extend it.

    How would i do this?


Viewing 7 replies - 1 through 7 (of 7 total)
  • have the content be 500px

    #main {
    width:619px !important;

    find in your theme’s default.css

    #main {
    	width:619px !important;

    replace it with

    #main{ width: 480px /* + 20px padding */ }

    next find

    #sidebar {
    	border-left:1px solid #DDDDDD;

    replace it with

      border-left:1px solid #ddd;
      float: left;
      width: 249px /* + 1px border-left */ }

    lastly find

    #container_body {
    	background:#fff url(content_background.gif) repeat-y top right;
    	border:solid 1px #B7B7B7;

    replace it with

     /* the background vert line */
     background:#fff url(content_background.gif) repeat-y 500px 0px;
     border:solid 1px #B7B7B7 }

    Those suggestions didnt solve the problem :S

    Anyway here is what I currently have for the container body, main and sidebar.

    #container_body {
    margin:11px auto;

    #main {
    width:619px !important;
    padding:5px 10px 0;

    #sidebar {

    I tested it online, did u actually try?

    Anyway, here some maths from your CSS ↑ and what is wrong with it.

    #container_body = 750px
    #main = 619px + 20px
    #sidebar = 200px
    #main + #sidebar = 839px

    Obviously the content is larger than the wrapper (#container_body). You’ll either need too increase the wrapper width (839px) or reduce some of the content div (#main, #sidebar or both) width so it will fit inside the container.

    I did try, but that was in styles.css which is different thing to the default.css which i dont know how to access. By replacing all the things you suggested it changed the front page completely.

    I posted the css that i have been dealing with on my blog as a new post. I’d much appreciate it if you would have a look. Oh and i fixed up the things you mentioned in the last post.

    Thanks for the help.

    The default.css is inside your themes’s subfolder so it not editable/viewable on WP theme editor.

    But you can used internal-embed styles to overwrite the default.css, edit your theme’s header.php. Add the below code before the closing head tag (</head>).

    <style type="text/css">
      #container_body{ background-position: 500px 0px }
      #main{ width: 480px !important }
      #sidebar{ float: left; width: 249px }

    Thats exactly what i wanted.

    Thank You for your help. It’s very much appreciated.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Increase width of template’ is closed to new replies.