Need help? Check out our Support site, then


Problems with the header

  1. 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. 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. 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. 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. You're welcome.

  6. 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. 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. well, thank you anyway ;).

  9. 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. 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. 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. 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. 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. 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. 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. 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. oh, and i don't know why there's like one pixel in white on the top of it all :S ¿?

  18. 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. 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. 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. 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. 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. 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. oh! that's it! thank you so much! i've learn a lot :D!

  25. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic