Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Problems with the header

  1. eduardsans
    Member

    Hi everyone!

    I recently purchased the CSS pack but it's been quite long since I don't write/read code (never been an expert by the way xD) and i find myself really really clumsy.

    I've got two main problems regarding the header part of my blog: http://cineycerveza.wordpress.com . The first one is that i can't find the grey bar that's on the top to erase it (where it says "just another wordpress blabla..."). And the second one is that I want that the image i put on the header -below- to repeat itself (the current image is just something i've been testing with) because now it only centers it though i've changed this part in the css:

    #header {
    background:url('img/header.jpg') repeat-x;
    height:200px;
    border-bottom:5px solid #A6A6A6;
    }

    what am i doing wrong? can anyone help?? thank you everyone!

    The blog I need help with is cineycerveza.wordpress.com.

  2. timethief
    Member

    The first one is that i can't find the grey bar that's on the top to erase it (where it says "just another wordpress blabla...").

    This is not a CSS issue. Go here > Settings > General and you will be able to change the tagline. Don't forget to click "save changes" when you have done so.

    When you CSS edit a theme you can no longer use the header image uploader. You must go to the Media Library and get the link for the header image and include it in your CSS.

    Also note when you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  3. timethief
    Member

    Also note this re: dates and post titles > http://en.forums.wordpress.com/topic/spectrum-theme-post-header-is-overlapping-date?replies=6#post-577122
    As Spectrum has been CSS edited by others this link will provide threads that may have answers to your questions in them > http://en.forums.wordpress.com/tags/spectrum

  4. eduardsans
    Member

    thank you SO SO much, I was freaking out! I had only to erase the code :P! what a joke i am lol :D!

  5. timethief
    Member

    You're welcome.

  6. eduardsans
    Member

    By the way, now there is the grey bar i was talking about, 'cause you caught me testing another theme but the problem I had was on the Fusion theme, so if you could give it another look now i'd be really thankful.

    The tagline is gone but still there's this "body" i can't seem to quit and that bothers me a lot.

  7. timethief
    Member

    I don't actually help with CSS editing. There is Staff support for the custom design upgrade and sometimes another volunteer has time away from his paid work and helps.

  8. eduardsans
    Member

    well, thank you anyway ;).

  9. thesacredpath
    Member

    If you want the header image to repeat across the top as the gradients do now (full browser window width) you want to put your header image into #page-wrap1 since that is where the two grey bands are defined. You also want to use the following syntax on the background declaration.

    background: url(URL of header image) repeat-x scroll 0 0 transparent;

    You will want to modify the other CSS you have above so that no image is displayed there, but the "height" and border declarations remain so it retains the vertical spacing.

    #header {
background:none no-repeat scroll 0 0 transparent;
height:200px;
border-bottom:5px solid #A6A6A6;
}

    I haven't checked any of this, so if something bizarre happens, let us know and we can help with that.

  10. eduardsans
    Member

    thank you so much for answering though it seems like it doesn't work as i expected. On one hand the background on the #page-wrap1 disappears, which is something, but now the image set in it doesn't repeat and it looks like the space ocuppied by the grey bar can't be filled with the picture... here's the code i've written:

    #page-wrap1 {
    background:url('img/cinefagos.jpg') repeat-x scroll 0 0 transparent;
    }

    #header {
    background:none no-repeat scroll 0 0 transparent;
    height:200px;
    border-bottom:5px solid #A6A6A6;
    }

  11. thesacredpath
    Member

    Alright, sorry, I was in a little bit of a hurry and didn't dig deep enough.

    I just looked at things, and right now your header image is in #page-wrap2 and if you modify that as follows, the image will start at the left edge of the browser window and repeat across.

    #page-wrap2 {
