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] how to style child page links in menu? (http://forum.bytesforall.com/showthread.php?t=11781)

furiousfrog Dec 18, 2010 05:32 AM

[SOLVED] how to style child page links in menu?
 
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

furiousfrog Dec 18, 2010 02:21 PM

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!

furiousfrog Dec 19, 2010 02:56 AM

1 Attachment(s)
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

juggledad Dec 22, 2010 05:15 AM

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)

furiousfrog Jan 6, 2011 11:35 PM

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


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

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