WordPress.org

Ready to get started?Download WordPress

Forums

changing whole theme width (10 posts)

  1. aaronws
    Member
    Posted 9 years ago #

    All of my other pages are based on the width of my header image, which is 965px. I have messed with the CSS file a little bit, but I truly have no idea what I am doing.

    Any idea how to fix this:
    http://www.weblog.scribs.info/

    I know some widths have to be changed in the style.css file, but I have played with it and have no idea which ones. I added 200px to the width of the main column, but the side colums did not move over as expected. I also expanded the background images to the respective 965px to match the header.

  2. Michael Bishop

    Posted 9 years ago #

    I'm sure someone who's better learned in CSS will follow up, but it appears that you have this div
    .narrowcolumn {
    float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 650px;
    }
    which is superseding the 965 that you want. Perhaps try changing that and see if you get want you are looking for.

  3. moshu
    Member
    Posted 9 years ago #

    It ain't that easy... especially with the Deafult theme.
    If you want a wide(r) theme look around and choose one that fits your needs, and try to tweak that one.

  4. aaronws
    Member
    Posted 9 years ago #

    Just curious, what is the difference between downloading a theme and modifying it and modifying the default theme?

    Ok, so I snagged a theme that looks cool and there is the CSS. What am I to modify to make this thing 965px wide throughout?

    /*
    Theme Name: Amsterdam Nights
    Theme URI: http://www.rollsroick.de/
    Description: You can have it here and now. Your Blog in the look and feel of a warm summernight in Amsterdam.
    Author: Oliver Roick
    Author URI: http://www.rollsroick.de/
    Version: 1.5

    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php

    */

    /* Da Basics */

    body {
    background-color: #141C29;
    font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    }

    a, a:visited, a:link {
    color: #2E60A9;
    }

    a:hover {
    text-decoration: none;
    background-color: #FFF7D1;
    }

    a:active {
    background-color: #FFF7D1;
    }

    input, textarea {
    background-color: #FFF7D1;
    }

    input:focus, textarea:focus {
    background-color: #FFF;
    }

    #wrapper {
    background-color: #2D5FA8;
    background-image: url(images/bg_main.png);
    background-repeat: repeat-y;
    margin: 20px auto;
    width: 650px;
    }

    /* Header */

    #head {
    height: 273px;
    width: 650px;
    background-image: url(images/bg_head.png);
    }

    #head div#blog_title {
    font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    color: #FCFFF7;
    position: relative;
    top: 170px;
    left: 30px;
    }

    #head div#blog_title a {
    color: #FCFFF7;
    text-decoration: none;
    }

    #head div#blog_title a:hover {
    background-color: transparent;
    }

    /*Main Content*/

    #main {
    width: 425px;
    float: left;
    color: #141C29;
    }

    #main h1, #main h2 {
    margin: 0 20px 5px 47px;
    font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 2.0em;
    font-weight: normal;
    color: #2E60A9;
    }

    #main h2 {
    font-size: 1.5em;
    }

    #main h1 a, #main h2 a {
    text-decoration: none;
    }

    #main p, #main div.navigation, #main ul, #main div.post_info, #main div.date, #main #searchform {
    margin: 0 20px 15px 50px;
    text-align: justify;
    line-height: 1.4em;
    }

    #main div.navigation {
    clear: both;
    }

    .left {
    text-align: left;
    }

    .right {
    text-align: right;
    }

    #main div.post_info {
    border-top: 1px dotted #141C29;
    }

    #main div.date {
    margin-bottom: 0px;
    }

    /* Sidebar */

    #sidebar {
    float: left;
    width: 220px;
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    background-image: url(images/bg_sidebar_main.png);
    background-repeat: repeat-y;
    }

    #sidebar h4 {
    background-image: url(images/bg_sidebar_head.png);
    background-repeat: no-repeat;
    background-color: transparent;
    font-size: 1.3em;
    font-weight: normal;
    font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 25px 0 14px 20px;
    }

    #sidebar ul {
    margin: 0;
    padding: 0 0 40px 0;
    list-style: none;
    background-image: url(images/bg_sidebar_footer.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    }

    #sidebar ul li {
    background: transparent;
    padding: 0 0 3px 30px;
    }

    /*Footer*/

    #footer {
    width: 650px;
    background-image: url(images/bg_footer.png);
    background-repeat: no-repeat;
    background-color: #2D5FA8;
    clear: both;
    padding-top: 50px;
    padding-bottom: 30px;
    color: #FCFFF7;
    }

    #footer p {
    margin: 0 50px;
    font-size: 0.8em;
    line-height: 1.5em;
    }

    #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
    color: #FCFFF7;
    background: transparent;
    }

    /* Comment Styles */

    #commentform {
    margin-bottom: 40px;
    }

    #commentform input, #commentform textarea {
    width: 305px;
    margin: 0 20px;
    padding: 3px;
    color: #141C29;
    font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    line-height: 1.4em;
    }

    #commentform input[type=submit] {
    width: 13em;
    float: right;
    }

    #commentform label {
    display: block;
    padding-bottom: 3px;
    }

    #commentlist {
    margin: 0;
    padding: 0;
    margin: 0 20px 15px 50px;
    line-height: 1.4em;
    list-style-type: none;
    }

    #commentlist li {
    padding: 0;
    margin: 0 0 30px 0;
    }

    #commentlist li p {
    padding: 0;
    margin: 0 3px 10px 3px;
    }

    #commentlist cite {
    display: block;
    background-color: #FFF7D1;
    padding: 3px;
    font-style: normal;
    font-weight: bold;
    margin-bottom: 3px;
    }

    #searchform input[type=submit] {
    margin-top: 2px;
    }

    /*Comments Popup*/

    #comments_popup {
    background-color: #FCFFF7;
    font-family: "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    }

    #comments_popup h1#header {
    background-color: #2D5FA8;
    margin: 0 0 20px 0;
    padding: 10px;
    font-family: "Trebuchet MS", "Tahoma", Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    color: #FCFFF7;
    }

    #comments_popup h1#header a {
    color: #FCFFF7;
    text-decoration: none;
    }

    #comments_popup h1#header a:hover {
    background-color: transparent;
    }

    #comments_popup #main {
    width: 100%;
    }

    #comments_popup #main p, #comments_popup #main h2, #comments_popup #main #commentlist {
    margin: 0 10px 15px 10px;
    padding: 0;
    }

    #comments_popup #footer {
    background-color: #2D5FA8;
    background-image: none;
    width: 100%;
    padding: 10px 0;
    }

  5. moshu
    Member
    Posted 9 years ago #

    First lesson :)
    Do not paste here such a long code. It's difficult to see it here. Instead you can use this site http://pastebin.com/ and paste it there, then come back and post the URI.

    2nd. It's not that simple as "modifying" one number and the theme will look as you wish.
    As for your question: modifying the Default seems to be quite difficult for beginners...

  6. vkaryl
    Member
    Posted 9 years ago #

    Try starting here, in the Codex: this section is a CSS reference for WP, should help you figure out where to start tweaking.

  7. aaronws
    Member
    Posted 9 years ago #

    cool, lesson learned =)

    ah wow, never even knew about pastebin, that is awesome. I am into other development and never really had a taste or patience for web development and do not know the first thing about desinging CSS sheets. I would prefer to code in C than mess with HTML. The names in the CSS make logical sense, but how everything fits together, I am little lost and do not have time to sit down and learn it.

  8. moshu
    Member
    Posted 9 years ago #

    Then you'll probably have to find somebody to customize your theme. Some might volunteer for that, others may charge a fee... YMMV

  9. metabold
    Member
    Posted 9 years ago #

    The first thing to do would be to change the width from 650px to 965px.

    Then your main column is the wider "content" column.

    and your "narrowcolumn" is your right hand column with the links in it.

    So now raise the width or either the "content" left hand colum to use the remaining spacce minus the right hand nav or increase both.

    Obviuosly your graphic will force the width. But it will be hard to control layout if you don't update the style sheets widths to match.

  10. aaronws
    Member
    Posted 9 years ago #

    ok, so I went the easiest route on this one. I found a theme with a width of 800 and I just reduced the size of my graphics. I spent a few hours playing with the CSS and 30 seconds resizing graphics, I can live with the 800 width for saving that much time.

    When I have more time, I will try the suggestions listed.

    Thank you for your time to all of those that replied.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags