WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Eleven Site not reflecting latest Child Theme changes (11 posts)

  1. chamon2
    Member
    Posted 2 years ago #

    Hello,

    I'm trying to;

    1) Remove header and menu shadows
    2) stretch header to fill almost the full width of page. Like for ex http://www.thesartorialist.com/

    Here is my site http://argusgazette.com/wordpress/

    As you can see I've tried to make the amendments in my child theme but they do not seem to be reflecting on my site?

    Ideas & suggestions much appreciated!

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  3. jeremyjaymes
    Member
    Posted 2 years ago #

    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.

  4. chamon2
    Member
    Posted 2 years ago #

    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?

  5. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

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

    http://codex.wordpress.org/Child_Themes

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

  7. chamon2
    Member
    Posted 2 years ago #

    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 http://www.argusgazette.com/, not sure if we can add a 2em bottom border to the menu bar?

    I do appreciate your help guys :)

  8. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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%;
    }
  9. chamon2
    Member
    Posted 2 years ago #

    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!

  10. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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!

  11. chamon2
    Member
    Posted 2 years ago #

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

    Thanks a lot for your input! it's been great :)

Topic Closed

This topic has been closed to new replies.

About this Topic