Problems with the header

  • Author
    Posts
  • #652763

    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.

    #652943

    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/

    #652945

    timethief
    Member

    Also note this re: dates and post titles > https://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 > https://en.forums.wordpress.com/tags/spectrum

    #652947

    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!

    #652949

    timethief
    Member

    You’re welcome.

    #652953

    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.

    #652954

    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.

    #652955

    eduardsans
    Member

    well, thank you anyway ;).

    #652957

    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.

    #652960

    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;
    }

    #653024

    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.

    #653049

    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.

    #653051

    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.

    #653054

    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!

    #653055

    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.

    #653062

    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?

    #653063

    eduardsans
    Member

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

    #653064

    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;

    #653067

    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

    #653070

    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.

The topic ‘Problems with the header’ is closed to new replies.