Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Want child menu items to be different style from parent


  #1  
Old Jan 13, 2011, 11:22 AM
robinwiley
 
10 posts · Dec 2010
I'm trying to set up my wife's web site:
http://www.domni.com/TypeInsights2
I've successfully made the main menu items appear "tabbed" by rounding the upper corners. But when I hover over a parent menu item, the drop-down child items have the same rounded structure, which looks strange (as in the "Articles" menu item).
How can I make the child items appear with square corners?

Also, when I select the parent item, the menu item color does not change.

Any clues gratefully appreciated!

-Robin
  #2  
Old Jan 13, 2011, 03:09 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you will have to add CSS to override the styling you have set on the parent since it cascades to the children (Cascading Style Sheets)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 13, 2011, 03:15 PM
robinwiley
 
10 posts · Dec 2010
Thanks, juggledad -- I figured it was something like that, and I've been experimenting. I added the following to my "CSS Inserts" section, but I suspect I'm missing something because it didn't work:

Quote:
div#menu1 ul.rMenu li ul.rMenu-ver li a {
-webkit-border-top-left-radius: 1px;
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-topright: 1px;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
}
On a related note, is there a catalog of the various CSS IDs used within ATA anywhere?

Thanks,
Robin
  #4  
Old Jan 13, 2011, 05:54 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Just go view a page and then view the source (every browser has a way to do this) copy the entire page to a text document and you will see all the Atahualpa CSS showing all the classes and some of the ID's that are used.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 13, 2011, 08:51 PM
robinwiley
 
10 posts · Dec 2010
OK, juggledad, so I took a look at the page source, and crafted what I thought might work, but still no luck. Here's what I did:

Quote:
div#menu1 ul.rMenu li.rMenu-expand ul.rMenu-ver li.menu-item a {
-webkit-border-top-left-radius: 1px !important;
-webkit-border-top-right-radius: 1px !important;
-moz-border-radius-topleft: 1px !important;
-moz-border-radius-topright: 1px !important;
border-top-left-radius: 1px !important;
border-top-right-radius: 1px !important;
}
Can you shed a little more light? ...and as an incentive, I donated to you... :-P

Thanks,
Robin
  #6  
Old Jan 14, 2011, 04:05 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
attach a copy of your settings (ato-<export/import settings)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Jan 14, 2011, 05:32 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try this
HTML Code:
div#menu1 ul.rMenu li.rMenu-expand ul.rMenu-ver,
div#menu1 ul.rMenu li.rMenu-expand ul.rMenu-ver li.menu-item,
div#menu1 ul.rMenu li.rMenu-expand ul.rMenu-ver li.menu-item a {
-webkit-border-top-left-radius: 1px !important;
-webkit-border-top-right-radius: 1px !important;
-moz-border-radius-topleft: 1px !important;
-moz-border-radius-topright: 1px !important;
border-top-left-radius: 1px !important;
border-top-right-radius: 1px !important; 
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jan 14, 2011, 06:53 AM
robinwiley
 
10 posts · Dec 2010
Ah, that's perfect -- thank you!

-Robin
  #9  
Old Jan 14, 2011, 07:00 AM
robinwiley
 
10 posts · Dec 2010
Oh, one last niggle -- when I click on any of the tabs that have no children, the background color changes to white, which is what I would expect. But when I click on the "Articles" tab (which does have children), its color remains blue.

http://www.domni.com/TypeInsights2

Over to you...

-Robin

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Menu - parent, child, grandchild cascade change in rmenu theredone Customization, Design, Programming... 1 Nov 22, 2010 03:18 AM
[SOLVED] Background image of child items not the same as parent noahinBR Header configuration & styling 2 Feb 4, 2010 12:43 PM
Child pages don't keep parent page in menu highlighted ribbu Page & Category Menu Bars 12 Dec 15, 2009 12:43 PM
Child Page Menu items appear all same colour aebrigham Page & Category Menu Bars 13 Aug 21, 2009 02:42 PM


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


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