background: url("http://cineycerveza.files.wordpress.com/2011/07/cinefagos3.png") repeat-x scroll 0 bottom transparent;
}

    Try the above and make sure and widen and narrow your browser window so that you can see the effect.

  12. eduardsans
    Member

    No need to apologize! you're trying to help which is great! :D, to sum up here's the code:

    #page-wrap1 {
    height:180px;
    }

    #page-wrap2 {
    background:black url("http://cineycerveza.files.wordpress.com/2011/07/cinefagos3.png") repeat-x scroll 0 bottom transparent;
    height:180px;
    }

    #header {
    background:none no-repeat scroll 0 0 transparent;
    height:180px;
    border-bottom:5px solid #A6A6A6;
    }

    And it is not working :S. Am i doing something wrong? if it's not possible to fix i'll do it like yesterday, at least I afforded a black layer on the back that didn't bother the design of the header.

  13. thesacredpath
    Member

    The following repeats the header in the x direction (horizontally, gets rid of the grey bar and replaces it with black. 

    #page-wrap1 {
background: none repeat scroll 0 0 #000000;
}

#page-wrap2 {
background: url("http://cineycerveza.files.wordpress.com/2011/07/cinefagos3.png") repeat-x scroll center bottom transparent;
}

    See what you thin, This all works for me using Firebug through Firefox.

  14. eduardsans
    Member

    Thank you SO SO much! it works properly! :D

    One last thing if it's not asking too much: I was wondering if it's possible to let an image as a pattern on the back (as you've accomplished now) repeating itself and then, another image on a layer in front with the logo of the web, and that only shows once. I haven't given much thought to it but it seems to me like it has more to do with HTML and <div>'s and not CSS. Is it possible? :S and thank you by advance!

  15. thesacredpath
    Member

    You are welcome.

    You have #page-wrap1 and #page-wrap2 (2 laying on top of 1), so this could be done. If you get to that point, we can give it a try.

  16. eduardsans
    Member

    ok :D, so i've been testing with #page-wrap1 and 2 to see if i could accomplish this by my own, and well, i almost have it lol but there's a little problem, here the code:

    #page-wrap1 {
    background:url('http://cineycerveza.files.wordpress.com/2011/07/backimage2.jpg') repeat-x scroll center bottom transparent;
    height:180px;
    }

    #page-wrap2 {
    background:url('http://cineycerveza.files.wordpress.com/2011/07/logo.jpg') no-repeat scroll 0 50px transparent;
    height:180px;
    }

    #header {
    background:none no-repeat scroll 0 0 transparent;
    border-bottom:5px solid #A6A6A6;
    height:180px;
    }

    So now, the logo is fixed in the height but when i widen the screen it stays always on the left, which is not really useful. How may I fix its horizontal position so that it won't move if i widen the screen?

    and by the way, i haven't tested it but i figure that if i use a gif or a png with transparency on #page-wrap2 it would work, right?

  17. eduardsans
    Member

    oh, and i don't know why there's like one pixel in white on the top of it all :S ¿?

  18. thesacredpath
    Member

    Oh that is weird. I don't see anything that would cause that, but here is a fix. Add the following to #page-wrap2

    margin-top: -1px;

  19. eduardsans
    Member

    i have tried it in both, page-wrap1 and 2 but it does anything :S. Anyway, if this is going to cause much problem i'd rather know how to fix the logo on a horizontal position and then see what's wrong with this lol

  20. eduardsans
    Member

    gosh, i think where the problem is with that dead pixel, i think it's a pixel i've cut with the image, nothing to do with the css, 'cause i've tried the same thing with another image and it doesn't happen :P.

  21. thesacredpath
    Member

    Glad you got it sorted. The above worked for me with Firebug. If you are using the preview function, sometimes it can be a little flakey. If you make changes and they don't show up in preview, force refresh the preview page.

  22. eduardsans
    Member

    oh, by the way, the logo thing still doesn't work, i mean, it doesn't move when i widen the screen, and i want it to move with the page, i don't know if i'm explaining myself, if it's not asking too much take a look at the blog and you'll see what i mean :S.

  23. thesacredpath
    Member

    If you want the logo to be aligned with the main page content and move with it horizontally, then you will need to move the logo over and into #page instead. The reason I had you put it into #page-wrap2 was so that you could do a repeating thing, which was what I thought you wanted for the logo.

    Remove the background declaration for the logo image from #page-wrap2 and put it in #page instead.

    #page {
background: url("http://cineycerveza.files.wordpress.com/2011/07/logo.jpg") no-repeat scroll 0 50px transparent;
}

  24. eduardsans
    Member

    oh! that's it! thank you so much! i've learn a lot :D!

  25. thesacredpath
    Member

    You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags