Viewing 9 replies - 1 through 9 (of 9 total)
  • So on your site, you’re trying to change the background (which is grey now) to another colour say blue for example?

    Try this. Locate this piece of code in your stylesheet

    /* Structural */
    body {
    background: #CCC; /* url(images/pattern.gif) repeat */
    color: #323547;
    font-family: Verdana, sans-serif;
    font-size: 60%;
    }

    and change it to

    /* Structural */
    body {
    background: #06c;
    color: #323547;
    font-family: Verdana, sans-serif;
    font-size: 60%;
    }

    where #o6c is the new colour

    body {
    background: #CCC; /* url(images/pattern.gif) repeat */

    change the”#CCC;” to your hex color choice.

    Thread Starter dobie

    (@dobie)

    Thanks, I thought I tried that one and it did nothing. I went through and chaged almost every background color I thought, but after 2 responces with the same thing, I tried again. It’s been a long day. Thanks again guys…

    Hi there. I feel stupid even asking this, I’m a total newbie. I have the default theme, and I want to change the pale grey border around the white centre page to a dark blue. I can’t find the piece of code you refer to above:

    Body{
    background: #CCC; /* url(images/pattern.gif)
    etc

    The closest I get is to the code below. I also want to know where I find the code for the colour I want.

    /* Begin Structure */
    body {
    margin: 0;
    padding: 0;
    }

    #page {
    background-color: white;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }
    Thanks in advance for any help you can give me.

    Dobie- If the background is based on an image, for instance a .gif file that is set to “tile/repeat,” then instead of spending hours tweaking the CSS, you could simply try to alter the .gif itself in Photoshop or some other graphics program. The CSS reference could remain unchanged, as long as you don’t rename the new file.
    DB~

    It worked like a charm, I can’t thank you enough.

    Just to make it clear to other new users who are trying to make basic changes to newer versions of the default theme, specifically like changing the background color:

    As Michelle posted above, in the CSS you will only find this:

    /* Begin Structure */
    body {
    margin: 0;
    padding: 0;
    }
    #page {
    background-color: white;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;
    }

    This won’t help you one bit.
    What you need to change is this bit in the header.php file:



    /* To accomodate differing install paths of WordPress, images are referred only here,
    and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
    not, then go right ahead and delete the following lines, and the image files. */

    /*body { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); } */
    <?php /* Checks to see whether it needs a sidebar or not */ if ((! $withcomments) && (! is_single())) { ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbg.jpg") repeat-y top; border: none; }
    <?php } else { // No sidebar ?>
    #page { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
    <?php } ?>
    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
    #footer { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat bottom; border: none;}
    /* Because the template is slightly different, size-wise, with images, this needs to be set here
    If you don't want to use the template's images, you can also delete the following two lines. */

    #header { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
    #headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
    /* To ease the insertion of a personal header image, I have done it in such a way,
    that you simply drop in an image called 'personalheader.jpg' into your /images/
    directory. Dimensions should be at least 760px x 200px. Anything above that will
    get cropped off of the image. */
    /*
    #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}
    */

    It is pulling the image kubrickbgcolor.jpg to do the background color. You can take that out and then put in any normal background-color css style tag to get the desired color.

    Hope this helps!

    thank you, been searching for that a long time! ??

    “It is pulling the image kubrickbgcolor.jpg to do the background color. You can take that out and then put in any normal background-color css style tag to get the desired color.”

    Sorry, I need further clarification please. Do I just remove the top line containing the kubrickbgcolor.jpg info.? If so, what might I put in for black background and white text?

    Thanks for any advice..

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Background color…’ is closed to new replies.