Change the color of the header!

  • Hello
    This should be simple. I have read the tutorials etc BUT
    I cannot work out how to change the color in the header of the imported free WP theme.
    There is nowhere within the style.css or header.php files to do so.
    Here is the code:

    <!– BEGIN html head –>
    <head profile=”https://gmpg.org/xfn/11″&gt;
    <meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
    <title><?php bloginfo(‘name’); ?> <?php wp_title(); ?></title>
    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/script.js”></script>
    <link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_url’); ?>” />
    <!–[if IE]><link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘template_url’); ?>/ie.css” /><![endif]–>
    <?php wp_head(); ?>
    </head>
    <!– END html head –>

    <body>
    <!– BEGIN wrapper –>
    <div id=”wrapper”>

    <!– BEGIN header –>
    <div id=”header”>

    <!– begin pages –>

    <!– end pages –>

    <h1>“><?php bloginfo(‘name’); ?></h1>

    <!– begin 468×60 buttons –>
    <div id=”ad468x60″ class=”ad”>
    <?php include(“ad468x60.php”); ?>
    </div>
    <!– end 468×60 buttons –>

    </div>
    <!– END header –>

    <!– BEGIN body –>
    <div id=”body”>

    <!– BEGIN content –>
    <div id=”content”>

    <!– begin categories –>
    <ul id=”categories”>
    <?php dp_list_categories(); ?>

    <!– end categories –>

    and the style.css:

    General comments/License Statement if any.
    .
    */

    * {
    margin: 0; padding: 0;
    }
    body {
    text-align: center;
    font: 12px Verdana;
    color: #282828;
    background: url(images/body.gif) repeat-x 0 0;
    }
    a {
    text-decoration: none;
    color: #282828;
    }
    a:hover {
    text-decoration: underline;
    }
    img {
    border: 0;
    }
    .break {
    font-size: 0;
    width: 0; height: 0;
    clear: both;
    }
    .alignleft {
    float: left;
    margin: 4px 10px 5px 0;
    }
    .alignright {
    float: right;
    margin: 4px 0 5px 10px;
    }
    .hidden {
    display: none;
    }
    .noimage img {
    display: none;
    }

    #wrapper {
    width: 980px;
    margin: auto auto;
    text-align: left;
    position: relative;
    }

    #rss {
    position: absolute;
    width: 54px; height: 69px;
    background: url(images/rss.jpg) no-repeat 0 0;
    top: 145px; left: 682px;
    }

    /** BEGIN header **/
    #header {
    height: 166px;
    }
    #header ul {
    list-style-type: none;
    }
    #header ul li {
    float: left;
    text-transform: uppercase;
    font-size: 0.9em;
    }
    #header ul li a {
    color: #aaaaaa;
    font-weight: bold;
    display: block;
    padding: 10px 10px 11px;
    }
    #header ul li a:hover {
    color: #ffffff;
    font-weight: bold;
    display: block;
    padding: 10px 10px 11px;
    background-color: # ;
    text-decoration: none;
    border-top: thin #ff9999 solid;
    border-left: thin #6a6a6a solid;
    border-right: thin #6a6a6a solid;
    }

    #header .ad {
    clear: both;
    padding-left: 500px;
    position: absolute;
    top: 70px;
    border: 0px;
    }
    #header .ad a {
    display: block;
    outline: none;
    width: 468px;
    height: 60px;
    }

    #header h1 {
    clear: both;
    padding-top: 25px;
    }
    #header h1 a {
    display: block;
    text-indent: -9999px;
    background: url(images/IMG2.gif) no-repeat 0 0;
    outline: none;
    width: 496px; height: 87px;
    }
    /** END header **/

    #body {
    background: url(images/wrapper.gif) repeat-y 660px 0;
    }

    /** BEGIN content **/
    #content {
    width: 662px;
    float: left;
    }
    #content #categories {
    list-style-type: none;
    height: 34px;
    }
    #content #categories li {
    float: left;
    font-size: 0.9em;
    padding-left: 1px;
    background: url(images/divider.gif) no-repeat 0 center;
    }
    #content #categories li.f {
    padding-left: 0;
    background: none;
    }
    #content #categories li a {
    display: block;
    padding: 10px;
    }
    #content #categories li a:hover {

    }
    #content .post {
    clear: both;
    padding: 20px 0 30px;
    border-bottom: 1px solid #D4D3CF;
    margin: 0 20px 0 10px;
    }
    #content .post img {
    border: 1px #282828 dotted;
    }

    #content .post .l {
    float: left;
    width: 220px;
    font-size: 0.8em;
    color: #808080;
    }
    #content .post .l p {
    margin-bottom: 5px;
    padding: 0 10px;
    }
    #content .post .l img {
    margin-bottom: 10px;
    width: 200px; height: auto;
    }
    #content .post .l a {
    color: #808080;
    }
    #content .post .r {
    float: right;
    width: 392px;
    padding-right: 20px;
    }
    #content .post h2 {
    font-size: 2em;
    margin-bottom: 15px;
    }
    #content .post h2 a {

    }
    #content .post p {
    margin-bottom: 15px;
    line-height: 1.5em;
    }
    #content .post .r .details {
    padding: 1px;
    border: 1px #6a6a6a dotted;
    float: right;
    }
    #content .post .r .details p {
    background: url(images/details_bg.gif) repeat-x 0 0;
    font-size: 0.8em;
    font-weight: bold;
    padding: 0 10px;
    margin: 0;
    height: 29px;
    }
    #content .post .r .details p a {
    display: block;
    float: left;
    padding: 7px 0 8px;
    margin-top: 1px;
    }
    #content .post .r .details p a.readmore {
    background: url(images/details_divide.gif) no-repeat right center;
    margin-right: 5px;
    padding-right: 8px;
    }
    /** END content **/

    /** BEGIN sidebar **/
    #sidebar {
    width: 318px;
    float: right;
    }
    #sidebar a:hover {
    color: #000000;
    }
    #sidebar #subscribe {
    background: url(images/navigation.gif) repeat-x 0 0;
    height: 34px;
    margin: 0 3px 10px 0;
    padding: 10px 0 0 88px;
    font-size: 0.9em;
    color: #6A6A6A;
    }
    #sidebar #subscribe a {
    font-weight: bold;
    color: #6A6A6A;
    }
    #sidebar #subscribe a:hover {
    color: #000000;
    }
    #sidebar #ad125x125 {
    text-align: center;
    }
    #sidebar #ad125x125 img {
    border: 0;
    margin: 5px;
    }
    #sidebar .box {
    background: url(images/horizontal.gif) repeat-x 0 bottom;
    margin-right: 3px;
    padding: 10px 15px;
    }
    #sidebar .box form {
    width: 283px; height: 30px;
    background: url(images/search.gif) no-repeat 0 0;
    }
    #sidebar .box form input {
    border: 1px solid #ffffff;
    margin: 6px;
    float: left;
    width: 207px;
    }
    #sidebar .box form button {
    float: left;
    width: 57px; height: 30px;
    text-indent: -9999px;
    border: 0;
    margin-left: 5px;
    background-color: transparent;
    cursor: pointer;
    }
    #sidebar .box h2 {
    font-size: 0.9em;
    text-transform: uppercase;
    }
    #sidebar .box h2 {
    background-color: #282828;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    margin: 0 1px;
    }

    #sidebar .box ul {
    list-style-type: none;
    padding: 0px;
    margin: 0 1px;
    }
    #sidebar .box ul li {
    font-size: 0.9em;
    padding: 5px 0;
    background-color: #ffffff;
    padding: 8px 10px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #D4D3CF;
    }
    #sidebar .box ul li:hover {
    background-color: #D4D3CF;
    padding: 8px 10px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #D4D3CF;
    }

    #sidebar .l {
    width: 159px;
    float: left;
    padding-top: 10px;
    }
    #sidebar .l h2 {
    background-color: #282828;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    margin: 0 4px;
    }
    #sidebar .l ul {
    list-style-type: none;
    margin: 0 2px 10px 4px;
    }
    #sidebar .l ul li {
    background-color: #ffffff;
    padding: 8px 10px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #D4D3CF;
    }
    #sidebar .l ul li:hover {
    background-color: #D4D3CF;
    padding: 8px 10px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #D4D3CF;
    }

    #sidebar .r {
    width: 159px;
    float: left;
    padding-top: 10px;
    }
    #sidebar .r h2 {
    background-color: #282828;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    margin: 0 8px 0 2px;
    }
    #sidebar .r ul {
    list-style-type: none;
    margin: 0 8px 10px 2px;
    }
    #sidebar .r ul li {
    background-color: #ffffff;
    padding: 8px 10px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #D4D3CF;
    }
    #sidebar .r ul li:hover {
    background-color: #D4D3CF;
    padding: 8px 10px;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: #D4D3CF;
    }

    /** END sidebar **/

    /** BEGIN footer **/
    #footer {
    background: #282828 url(images/footer.gif) repeat-x 0 0;
    color: #6A6A6A;
    clear: both;
    font-size: 0.8em;
    padding: 30px 0;
    }
    #footer div {
    width: 980px;
    margin: auto auto;
    text-align: left;
    }
    #footer p {
    margin-bottom: 10px;
    padding-left: 30px;
    }
    #footer a {
    color: #6A6A6A;
    }
    #footer a:hover {
    color: #ffffff;
    }
    /** END footer **/

    /** BEGIN misc **/
    #postnav {
    padding: 20px;
    }
    #content .post h3 {
    margin-bottom: 5px;
    }
    #content .post ul {
    padding-left: 15px;
    margin-bottom: 10px;
    }
    #content .post ul li {
    padding: 2px 0;
    }
    #content .post ol {
    padding-left: 20px;
    margin-bottom: 10px;
    }
    #content .post ol li {
    padding: 2px 0;
    }
    #content .post blockquote {
    padding-left: 10px;
    border-left: 2px solid #e0e0e0;
    font-style: italic;
    margin-left: 2px;
    }
    #comments {
    padding: 0 20px 10px 10px;
    }
    #comments h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
    padding-top: 25px;
    margin-bottom: 20px;
    }
    #comments p {
    margin-bottom: 10px;
    line-height: 1.5em;
    }
    #comments form p {
    margin-bottom: 5px;
    }
    .commentdetails {
    margin-top: 25px;
    }
    .commentauthor {
    margin-bottom: 5px !important;
    font-weight: bold;
    }
    .commentdate {
    font-size: 0.8em;
    margin-bottom: 5px;
    color: #909090;
    }
    .required {
    color: #ff0000;
    }
    .sdetails {
    clear: both;
    font-size: 0.8em;
    padding-top: 20px;
    }
    .sdetails p {
    margin-bottom: 5px !important;
    color: #909090;
    }
    .sdetails a {
    color: #909090;
    }
    .sdetails a:hover {
    color: #282828;
    }
    /** END misc **/

    Please help!!

