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)
-   -   I like this menu bar. How do I get it for my website? (http://forum.bytesforall.com/showthread.php?t=10854)

DrK Oct 31, 2010 11:02 AM

I like this menu bar. How do I get it for my website?
 
I found this menu bar on an atahualpa website.

http://blog.mengonline.com/

How do I replicate this for my site?

Thanks

juggledad Oct 31, 2010 11:40 AM

Not sure what you mean. That is the standard atahualpa menus using some rounding of the menu items. What is your URL?

DrK Oct 31, 2010 05:23 PM

Hi

http://theweightlossdoctor.co.uk/blog

juggledad Oct 31, 2010 06:08 PM

are you looking for the rounded tops?

DrK Nov 1, 2010 04:20 AM

yes. that's right.

juggledad Nov 1, 2010 05:28 AM

add the following to ato->Add HTML/CSS Inserts->CSS Inserts
HTML Code:

/* Menu Bars */

div#menu1 ul.rMenu-ver {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 5px;
/* the background color of sub-UL's must be set here */
background: #ccc;
box-shadow: 0 3px 10px #6663;
-moz-box-shadow: 0 10px 5px #666;
}

div#menu2 ul.rMenu {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 3px;
margin: 5px 0;
}
div#menu2 ul.rMenu-ver {
-moz-border-radius:5px;
-khtml-border-radius: 50px;
-webkit-border-radius:5px;
border-radius: 5px;
padding: 5px;
/* the background color of sub-UL's must be set here */
background: #666;
box-shadow: 0 3px 10px #333;
-moz-box-shadow: 0 3px 10px #333;
}


/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;       
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
}

/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/


DrK Nov 2, 2010 04:48 PM

Thanks Juggledad
I sent you a PM re: further work

runnyeggsham Nov 15, 2010 02:24 AM

The rounded CSS from above doesnt seem to work in the latest version 3.5.3. It rounds the corners top and bottom, btw. I am not going to hijack this thread but that's what entering the above CSS seems to do to the menus now. Can someone update the CSS to reflect the new version?

==================================================

/* round corners for menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/

juggledad Nov 15, 2010 04:23 AM

What browser are you using? Ie doesn't do rounding. The code is from 3.5.3

runnyeggsham Nov 15, 2010 01:13 PM

Juggledad, I am using Firefox, Wordpress 3.01, and Atahualpa 3.5.3, pretty much all new versions for each. I found the codes from previous older posts on rounding. I am not sure about the spacing between the menu tabs, to make them look like folder tabs, yet. It doesnt do it, compared to the website example from the original poster. When, I copy the code that you posted, the menu tabs are spaced apart, but they are also rounded on both the top and bottom.


http://img.villagephotos.com/p/2005-...atahualpa2.jpg


This makes the menus rounded for both the top and the bottom:
---------------------------------------------------------------

div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a,
div#menu2 ul.rMenu li, div#menu2 ul.rMenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* reset 2nd+ level */
/*
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a,
div#menu2 ul.rMenu li li, div#menu2 ul.rMenu li li a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
*/



This makes the menu buttons rounded on the bottom only:
------------------------------------------------------------

div#menu1,
div#menu1 ul.rMenu,
div#menu1 ul.rMenu li,
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
-moz-border-radius-bottomleft:10px;
-khtml-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-khtml-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
}

juggledad Nov 15, 2010 04:28 PM

So to round them only on the top, change 'bottom' to 'top' in the CSS.

runnyeggsham Nov 15, 2010 05:55 PM

Juggledad: You make it seem too easy. I spent a few hours searching and entering into the CSS section and came up empty handed. Yup, sure enough. Changing bottom to top, mostly did it. It also made the whole top menu bar curve though. :)

http://img.villagephotos.com/p/2005-...atahualpa4.jpg


But, that's secondary right now. The last thing to tweak the menu buttons is to spread the page buttons apart. I've looked for padding in ATO/Header Area/Menu2/ but havent seen anything to deal with spacing apart the buttons, besides coloring them, etc. Is it somewhere else?

juggledad Nov 15, 2010 06:12 PM

HTML Code:

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 8px 10px;       
}
/* different padding for parents with arrow image */
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 8px 22px 8px 10px !important;
background-position: 97% 50% !important;
}
/* less padding for children with arrow image */
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 5px 22px 5px 10px !important;
background-position: 97% 50% !important;
}


runnyeggsham Nov 15, 2010 11:16 PM

Thanks Juggledad for all of today's help. It didn't work. But I am going to have to play with this next weekend. Got to write a paper. Maybe someone else with a new install can work on it this week. Thanks again.


All times are GMT -6. The time now is 02:03 AM.

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