WordPress.org

Ready to get started?Download WordPress

Forums

Coraline
[resolved] Website Border and Background Color (17 posts)

  1. Patrick Nommensen
    Member
    Posted 2 years ago #

    Hello,

    I'm new to this theme and I have a question about a website border and background color. As of right now if the background color is changed the entire area turns into that color. How do I go about changing just the background color without the content areas/header/footer et cetera?

    If that's possible I'd also like to add a border that can separate the background color from the white page/content color.

    Here is a link to the site where I'm developing the website: http://tinyurl.com/6pmtwa4

    I am using the 1.1 version of the theme, by the way.
    Many thanks!

    http://themes.trac.wordpress.org/ticket/5525

    http://wordpress.org/extend/themes/coraline/

  2. ChristiNi
    Member
    Posted 2 years ago #

    Hi pnommensen,

    Depending on what element you're changing the background color for, this is the expected behavior. For instance, the background color of <body> would control the background color for the entire page.

    I would recommend using Firefox with the Firebug extension to pinpoint which CSS element(s) you want to change. Once you've identified what elements you want to change, you can then make those changes in style.css. For instance, you may want to add a different background color and/or border to the content area of your site.

    Hope this helps!

  3. Patrick Nommensen
    Member
    Posted 2 years ago #

    Thanks for your response! How do I go about pinpointing the exact CSS element I would like to change? I found the body one. I'm not sure which one is associated with the actual background, like the sides of the website where there is nothing.

    body {
        background: none repeat scroll 0 0 #FFFFFF;
        color: #333333;
        line-height: 1;
    }
  4. ChristiNi
    Member
    Posted 2 years ago #

    Hello pnommensen,

    Firebug is probably the best tool for identifying elements on your page. I would also recommend reviewing the Codex for information on working with CSS:

    http://codex.wordpress.org/Finding_Your_CSS_Styles

    http://codex.wordpress.org/CSS

    I think the div you want to change the color for is either:

    <div id="content-box"> or <div id="content-container">

    The body background controls the background of the entire page. Think of it as the canvas on which everything else sits on top of. So, the body background controls not just the sides where there is no content, but also where the content sits. You may want to adjust the colors for both the body and the content area to get the look you want.

  5. Patrick Nommensen
    Member
    Posted 2 years ago #

    Thanks, that makes sense! I think I'll be able to figure this out.

    Is it possible to actually change the css in firebug and see what it did in like 'real time'?

  6. Patrick Nommensen
    Member
    Posted 2 years ago #

    So I figured out that it's easier to just change the color of the container to a white tone and then change the background color through the appearance-->background option.

    #container {
    	clear: both;
    	margin: 0 auto;
    	background: #FFFAFA;
    }

    How do I go about creating a little bit of space between the background color and the actual page? Is that referred to as padding or margin?

    Thanks for your help!

  7. Patrick Nommensen
    Member
    Posted 2 years ago #

    Figured it out!

    #container {
    	clear: both;
    	margin: auto;
    	background: #FFFAFA;
    	padding-right: 20px;
    	padding-left: 20px;
  8. ChristiNi
    Member
    Posted 2 years ago #

    Hi pnommensen,

    You're welcome! Glad to hear you got that sorted out. One more note, if you want, you can even add a border to your container using the border property.

    http://www.w3schools.com/css/css_border.asp

    To answer your previous question about Firebug, yes you can edit CSS in Firebug to try out code before actually editing your style sheet.

    Good luck and happy coding!

  9. Patrick Nommensen
    Member
    Posted 2 years ago #

    Thanks for sharing that link!

    Where do I enter this CSS?

  10. ChristiNi
    Member
    Posted 2 years ago #

    Hi pnommensen,

    You can enter that in the same place you've been making your other edits, your style.css file. You can simply add in the border property just like you did your padding if you want both padding and a border, or you can replace the padding with the border property if you like.

    Hope this helps!

  11. Patrick Nommensen
    Member
    Posted 2 years ago #

    Got it, thanks!

    #container {
    	clear: both;
    	margin: auto;
    	background: #FFFAFA;
    	padding-right: 20px;
    	padding-left: 20px;
    	border: 10px solid #AAAAAA;
  12. MinnieMouse25
    Member
    Posted 2 years ago #

    Hi there,

    This discussion is slowly helping. I hope that you can help me further!?
    I also wish to customize my theme (Mazine WordPress theme) to have a white/plain container box/page background that is different to my site image background.

    My style sheet css in >Appearance>editor has none of the above:

    body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #333333;
    line-height: 1;
    }
    AND
    #container {
    clear: both;
    margin: 0 auto;
    background: #FFFAFA;
    }

    Can I add these myself anywhere in the style sheet css in editor (won't this affect my site). I performed ctrl+F to find these in my editor but 0 results found... :(

    My site isn't online yet.

  13. @MinnieMouse25, could you please start your own topic? This one's months old and has been marked resolved.

    http://wordpress.org/tags/coraline?forum_id=5#postform

    Child theme modifications of Coraline is something that's been done before and I'm sure you'll get the help you need on your own thread.

  14. MinnieMouse25
    Member
    Posted 2 years ago #

    Hi there,
    Please could you tell me where I could start my own thread/topic?
    I appreciate that you let me know, thanks. I'm new to the forum.
    Many thanks!

  15. Andrew
    Forum Moderator
    Posted 2 years ago #

    Go to this page
    http://wordpress.org/support/forum/themes-and-templates

    Click on the button 'add new'

  16. MinnieMouse25
    Member
    Posted 2 years ago #

    Thanks a ton (:

  17. Please could you tell me where I could start my own thread/topic?

    Yes, I already did.

    http://wordpress.org/tags/coraline?forum_id=5#postform

    I appreciate that you let me know, thanks. I'm new to the forum.

    Welcome to the WordPress forum. You'll like it here as we're all volunteers and genuinely want to help you. :D

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags