WordPress.org

Support

Support » Themes and Templates » [Resolved] Need a little CSS-help with menu-color

[Resolved] Need a little CSS-help with menu-color

  • Hi Community

    I’d like to have a colour in the whole sidebar under the menue.
    I managed to do so, but only partially.
    Here is the link to a screenshot: http://www.albertweber.ch/solution/screenshot.png

    I would like to change the pink part also to grey (like under the navigation menu)
    The menu-text itself should stay in place.

    Yes, it’s a child-theme from Twenty Eleven and the code can be found here: http://www.albertweber.ch/solution/style.css

    I guess it can be changed here, but can’t figure it out…

    /* Right Content */
    .left-sidebar #primary {
    	float: right;
    	margin: 0 0 0 -26.4%;
    	width: 100%;
    	background: #595959
    }
    .left-sidebar #content {
    	margin: 0 7.6% 0 34%;
    	width: 58.4%;
    }
    .left-sidebar #secondary {
    	float: left;
    	margin-left: 7.6%;
    	margin-right: 0;
    	width: 18.8%!important;
    	background: #999999
    }

    The site can be found here: http://www.albertweber.ch

    Help is much appreciated!!
    I’m also open for suggestions in general!

    regards
    rangi

Viewing 12 replies - 1 through 12 (of 12 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    It’s actually a bit tricky to do what you want — because of the way floated elements work — i.e. they are only as big as the content they contain. So basically what you need to do is set the entire page (below the header section) to the #999999 color and then set the main content section to the darker grey. Try these changes:

    .left-sidebar #primary - change to #999999;

    #content {
        background: none repeat scroll 0 0 #595959;
        margin: 0 34% 0 7.6%;
        width: 58.4%;
    }

    Then you’ll need to change the margins of the content section so the darker grey covers the whole space. Try using padding on the containing elements and/or margins on the contained elements to offset those margin changes.

    Assuming you are using Firebug (or equivalent) to work with the CSS code?

    Ok, thanks in advance, I’ll try that!
    Keep you informed about progress… 🙂

    I managed to change it…a bit… 🙂

    I understand now the way how to do, but my CSS-Skills are not sufficient.

    Somehow padding has no influence…

    This is the acctual CSS:

    .left-sidebar #primary {
        background: none repeat scroll 0 0 #999999;
        float: right;
        margin: 0 0 0 -26.4%;
        width: 100%;
    }
    .left-sidebar #content {
        margin: 0 0 0 0;
        width: 58.4%;
        background: #595959;
        padding: 0 0;;
        float: right;
    }
    .left-sidebar #secondary {
        float: left;
        margin-left: 7.6%;
        margin-right: 0;
        width: 18.8% !important;
    }

    Here’s the current screenshot: http://www.albertweber.ch/solution/screenshot_new.png

    I guess I’m not too far from the finishing line…but…

    I’m open to ideas!

    Thanks in advance

    regards
    rangi

    btw: I use now firebug which looks like a great piece of program (I used “Web Dev. Tools” before, but this was more complicate).
    If something is crossed out in firebug, I guess it could be deleted in the script?

    WPyogi

    @wpyogi

    Forum Moderator

    No, “crossed out” means that the CSS code is being overridden by more specific CSS. The image shows that you are getting there — but the site itself looks unchanged? It’s impossible to help with CSS issues like this without seeing the site live. Can you make the changes live?

    Well, the site is live…here: http://www.albertweber.ch

    I tried to make changes, but was not succesfull. Here the screenshot from what I was able to change (but changed back, because it was still not what I want. See text above.): http://www.albertweber.ch/solution/screenshot_new.png

    I hope this helps? When you look at the screenshot you can see that I’m quite near the solution.

    Regards
    Rangi

    WPyogi

    @wpyogi

    Forum Moderator

    Yes, this is what you had already posted. I was going to try to help you with the rest of it. But if the changes are not on the live site, I cannot do that…CSS can’t really be done without seeing the current version live.

    Forgive my confusion, I appreciate your help very much!

    I have now made the changes live.

    regards
    rangi

    I think I found the solution!

    I changed the width of #content.

    /* Right Content */
    .left-sidebar #primary {
        background: none repeat scroll 0 0 #999999;
        float: right;
        margin: 0 0 0 -34.4%;
        width: 100%;
    }
    .left-sidebar #content {
        background: none repeat scroll 0 0 #595959;
        float: right;
        margin: 0;
        padding: 0;
        width: 70%;
    }
    .left-sidebar #secondary {
        float: left;
        margin-left: 7.6%;
        margin-right: 0;
        width: 20.8% !important;

    The only thing I need to change now is the textarea of the main content. The text sticks now on the left side, this shoult be in one line with the main-logo above – or at least 3mm from the border…

    Thanks in advance and many thanks to WPyogi for your kind help so far!!!

    regards
    rangi

    WPyogi

    @wpyogi

    Forum Moderator

    Not sure if this is what you mean,but if you add left-side padding to this, it adjusts the spacing of the main content:

    .entry-content, .entry-summary {
        padding: 1.625em 0 0 1.5em;
    }

    Note — the 1.5em is changed from what was there (0).

    Great! It’s done!

    I changed it to that and that works fine for me!

    .entry-content, .entry-summary {
        padding: 0 1.625em;
    }

    Many thanks again and have a nice day, this was very helpful for me!

    regards
    rangi

    WPyogi

    @wpyogi

    Forum Moderator

    You’re welcome — glad you stuck with it. It’s a really nice looking and original page…

    Thank you! 😉

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] Need a little CSS-help with menu-color’ is closed to new replies.
Skip to toolbar