WordPress › Support » Need a little CSS-help with menu-color

rangitoto
Member
Posted 7 months 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
WPyogi
Volunteer Moderator
Posted 7 months 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?
rangitoto
Member
Posted 7 months ago #

Ok, thanks in advance, I'll try that!
Keep you informed about progress... :-)
rangitoto
Member
Posted 7 months 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?
WPyogi
Volunteer Moderator
Posted 7 months 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?
rangitoto
Member
Posted 7 months 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
WPyogi
Volunteer Moderator
Posted 7 months 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.
rangitoto
Member
Posted 7 months ago #

Forgive my confusion, I appreciate your help very much!

I have now made the changes live.

regards
rangi

rangitoto
Member
Posted 7 months 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

WPyogi
Volunteer Moderator
Posted 7 months 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).
rangitoto
Member
Posted 7 months 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
WPyogi
Volunteer Moderator
Posted 7 months ago #

You're welcome -- glad you stuck with it. It's a really nice looking and original page...
rangitoto
Member
Posted 7 months ago #

Thank you! ;-)

Reply

You must log in to post.

WordPress.org

Forums

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

Reply

About this Topic

Tags

Code is Poetry