WordPress.org

Forums

[resolved] Need a little CSS-help with menu-color (13 posts)

  1. rangitoto
    Member
    Posted 2 years ago #

    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

  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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?

  3. rangitoto
    Member
    Posted 2 years ago #

    Ok, thanks in advance, I'll try that!
    Keep you informed about progress... :-)

  4. rangitoto
    Member
    Posted 2 years ago #

    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?

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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?

  6. rangitoto
    Member
    Posted 2 years ago #

    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

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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.

  8. rangitoto
    Member
    Posted 2 years ago #

    Forgive my confusion, I appreciate your help very much!

    I have now made the changes live.

    regards
    rangi

  9. rangitoto
    Member
    Posted 2 years ago #

    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

  10. WPyogi
    Forum Moderator
    Posted 2 years ago #

    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).

  11. rangitoto
    Member
    Posted 2 years ago #

    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

  12. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You're welcome -- glad you stuck with it. It's a really nice looking and original page...

  13. rangitoto
    Member
    Posted 2 years ago #

    Thank you! ;-)

Topic Closed

This topic has been closed to new replies.

About this Topic