Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Background color and width change for ABSOLUTE Beginner...

  1. sangjinleeca
    Member

    Guys.. I have zero idea about css editing.
    I've just purchased the custom design upgrade and I want to change two things in my Manifest theme.
    I want to change my background color to black, and I want my width to be 600 instead of 500

    And yes, I don't even know what to copy/paste on the blank editing window...

    While I was trying out, I typed things like;

    #site-wrapper {
    margin:0 auto;
    padding-top:15px;
    width:600px; <= this is what I changed...
    text-align:center;
    position:relative;
    }

    I mean.. Is this how you edit CSS?

    The width looked okay on the preview but it wouldn't load up on the real website after I've saved the work. Very strange.. And the background color, I just gave up....

    Honestly, I just don't know what I'm doing guys... Some help would be greatly appreciated..

    Thanks!!

    Sang

    The blog I need help with is sangtv.net.

  2. timethief
    Member

    Do these help?
    http://en.forums.wordpress.com/topic/adding-a-middle-background?replies=4
    http://en.forums.wordpress.com/topic/columns-width-in-manifest-theme?replies=4#post-708789

  3. designsimply
    Staff

    Welcome!

    When you copy and paste CSS, note that you only need to copy the rules that you're updated and not the whole CSS block or the whole original stylesheet. To update the width, you'll want to do a few things.

    First, open the original stylesheet for Manifest and find all of the rules that use 500px:
    https://s1-ssl.wordpress.com/wp-content/themes/pub/manifest/style.css?m=1330498364g&minify=false

    Use the selector, the first part before the { curly bracket, from everything you found and add a width rule to update it from 500px to 600px. Like this:

    #site-wrapper,
#main-nav ul ul,
#core-content,
#comments h3,
legend span,
#footer,
.footer-content {
	width: 600px;
}

    Note that this will not change the width of the header image. You can try stretching it, but doing that may make the image look pixelated or blurry. Here's an example if you'd like to try it:

    #header-image a img {
	width: 100%;
}

    Or if you want to completely swap out the header image with a new one, upload a properly sized image to your media library and post a link back here and I can help you with some CSS to manually replace the built in header image.

  4. designsimply
    Staff

    Here's one way to change the background color to black:

    body, #main-nav, h5, h5 abbr {
	background: #000;
	border: none;
}

    Does that look close to what you wanted to do? Note that you might want to also adjust some of the text colors if you do that. If you need help with that or anything else, please post again here.

  5. sangjinleeca
    Member

    Hey, thanks for your help.

    You know, the funny thing is, I can see the changes in the website on the preview window, but when I save the stylesheet and reload my site from the browser, the changes have disappeared and it's back to default Manifest theme. Am I missing something out here?

    Anyways lots of thanks and I think we're getting somewhere!

    Warmest regards,
    Sang

  6. designsimply
    Staff

    I can see the changes working at http://sangtv.net/ and on your Appearance → Custom Design → CSS page as well. Are you still having trouble if you try refreshing those pages?

  7. sangjinleeca
    Member

    Hey designsimply, cheers for the reply.
    Still totally lost. I deleted cookie from my browser and still no change, downloaded firefox and opened it there and still no change.
    the width is till 500 on my browser......

    I really dont know what I'm doing wrong eh..

  8. sangjinleeca
    Member

    do i have to check on "replace everything with my own css"?
    no, right?

  9. designsimply
    Staff

    Nope, you don't need to check "replace everything with my own CSS" unless you take the time to entirely rewrite all of the CSS for the theme.

    Here is a screenshot of your theme I took while highlighting the date for one of the posts using Chrome's built in browser tools. You can see that the highlighted area is 600px wide: http://cl.ly/GiYn/o

    The header image is still 500px because you never added CSS to change that. Are you perhaps looking at the header image instead of the content area when you say you can't see any change in the width?

    Here is an example for changing the header width which I posted earlier in case it helps:

    Note that this will not change the width of the header image. You can try stretching it, but doing that may make the image look pixelated or blurry. Here's an example if you'd like to try it:

    #header-image a img {
	width: 100%;
}

    An alternative would be to manually replace the header image with one that you upload to your media library instead. If you need help with that, please reply back with a link for an image you have sized and uploaded to your media library.

  10. sangjinleeca
    Member

    Hey hey,

    The header is 500 coz I didn't change the image.

    I can see the content and the little lines that divide the posts get stretched out to 600 when I changed the settings, but still only in preview mode!! I really don't know what's going with that........

    Wow, I just checked with my friend in California, and on her screen it appears to be black..... Really weird... I suppose I'll just have to work on preview mode and assume it's going out in black....

    Hey.... Is there a way to reset the theme back to the default manifest?
    There were few instructions saying I need to rename the theme file but I don't understand what that means....

    Thanks heaps. I really appreciate your help!

    ps. you really are a happiness engineer :0)

  11. raincoaster
    Member

    You can set it back to the original and strip out all the changes you've made by stripping all the code out of the edit CSS window and clicking "add to existing HTML".

  12. sangjinleeca
    Member

    what a great idea. so simple!

    thanks mate!

  13. raincoaster
    Member

    You're welcome. We generally don't recommend that newbies start editing their CSS right away, but you seem to have made a good start. Try reviewing the tutorials at the head of the CSS forum and changing just one thing at a time. Then, when you get stuck, post in the CSS forum for help. It's easier if you know you have a solid base to build on.

  14. sangjinleeca
    Member

    Thanks mate. I suddenly feel peaceful about it.

    Cheers.

  15. designsimply
    Staff

    I saw the black background as well. It was black because you had added the following rule to your Appearance → Custom Design → CSS page:

    body,#main-nav,h5,h5 abbr {
	background:#000;
	border:none;
}

    Because "body" is in that list, it turned the entire block background black before.

    If you're interested in giving CSS another shot, try checking out this tutorial as a good starting point:
    http://www.htmldog.com/guides/cssbeginner/

  16. sangjinleeca
    Member

    Hi designsimply,

    Thanks for all the help on this topic. I really appreciate your followups and everything.

    Thanks again and maybe I'll ask more questions in the future.

    Warmest regards,
    Sang

  17. designsimply
    Staff

    I'd love to see that. Cheers. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags