stretch header across screen – vigilance theme

  • wrongallover

    (@wrongallover)


    16 years ago

    Hi there,

    I’m working with the vigilance theme. I would like to customize my header to it stretches across the entire screen, kinda like this: https://changecamp.ca/

    My site: https://www.elaishastokes.com

    code:
    /*Body & Links
    ———————————————————— */
    body {
    font-size: 62.5%;
    font-family: Georgia, “Times New Roman”, Times, Serif;
    line-height: 2.2em;
    color: #333;
    }
    a:link, a:visited { color: #772124; }
    .entry a:link, .entry a:visited { font-weight: bold; }
    a:hover {
    text-decoration: underline;
    color: #58181b;
    }
    /*Basic Structure
    ———————————————————— */
    #wrapper{
    width: 920px;
    margin: 0 auto;
    text-align: left;
    }
    #content{
    float: left;
    width: 600px;
    padding: 20px 20px 20px 0;
    }
    #sidebar {
    float: right;
    width: 300px;
    padding-bottom: 20px;
    }
    .thin-sidebar {
    float: left;
    width: 140px;
    }
    .spad { padding-right: 20px; }
    #footer {
    clear: both;
    padding-top: 5px;
    border-top: 1px solid #ddd;
    }
    .clear:after, li.comment:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
    /*Header
    ———————————————————— */
    #header {
    padding: 20px 0 10px 0;
    border-bottom: 5px solid #333;
    }
    h1#title, div#title {
    font-size: 4.6em;
    font-weight: bold;
    line-height: 1.3em;
    }
    h1#title a:link, h1#title a:visited, div#title a:link, div#title a:visited { color: #444; }
    h1#title a:hover, div#title a:hover { color: #772124; text-decoration: none; }
    /*Description
    —————————————*/
    #description {
    float: left;
    }
    #description h2 {
    font-size: 1.2em;
    font-weight: normal;
    color: #666;
    }
    /*Nav
    —————————————*/
    #nav {
    float: right;
    font-size: 1.5em;
    font-family: “Trebuchet MS”, “Lucida Grande”, “Lucida Sans”, Verdana, Arial, sans-serif;
    }
    #nav ul {
    padding: 0 0 0 20px;
    list-style: none;
    position: relative;
    }
    #nav ul li {
    display: inline;
    margin: 0 0 0 15px;
    }
    #nav .page_item a:link, #nav .page_item a:visited {
    color: #333;
    text-decoration: none;
    }
    #nav .page_item a:hover {
    color: #772124;
    text-decoration: none;
    padding-top: .1em;
    border-top: 4px solid #772124;
    }
    #nav .current_page_item a:link, #nav .current_page_item a:visited, #nav .current_page_item a:hover, #nav .current_page_parent a:link, #nav .current_page_parent a:visited, #nav .current_page_parent a:hover, #nav .current_page_ancestor a:link, #nav .current_page_ancestor a:visited, #nav .current_page_ancestor a:hover {
    color: #772124;
    text-decoration: none;
    padding-top: .1em;
    border-top: 4px solid #772124;
    }

    Any help would be most appreciated
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • tugbucket

    (@tugbucket)

    Where you have your header with the yellow background and the bottom border, turn that off. make an image that looks like that. Then your CSS:

    body {
font-size: 62.5%;
font-family: Georgia, "Times New Roman", Times, Serif;
line-height: 2.2em;
color: #333;
background: #fff url(yourimage.jpg) top left repeat-x;
}
    t31os

    (@t31os)

    The header is nested inside a wrapper (#wrapper in your stylesheet), you need to extend the width of the wrapper or take the header out of the wrapper which will keep your content a set width…

    The header will not stretch as long as the wrapper remains a set width or until it is sat outside the wrapper..

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘stretch header across screen – vigilance theme’ is closed to new replies.