Jump to content
Sign in to follow this  
jankowalski

custom menu style in sidebar

Recommended Posts

jankowalski

how can i change font and background color for my custom menu widget items in sidebar menu?

Share this post


Link to post
Share on other sites
kastelic

How about a link to your site or at least tell us what theme your using?

Share this post


Link to post
Share on other sites
jankowalski

Platform pro and regular custom menu widget. it displays only text links at the moment...

Share this post


Link to post
Share on other sites
catrina

Add this code to the custom CSS area or activate the child theme and paste it into the base.css file:

div.widget-pad {font-family: FONTNAME; font-size: #px; background-color: #xxxxxx;}

Change #px to the size you want for the font and #xxxxxx to the hex code for the color you want.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jankowalski

This has changed background and fonts in all widgets in my sidebar. I want to modify only custom menu widget...

Share this post


Link to post
Share on other sites
kastelic

Hi Jan, if you post a link we can further customize the code. If you use the Firebug inspector just find the class or id that is unique to that widget and put that class or id in the front of your CSS rule. So like:

.unique-class div.widget-pad {....
or if the class is on the same div as
widget-pad
:
div.unique-class {...

Share this post


Link to post
Share on other sites
jankowalski

It s a standard wordpress sidebar menu, this is the code:

<li id="nav_menu-2" class="widget_nav_menu widget fix">
	<div class="widget-pad">
	<div class="menu-about-container">
	<ul id="menu-about" class="menu">
	
	<li id="menu-item-494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-494">Menu item 1
	
	<li id="menu-item-487" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-487">Menu item 2
	
	</div>
	</div>
	[/code]

Share this post


Link to post
Share on other sites
catrina

Add this code to your custom CSS area:

ul#menu-about div.menu {background-color: #xxxxxx; font-family: FONT-NAME; font-size: SIZEpx;}

Change the background, font name, and size to what you desire.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
catrina

You'll need to use

div.menu-about-container

as the selector in order to style it.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
catrina

The links in that menu are already formatted with li so you don't have to add them yourself. The selector for the items is:

ul#menu-about li.menu-item {YOUR STYLING GOES HERE}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jankowalski

great,

ul#menu-about li.menu-item {text-transform:uppercase; color:#00ff00; background-color: #fbf8f1; margin-bottom:8px; border: 1px solid #DDD; padding:8px 0px 8px 8px;}
	ul#menu-about li.menu-item a:hover {text-decoration:none; background-color: #DDD; 1px solid #DDD;}

the hover does not work the way i want, it should highlight all button, not just text. like it is in main navigation... and also, would like to add selected button value to change color for selected page.

Share this post


Link to post
Share on other sites
catrina

For background color hover, you need to add

display: block;
to the CSS styling like so:
ul#menu-about li.menu-item {text-transform:uppercase; color:#00ff00; background-color: #fbf8f1; margin-bottom:8px; border: 1px solid #DDD; padding:8px 0px 8px 8px; display: block;}
	ul#menu-about li.menu-item a:hover {text-decoration:none; background-color: #DDD; 1px solid #DDD;}
To add styling for a currently selected page item, use this CSS:
ul#menu-about li.current_page_item {text-transform:uppercase; color:#00ff00; background-color: #fbf8f1; margin-bottom:8px; border: 1px solid #DDD; padding:8px 0px 8px 8px; display: block;}

^ Style this the way you want.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
jankowalski

styling for currently selected works now, but display:block; didn t help... you have my link, please check the result, only text is highlighted with different color... current code is

ul#menu-about li.menu-item {text-transform:uppercase; background-color: #fbf8f1; margin-bottom:8px; border: 1px solid #DDD; padding:8px 0px 8px 8px; display: block; }
	
	ul#menu-about li.menu-item a:hover {text-decoration:none; background-color: #DDD; border: 1px solid #DDD; }
	
	ul#menu-about li.current_page_item {text-transform:uppercase; color:#ffffff !important; background-color: #568c82; margin-bottom:8px; border: 1px solid #568c82; padding:8px 0px 8px 8px; display: block;}

Share this post


Link to post
Share on other sites
cmunns

This is because you are applying padding to the li element when the padding should be applied to the a element if you want the hover to cover the whole area, thus `ul#menu-about li.menu-item a { padding:8px 0px 8px 8px;}` Does that make sense?

Share this post


Link to post
Share on other sites
jankowalski

thanks for the tip. solved.

Share this post


Link to post
Share on other sites
Analog Drawings
Hello, I am doing something similar to the above, I am wanting my universal sidebar to be a different style to all other sidebars. I am also using a widget inside the universal sidebar which needs styling too. Here is the sidebar (in the grey): http://www.transitioninstitute.org.uk/test/ I am stuck on getting all the text to be white (keeping the black rollover state) Here is my code (the .spe is the widget) [code] .spe_link { padding-left:0px; padding-right:5px; font-size:12px; font-weight:bold; font-color: #ffffff; } .spe_excerpt { padding-left:5px; padding-right:5px; font-size:11px; } #sidebar_universal {color: #ffffff; background-color: #a8a89e;} [/code] Is this the best way to do this?

Share this post


Link to post
Share on other sites
Danny
Hi Paul, Can you give this a try for me please: [code]#sidebar_universal h3, #sidebar_universal .spe_link a { color:#FFFFFF !important; }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Brilliant! Thanks again...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×