Twenty Eleven Site not reflecting latest Child Theme changes

The width of that page is set to 690px in this CSS code:

.one-column #page {
    max-width: 690px;
}

You’ll need to change that in the child style.css file.

It looks like you’ve dropped the box shadow on #access correctly in your child theme. However there’s a minor error in your child theme stylesheet so your #access modification isn’t actually being recognized. See #branding .only-search #s and notice that you are missing the closing bracket.

As for the header width, what WPyogi is suggesting should put you on the right track, you’ll probably also need to look at modifying your #main and #primary elements depending on what you are looking to do.

hmmm, I’ve actioned the changes, yet my site doesn’t seem to be reflecting them. I’ve also noticed my entry-title color, even though I’ve changed it to #CC3300 has reverted to #CC3300.

Maybe the issue is with my child theme in some way?

It does not look like you are in the child theme — or at least the stylesheet is the regular one… So check on which theme is activated and that the child stylesheet is configured correctly.

The site https://argusgazette.com/wordpress/ is not using a child theme. I really hope you haven’t modified the wp-content/themes/twentyeleven files.

https://codex.www.ads-software.com/Child_Themes

Edit: Laughter. Now it’s a child theme and looks dark and orange’y.

Your laughter = me sweating to fix things! ??

The shadow above the header remains?

And also curious if there is a method of increasing only the header(including the menu bar) width, without increasing the content width?

The general menu bar look I’m going for is similar to this https://www.argusgazette.com/, not sure if we can add a 2em bottom border to the menu bar?

I do appreciate your help guys ??

You’ve got a lot of really strange layout things going on…but to answer your questions — the grey strip across the top of the page can be removed by changing the 2em margins to zero in this CSS:

#page {
    margin: 2em auto;
}

There is not a good way to make the header section wider than the rest of the page because of the way the layout is structured. You can put a bigger width in for #branding — but it’s not centered and it resizes the whole section. I think you’d be better off finding a theme that has the layout like that.

I also just noticed that you have the header image outside the hgroup tags — which is probably not what you want… You probably also want to put “display: none;” in this section:

#site-title, #site-description {
    clip: rect(1px, 1px, 1px, 1px);
    display: none;
    position: absolute !important;
}

You can add a line beneath the menu bar with this — add the border bottom (change the px or color if you want)
:

#access {
    background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
    border-bottom: 4px solid black;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
}

Wow, thanks a lot WPyogi!

What do you mean by I also just noticed that you have the header image outside the hgroup tags?

I added the header in Appearance – Header – Custom Header. Is there something I should amend?

And re the border, how would I get it to begin at the Home button and end at the end of the search box?

And lastly, I wanted my whole page to be white, how can I change the grey parts on either side of the main section to white?

That’s everything!

Okay, if you used the custom header option — just leave it. Just seems a bit odd to me — but it works, so no problem! (No sense in messing with what works — LOL!)

Also, I just realized that this code (which I said above to remove or comment out) is in there for IE 6 & 7 so leave it alone!

#site-title, #site-description {
    clip: rect(1px, 1px, 1px, 1px);
    display: none;
    position: absolute !important;
}

Page background — just remove this entire CSS (line 322) – there is another body code on line 37 that will then change it back to white:

body {
    background: none repeat scroll 0 0 #E2E2E2;
}

To fix the black horizontal line takes some pretty fussy CSS coding, so I’m not sure it’s a great way to go and it probably won’t look right if and when you add any other menu items, but below is what will do it.

There is another way to make a horizontal line on the page by using an hr element — but you’d have to modify the header.php file.

line 555

#access ul {
    font-size: 13px;
    list-style: none outside none;
    margin: 0 0 0 -55px;
    padding-left: 0;
}

line 95

#access {
    background: -moz-linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 transparent;
    border-bottom: 4px solid black;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);  DELETE THIS LINE
    clear: both;
    display: block;
    float: left;
    margin: 0 0 6px 100px;
    width: 80%;
}

line 625

#branding #searchform {
    margin-right: 40px;
    position: absolute;
    right: 7.6%;
    text-align: right;
    top: 3.8em;
}

BUT BEFORE you do any of this, please make a copy of your stylesheet so you can easily revert back to a copy if these changes make a mess of it!

I might be changing that custom header option for some flash in the future ??

Thanks a lot for your input! it’s been great ??