Viewing 1 replies (of 1 total)

  • The CSS for #header is in the CSS code you posted and is what you’ll want to change or add to:

    /** BEGIN header **/
#header {
height: 166px;
}
#header ul {
list-style-type: none;
}
#header ul li {
float: left;
text-transform: uppercase;
font-size: 0.9em;
}
#header ul li a {
color: #aaaaaa;
font-weight: bold;
display: block;
padding: 10px 10px 11px;
}
#header ul li a:hover {
color: #ffffff;
font-weight: bold;
display: block;
padding: 10px 10px 11px;
background-color: # ;
text-decoration: none;
border-top: thin #ff9999 solid;
border-left: thin #6a6a6a solid;
border-right: thin #6a6a6a solid;
}

#header .ad {
clear: both;
padding-left: 500px;
position: absolute;
top: 70px;
border: 0px;
}
#header .ad a {
display: block;
outline: none;
width: 468px;
height: 60px;
}

#header h1 {
clear: both;
padding-top: 25px;
}
#header h1 a {
display: block;
text-indent: -9999px;
background: url(images/IMG2.gif) no-repeat 0 0;
outline: none;
width: 496px; height: 87px;
}
/** END header **/

    What exactly do you want to change?

Viewing 1 replies (of 1 total)
  • The topic ‘Change the color of the header!’ is closed to new replies.