adjust page width and header image dimensions

See Resize the Header in a Twenty Eleven Child Theme

tada https://www.wildpluckings.com

update: I just realised that the new header size of 960×70 will not be in effect UNTIL after we change to a new header image. This is why I was not seeing it update. I had to go to:

appearance –> header –>

and to my delight;

“Images of exactly 960 × 70 pixels will be used as-is.”

SO it did work after all =) Sorry I didn’t see your response esmi. Thanks for the link, I assume that either method is ok? Or maybe the method I have used is why I am experiencing the second problem I have listed below?

Three problems to iron out:

1) I believe the overall page width is still 1000px. This has caused some stretching on my header. How can I resolve that?

2) There is a ~two pixel area of grey space at the top of my header image. Not sure why this is does anyone have any ideas? I have set it to be 960x70px, and the image I have used is also 960x70px.

3) Ideally I would like for the header image to be docked at the very top of the page, rather than the small gap. Where can I adjust this?

All of your remaining problems can be fixed by adjusting your child theme’s CSS to overwrite the parent’s. Try using Firefox with the Firebug add-on for this kind of CSS work.
https://getfirebug.com/

firebug is mega handy for getting id’s thanks!

I’m experimenting on my footer background/text color. After using firebug I think “site-generator” is the footer id. Here is my code:

#site-generator {
    background-color:#333;
    color:#ccc;

}

I hardly know any code for different colors. Doing it without dreamweaver holding my hand through the process will take time to get used to ?? Not sure how to set the font colour to “#ccc” (light grey). On my old webpage I could just put the above code for a dark grey background and light grey text, but it is not affecting the text on my wordpress site.

Any idea why? Thanks ??

When you examine that footer with Firebug, which CSS is controlling it (ie at the top of the list)?

screen capture ?? div id “site-generator”

1280×720

Still a beginner with Firebug I hope I am using it correctly

[Moderator Note: Please post code or markup snippets between backticks or use the code button.]

All you have in your child theme’s stylesheet is

#site-generator {
    background-color: #333333;
}

that is confusing maybe it didn’t update? I can confirm now that it has the following:

#site-generator {
    background-color:#333;
    color:#0000000;

}

https://www.wildpluckings.com/wp-content/themes/wildtheme/style.css

It isn’t affecting the footer text color though (wrong code?)

I noticed my main navigation menu items “squash” when I make the window smaller, my header logo scales down in size too! These are two things I definitely need to resolve (want a fixed page width)

What can I change in the style sheet to have fixed width instead of fluid (I think it will be a question of changing “%” to “px” somewhere.

It is frustrating having to ask questions at literally every hurdle. I promise I am spending hours looking through the documentation and google searches before asking questions but I rarely get anywhere. Thanks for being patient with me

If you want a fixed width theme. then you’ll need to adjust your child’s CSS to create a fixed width page.

I may have identified something which is messing with me. Like you noticed earlier, sometimes “updating” my style.css just doesn’t work. It isn’t updating on my pages for whatever reason. So to complicate things, I am not able to see changes and I probably assume I did something wrong.

Trying this in the child style.css:

#site-generator {
    background-color:#333;
    color:#f0f0f0;

}

.block-content{
  width: 960px; /* <- for IE6 */
  max-width: 960px;
}

It’s not updating!

here is a screenshot with “file updated successfully” lies I tells ya!

stylesheet here…

edit: I closed my browser and tried again and finally it updated. My code has not worked though. Is this a case of finding another theme which does not use a scaling/resizing width? if I use a layout without sidebar the website is terribly broken, bad on mobile devices too!

It’s not updating!

It is for me. I can see both in the child’s stylesheet at the moment. Not sure what .block-content is referencing but it’s in the stylesheet.

Yes it did update after restarting my browser. I took the .block-content code from another post where someone was asking the same question. It is apparently a fixed width for all body content (header etc will still scale I guess)

I have just discovered the intuitive looking “weaver ii admin” menu. Maybe this is what I’ve been looking for… did over 4 hours of intensive searches trying to fix the width. Weaver ii admin has a check-box for it.

Getting this set up is a grind. Designing html/css/php from scratch even with no previous experience was infinitely more intuitive but the comments/user registration and plugins for wordpress are too good to ignore. I like to think of this as a good long term investment haha

I took the .block-content code from another post where someone was asking the same question.

There’s no such class as block-content in Twenty Eleven, so that is never going to work. Have you tried using Firefox with the Firebug add-on for this kind of work?
https://getfirebug.com/

yes I have firebug but I was confused identifying different classes and such. I will get used to it.