Editing Width on Day Dream Theme

  • jcd87 · Member ·

    So I just upgraded my CSS so i can edit the Day Dream theme. I would like to expand the width of the main content of the page, but I’m having trouble to which width I need to adjust within the CSS. I also downloaded the Web Developer Toolbar for firefox and I can easily change the width when I go under style.css tab; all i do is change the 641 in here: wrapper{width:641 but when I try to change it in custom-css.php tab I can’t find the right width to change.

    The blog I need help with is: (visible only to logged in users)

  • devblog · Member ·

    I saw your code and I would recommend you reading this:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

    I can’t help you right now, but tomorrow I’ll see what I can do for you.

    Again, I strongly recommend you reading the article I posted above.

  • jcd87 · Member ·

    So I read the article and I understand what I did wrong, I copied and pasted the whole original style sheet to the CSS editor. I am still unsure what is the proper way to edit the CSS?

  • devblog · Member ·

    Like the article says, in the CSS editor you need to have your changes/additions to the CSS code only, because they will be added at the end of the original CSS file.

    As soon as I have a chance today, I’ll check what selectors you need to edit and post the code here. In the mean time, would you tell me how wide do you want your blog to be?

  • jcd87 · Member ·

    I’m sorry, but I still don’t understand, so I edit the CSS on “(view original stylesheet)” and then where do i paste the code I just changed? And I’m still unsure how wide I want my blog to be yet, I wanted to test out different sizes until I find one that I like. Would you be able to tell me which code to change so I can just mess around with the size change?

  • devblog · Member ·

    so I edit the CSS on “(view original stylesheet)”

    No. You don’t have to click on that link at all.

    where do i paste the code I just changed?

    In the textarea, where you originally pasted the whole CSS code, paste only this:

    #wrap {
clear: both;
overflow: hidden;
padding: 0 15px;
width: 700px;
}

#header, #nav, #sidebar, #content {
margin: 0 auto;
width: 100%;
clear: both; float: none; overflow: hidden;
}

#header {height: 165px;}

#sidebar {width: 670px;}

.clearfix:after{
display: none;
}

    That should widen your blog. Of course 700 pixels is a suggested value. You play with it till you find a width you like.

    Also, make sure the “#sidebar” selector has 30px less than whatever you set your “#wrap” selector to. For example, if you set the width of your #wrap to 700, then the #sidebar width should be 670px; if #wrpa’s with is 850px, then the #sidebar’s width should be 820px.

    You will have to set a new background image for your header as well since modifying the width of your theme will need you to modify the header image as well, otherwise it will look weird.

    BTW, I won’t be available till probably this weekend, so I hope these instructions were clear enough for you to follow.

  • jcd87 · Member ·

    hey thanks for the help, sorry for responding so late, my hard drive died on my old macbook pro and I just bought a new one two days ago.

    I understand the tips you told me and I will try to do the editing on my blog soon.

  • The topic ‘Editing Width on Day Dream Theme’ is closed to new replies.