WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Increase width of template (8 posts)

  1. TheGerm
    Member
    Posted 5 years ago #

    Hi,

    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 http://functionalfitnessblog.com

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

    How would i do this?

    Thanks.

  2. ClaytonJames
    Member
    Posted 5 years ago #

    have the content be 500px

    #main {
    width:619px !important;
    }

  3. chaoskaizer
    Member
    Posted 5 years ago #

    find in your theme's default.css

    #main {
    	width:619px !important;
    	width:618px;
    }

    replace it with

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

    next find

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

    replace it with

    #sidebar{
      background-color:#f7f7f7;
      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

    #container_body{
     /* the background vert line */
     background:#fff url(content_background.gif) repeat-y 500px 0px;
     border:solid 1px #B7B7B7 }
  4. TheGerm
    Member
    Posted 5 years ago #

    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;
    text-align:justify;
    width:750px;
    }

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

    #sidebar {
    float:left
    width:200px;
    height:100%;
    }

  5. chaoskaizer
    Member
    Posted 5 years ago #

    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.

  6. TheGerm
    Member
    Posted 5 years ago #

    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.

  7. chaoskaizer
    Member
    Posted 5 years ago #

    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">
    /*<![CDATA[*/
      #container_body{ background-position: 500px 0px }
      #main{ width: 480px !important }
      #sidebar{ float: left; width: 249px }
    /*]]>*/
    </style>
  8. TheGerm
    Member
    Posted 5 years ago #

    Thats exactly what i wanted.

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.