Wordpress Themes - WP Forum at BFA

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] Transparent background behind page menu (http://forum.bytesforall.com/showthread.php?t=16448)

inkdork Jan 7, 2012 05:28 PM

[SOLVED] Transparent background behind page menu
 
I've read several threads, and I've managed to get the rounded corners on my menu for the tabs effect, but having trouble getting rid of the background behind each actual item.

This is what I have in my CSS inserts.

Code:

div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a{
-webkit-border-top-left-radius: 11px;
-webkit-border-top-right-radius: 11px;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright: 11px;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}

.rMenu-ver {
    background: transparent !important;
}

I'd also like to make the sub-menus stay with the standard square corners- is this possible?

Thanks in advance. :)

lmilesw Jan 7, 2012 05:47 PM

Sure... It's just a matter of determining the selector the sub menus (I use Firebug) and using the necessary CSS.

inkdork Jan 7, 2012 06:09 PM

Checking out Firebug now... Let's see if I can figure it out. :) Also, I want to get rid of that dashed border around the menu you get when you use page-center. Forgot to add that before.

inkdork Jan 7, 2012 06:29 PM

Ok, got Firebug and looking at the page. I *think* the selector I want for the submenus is
ul#rmenu2 ul.sub-menu, ul#rmenu2 ul.rMenu-ver but I'm not sure. I'm not sure I've sorted out how to use it. Heck, I'm not sure how to go about defining the corners to not be rounded either. I usually reference www.w3schools.com/ for the basic stuff when I get stuff, but no help there this time.

Can I get a bit more direction here? Please?

inkdork Jan 7, 2012 06:43 PM

I've got the border around the menu taken care of, still trying to sort out the background of the menu items though.

inkdork Jan 7, 2012 06:51 PM

Got it! This is what I ended up using to solve it.

Code:

div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a{
-webkit-border-top-left-radius: 11px;
-webkit-border-top-right-radius: 11px;
-moz-border-radius-topleft: 11px;
-moz-border-radius-topright: 11px;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}

.rMenu-ver {
    background: transparent !important;
}

div#menu1 { border: none 0px; }

div#menu1 ul.rMenu {
        background: transparent !important;

There's a few small things I still want to tweak but I think I can figure those out with what's on the forum. :) Thanks for encouraging me to do some more research!

lmilesw Jan 7, 2012 07:13 PM

You don't know how refreshing it is to see someone dive in and find out the answers.

Good job!

Can we call this thread solve? If so you can just go to the menu over the thread and click on Mark thread as solved.

inkdork Jan 7, 2012 07:54 PM

haha I've got a good idea. I've set up sites using WP and Atahualpa for clients, and most just sit there dumbfounded and can't manage anything on their own. Then I get a client who wants me to teach her everything I can so she can manage every detail- just the fact she wants to learn is thrilling!

It took a little longer, but I found the code to lose the round corners on submenus- oddly enough it only worked when placed directly after the code for the rounded corners. The few changes I have left to make don't involve CSS, so should only take a few seconds. Thanks again!

Marking as solved now.


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

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.