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 »

[SOLVED] how to style child page links in menu?


  #1  
Old Dec 18, 2010, 06:32 AM
furiousfrog
 
23 posts · May 2009
Can anyone tell me what the specific selectors are for the drop-down child pages in the pages menu?

I'm using WP 3.0.3 and ATA 3.5.3 with all bugfixes installed, but I just can't for the life of me, find the selector that allows me to style the drop down pages in the menu, and not the parent items in #menu1.

url is: (temp site) http://websandwich.co.uk/banbury/

I've used JD's menu cheat sheet and all works, but I've inspected the element in chrome's debug mode which says its ul.rMenu-ver and under li.page-item page-item 40.

Short of styling every single sub-page item, I'm really stuck with this. I'm probably missing something really obvious but I've been playing around with this for a couple of days and all objectivity and patience has now gone and I need help!

All I want to do is to get rid of the background-image for the sub-pages and replace it with a block colour (and play around with the padding a bit). If anyone's had this same issue and came across the solution, I'd be very grateful if you could give me some pointers.

Thanks,
Angela
  #2  
Old Dec 18, 2010, 03:21 PM
furiousfrog
 
23 posts · May 2009
Hmm, re-reading this - it's not very succinct, sorry!

To clarify, I want to be able to style the drop-down menu that consists of child-pages, without this affecting the style of the parent "button".

Does anyone know the css selector to change this specifically? Everything I try seems to affect the parent button as well (although not the other top-level buttons?).

Sorry for the garbled first message and thanks for reading!
  #3  
Old Dec 19, 2010, 03:56 AM
furiousfrog
 
23 posts · May 2009
Quote:
Looking some further, your css definitions seemed a bit odd.
On your site, I saw definitions for background image in different places (li and a)
Hi STB,

You'd be right there - I really struggle with the way css works with atahualpa. Oddly, I'm reasonably competent with flat html and css but with ATA I really struggle with what applies to what and often it ends up being trial and error: adding rules in, leaving them if they work and taking them out if they don't.

Have attached exported settings - if there's anything you could suggest to tidy this up, I'd appreciate the help!

Thanks,
Angela
Attached Files
File Type: txt ata-websandwichcouk-20101219.txt (18.1 KB, 455 views)
  #4  
Old Dec 22, 2010, 06:15 AM
juggledad's Avatar
juggledad
 
23,755 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
It's very easy, all you need do is add another set of rules for the child element and it will effect all the sub children. Try this, add this to your CSS inserts
HTML Code:
/* ================================================ */
/* Page Menu item - level 2->>                      */
/* ================================================ */
ul.rMenu li ul li a:link, 
ul.rMenu li ul li a:hover, 
ul.rMenu li ul li a:active, 
ul.rMenu li ul li a:visited, 
ul.rMenu li ul li {
	background: red !important;
	color: #ffffff !important;
	height: 37px;
	position: relative;
}
this will leave the parent as is, but the sub-menu's will be red

Here is another hint. You picked up on using
HTML Code:
?php bloginfo('template_url'); ?>
so you don't have to change the address during future upgrades, but you can extent this so you don't have to move the images!

Instead of using
HTML Code:
<?php bloginfo('template_url'); ?>
1) create a folder in the 'wp-content' folder called 'my-atahualpa-images'
2) create a folder in the 'my-atahualpa-images' folder called 'images'
3) put all your custom images there (sorry as of 3.5.3 it doesn't work for the header images...in a future release?!?)
4) change the line to
HTML Code:
<?php bloginfo('wpurl'); ?>wp-content/my-atahualpa-images/
That's it. Now the next time you upgrade Atahualpa, you won't have to move the images (except the header and logo)
__________________
"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 7, 2011, 12:35 AM
furiousfrog
 
23 posts · May 2009
Juggledad - you're a star, thank you SO much, will be donating now!

Worked perfectly, and I love the tip about the image folder - am planning to spend a couple of days changing this on my sites now!

There is just one tiny tweak that I've still been puzzled by. In the drop-down menu, the buttons sometimes overlap each other when you hover over them and the text size is too large. If I drop the text size down, it's ok, but if I use padding to fix it, the buttons hang out of the drop-down menu block.

It's only a small niggle and if you're busy, please don't worry about it - I haven't spent lots of time fiddling with this yet, so am still hoping to fix it.

Once again - thank you so much!
Angela

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to turn link of pages in page menu on or off e.g. turn parent off & child on Deansta22 Page & Category Menu Bars 8 Jan 18, 2011 03:01 PM
Details about centering the menu on menu bar (child drop-down menus become unalligned jstein Page & Category Menu Bars 2 Oct 24, 2010 10:56 AM
Child pages don't keep parent page in menu highlighted ribbu Page & Category Menu Bars 12 Dec 15, 2009 01:43 PM
Child Page Menu items appear all same colour aebrigham Page & Category Menu Bars 13 Aug 21, 2009 03:42 PM
Page Menu Drop Down Only Showing First 6 Child Pages LabbyRoad Page & Category Menu Bars 4 Mar 11, 2009 12:40 PM


All times are GMT -6. The time now is 01:19 PM.


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