Wordpress Themes - WP Forum at BFA - [SOLVED] Need help with styling menu

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - [SOLVED] Need help with styling menu (http://forum.bytesforall.com/showthread.php?t=14989)

Viktor Garbar

Aug 2, 2011 09:57 AM

[SOLVED] Need help with styling menu

I am desperately trying to change font weight in category menu.

Added "bold" via web interface so it reads

Code:

div#menu2 ul.rMenu li a:link, 

div#menu2 ul.rMenu li a:hover, 

div#menu2 ul.rMenu li a:visited, 

div#menu2 ul.rMenu li a:active {

        text-decoration: none;

        margin:0;

        color: #000000;

        text-transform: uppercase;

        font: 1.3em bold Arial, sans-serif; 

        }

Full CSS is here http://21.maidan.org.ua/?bfa_ata_file=css

However text does not show as bold - second dark menu here http://21.maidan.org.ua (site is in Ukrainian but you can see it's not bold anyway)

Also I tried to add background image to div#menu2 via included CSS and failed completely. Apparently I was doing something wrong.

So the questions are
1. How to make menu font bold?
2. How to add background image to menu?

Thank you!
Viktor

lmilesw

Aug 2, 2011 07:53 PM

In ATO>Menu put the following in the Font Size and Face box

HTML Code:

bold 1.3em Arial, sans-serif

Viktor Garbar

Aug 3, 2011 12:05 PM

Oh! Thank you very much! It worked like charm.

And how about background image for menu? Is that possible to add it? I tried to add it to #menu2 but it does not work.

Viktor

lmilesw

Aug 3, 2011 01:23 PM

For a background image you would have to determine the selectors for the area you want to add a background to and apply the necessary CSS. You can also add background images to the menu tabs via the navigation field in the WordPress menu builder.

Viktor Garbar

Aug 3, 2011 04:48 PM

All I need is to add background image to div#menu2

I tried this and failed

div#menu2 {background: url('http://maidan.org.ua/design/2011/img/headmenu.jpg') no-repeat;}

What I am doing wrong?

Thank you again!

Viktor

juggledad

Aug 3, 2011 07:05 PM

You didn't do anything wrong, that CSS is working...the only thing is that the menu code is this

HTML Code:

<div id="menu2" class="menu-navigation-container">

<ul id="rmenu" class="clearfix rMenu-hor rMenu">

<li id="menu-item-97" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-97">

</li>

and the CSS for the div#menu2 is layed down first, then this CSS

HTML Code:

div#menu2 ul.rMenu {

    background: none repeat scroll 0 0 #B4B4B4;

    border: 1px dotted #FFFFFF;

}

is layed on top of the previous CSS and then this CSS

HTML Code:

div#menu2 ul.rMenu li {

    background-color: #B4B4B4;

}

is laid on top of that.

So it's there, just covered over. You will need to add in CSS for those two selectors and set the background transparent

lmilesw

Aug 3, 2011 07:08 PM

There are a couple of issues here. You have to get rid of the background color for the list items and the background image has breaks in it so it won't match your menu exactly.

Viktor Garbar

Aug 4, 2011 02:50 AM

I used some iamge from working design for test purpuses only - it will not have separators.

So I basically need to edit theme stylesheet? How to proceed with that in order not to screw custom settings input via web?

juggledad

Aug 4, 2011 03:35 AM

You don't need to edit the CSS, just add CSS to the CSS inserts setting the background for those two selectors to 'transparent'

Viktor Garbar

Aug 4, 2011 04:40 AM

Thank you very much for your patience with me :)

It worked. Almost. Now the question is how to get rid of borders around menu items? Adjusting colors like mentioned on option page will not work since background image is not single color.

See how it looks like now
http://21.maidan.org.ua/

I tried

Code:

div#menu2 ul.rMenu li {

    background: transparent;

    margin: 5px;

    border: 0;

}

But it does not work apparently.

Please help. Hopefully its the last question :)

Viktor

juggledad

Aug 4, 2011 04:53 AM

what do you have set in the theme menu option 'Border around all menu items'?

Viktor Garbar

Aug 4, 2011 06:07 AM

Thank you!!! :) Now I am really done with that.

I really appreciate your help and your great work!

Viktor

All times are GMT -6. The time now is 07:43 AM.