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 |
Not sure what you mean. That is the standard atahualpa menus using some rounding of the menu items. What is your URL?
|
|
are you looking for the rounded tops?
|
yes. that's right.
|
add the following to ato->Add HTML/CSS Inserts->CSS Inserts
HTML Code:
/* Menu Bars */ |
Thanks Juggledad
I sent you a PM re: further work |
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; } */ |
What browser are you using? Ie doesn't do rounding. The code is from 3.5.3
|
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; } |
So to round them only on the top, change 'bottom' to 'top' in the CSS.
|
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? |
HTML Code:
div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a { |
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 12:32 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.