editing css – how to figure out new width?

  • Unknown's avatar
    weirdscience · Member ·

    my current theme has a header image of 720 px, i believe but i’ve mucked about with so many css settings to widen it somewhat. i now have no idea what all the collective changes i’ve made are equivalent to for the header image. i need to know so i can redo the image in the appropriate width to upload. here’s what i have in my css box (i haven’t upgraded yet so you won’t see any of it on my site)…and please note that there might be some odd looking commands in there but it’s only b/c of my novice playing around with css..hehe.

    a:link {
    color:#7D9EC0;
    font-style:bold;
    text-decoration:none;
    border-bottom:none;
    }

    a:hover {
    color:#68f;
    font-style:bold;
    text-decoration:none;
    border-bottom:none;
    }

    a:visited {
    color:#7D9EC0;
    text-decoration:none;
    border-bottom:none;
    outline:none;
    }

    #wrapper {
    width:800px;
    overflow:hidden;
    background:url(‘images/bg_1.jpg’) no-repeat #fff;
    border:5px solid #eef;
    text-align:left;
    margin:2px auto;
    padding:0;
    }

    #content {
    width:460px;
    float:left;
    font-size:1.2em;
    overflow:hidden;
    border-left:30px solid #fff;
    border-right:1px solid #7D9EC0;
    margin-top:20px;
    margin-bottom:20px;
    padding:4px 20px 4px 0;
    }

    h1,h2,h3,h4,h5,h6 {
    font-size:1.7em;
    font-weight:normal;
    border-bottom:1px solid #7D9EC0;
    }

    #sidebar {
    width:230px;
    float:right;
    line-height:1.5em;
    overflow:hidden;
    border-right:30px solid #fff;
    margin:0 0 16px;
    }

    #sidebar h2 {
    clear:both;
    font-size:1.4em;
    border:none;
    padding:16px 0 4px;
    }

    #content .info {
    color:#7D9EC0;
    font-size:1em;
    font-style:normal;
    border-top:none;
    border-bottom:none;
    display:block;
    padding:4px 0;
    }

    #content .info a {
    color:#7D9EC0;
    }

    #content h2 em {
    font-size:0.7em;
    color:#7D9EC0;
    font-style:normal;
    margin:0 0 0 1em;
    }

    ul#nav {
    position:absolute;
    bottom:0;
    left:0;
    list-style-type:none;
    margin:0;
    }

    ul#nav li {
    list-style-type:none;
    float:left;
    margin:0;
    }

    ul#nav li a {
    color:#024;
    text-transform:none;
    background:#eef;
    display:block;
    width:165px;
    text-align:center;
    border:none;
    outline:none;
    text-decoration:none;
    table-layout:fixed;
    font-size:12px;
    font-style:bold;
    white-space:nowrap;
    padding:8px 17.4px;
    }

    ul#nav li a:hover {
    color:#68f;
    background:#eef;
    text-decoration:none;
    border:none;
    }

    ul#nav li a:visited {
    outline:none;
    text-decoration:none;
    border:none;
    }

    #header {
    display:block;
    height:160px;
    color:#fff;
    position:relative;
    text-align:right;
    border-bottom:5px solid #fc0;
    margin:0 auto;
    }

    .white ul#nav li.current_page_item a {
    color:#024;
    font-style:bold;
    background:#eef;
    }

    .white ul#nav li.current_page_item a:hover {
    color:#68f;
    background:#eef;
    }

    body {
    font-size:0.625em;
    text-align:center;
    background:url(‘images/bg_body.gif’) repeat-x top #024;
    }

    #footer {
    display:block;
    border-top:5px solid #eef;
    color:#eef;
    clear:both;
    background:#eef;
    list-style-type:none;
    padding:1em 0 4em 8px;
    }

    #footer li {
    float:center;
    border-right:1px solid #eef;
    padding:0 8px;
    }

    #footer li a {
    color:#eef;
    border-color:#eef;
    }

    #sidebar .col {
    width:100px;
    float:left;
    margin:0 10px 0 0;
    }

    #sidebar a {
    display:block;
    border:none;
    padding:3px;
    }

    #sidebar a:hover {
    color:#68f;
    }

    #sidebar ul ul {
    list-style-type:square;
    color:#7D9EC0;
    margin:0 0 0 16px;
    }

    #sidebar #about h2,#sidebar .widget_text h2 {
    color:#7D9EC0;
    margin:0;
    padding:0;
    }

    #header h1 {
    font-size:2.2em;
    border:none;
    color:#7D9EC0;
    margin:0;
    padding:45px 95px 0 0;
    }

    #sidebar ul ul ul {
    color:black;
    list-style-type:none;
    }

    #content a:link,.entry-content a:active,.entry-content a:hover {
    outline:none;
    }

    #content a:visited {
    outline:none;
    }

    .widgettitle {
    color:#7D9EC0;
    }

    #navcontainer ul {
    padding-left:0;
    margin-left:0;
    background-color:#036;
    color:White;
    float:left;
    width:100%;
    font-family:arial, helvetica, sans-serif;
    }

    #navcontainer ul li {
    display:inline;
    }

    #navcontainer ul li a {
    background-color:#036;
    color:White;
    text-decoration:none;
    float:left;
    border-right:1px solid #fff;
    padding:0.2em 1em;
    }

    #navcontainer ul li a:hover {
    background-color:#369;
    color:#fff;
    }

    ul#feeds {
    clear:both;
    text-transform:uppercase;
    word-spacing:30px;
    list-style-type:none;
    background:#eef;
    overflow:hidden;
    border-top:16px solid #fff;
    margin:0;
    padding:8px;
    }

    #feeds li {
    float:left;
    border:none;
    clear:none;
    margin:0;
    }

    #feeds h3 {
    border:none;
    color:#7D9EC0;
    font-weight:bold;
    font-size:1em;
    margin:3px;
    padding:4px;
    }

    #feeds a {
    display:block;
    color:#7D9EC0;
    background:url(‘http://faq.files.wordpress.com/2006/11/l14.png’) 3px center no-repeat;
    margin:3px;
    padding:4px 4px 4px 24px;
    }

    #feeds a:hover {
    color:#68f;
    background-color:#eef;
    }

    .widgets {
    position:relative;
    clear:both;
    list-style-type:none;
    overflow:hidden;
    border-left:4px solid #fc0;
    border:none;
    background:none;
    margin:0 !important;
    padding:4px 0 !important;
    }

    .widgets a {
    position:relative;
    color:#99c;
    border:none;
    }

    .widgets .read {
    position:relative;
    padding-left:16px;
    background:url(‘images/post_read.gif’) no-repeat left center;
    }

    .widgets .comments {
    padding-left:16px;
    background:url(‘images/post_comment.gif’) no-repeat left center;
    }

    .widgets a:hover {
    color:#68f;
    }

    .widgets li {
    position:relative;
    float:left;
    color:#eef;
    border-right:1px dotted #99c;
    padding:2px 8px;
    }

    #text-1 div.widget_text {
    position:absolute bottom left;
    }

  • Unknown's avatar
    weirdscience · Member ·

    oh and p.s. i’ve played with the height of it as well so i also need to figure that out. if anyone can assist, i would be extremely grateful. i finally have the css how i want it (well as much as i feel capable of doing! hehe) and am keen to get my image sorted so i can upgrade. =)

  • Unknown's avatar
    ellaella · Member ·

    Since you haven’t paid for the upgrade yet, you can’t save the changes you’ve made, so simply copy and paste to notepad or another text editor the code that’s producing good results in preview. Back out of the CSS editing tab, go to your custom header upload page and it should tell you what size the image should be for an exact “fit.”

    When you do have the upgrade, the header image will disappear and you’ll have to enter the specific url for the image on your stylesheet.

  • Unknown's avatar
    rosclarke · Member ·

    At the moment you have the wrapper at 800px, the main content at 460px and the sidebar at 230px. 460+230 = 690px. So you have 110px somewhere? You probably want to make the sums add up. Then set your header to the same width as your wrapper.

  • The topic ‘editing css – how to figure out new width?’ is closed to new replies.