|
#1
May 10, 2010, 01:56 AM
|
|
|
|
133 posts · Apr 2010
California
|
|
Ack. I've spent an hour pouring through posts to try to style my sub-menus, and I can't figure it out. For example, I want my background color for the sub menus to be different than the menu bar (Or possible even a background image in the sub menus). What if I want borders around the menu items in the sub menu but not the menu bar, or vice versa? The font size smaller in the sub menus, the link colors, etc.
What's the starting code to put into my css inserts????
Thanks!
|
#2
May 10, 2010, 05:21 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#3
May 10, 2010, 11:59 AM
|
|
|
|
133 posts · Apr 2010
California
|
|
That didn't help JD. I know about those inserts to style the menu bar. My issue is that they style both the parent menu bar and the drop-down children menus. What I want to do is style the children/drop down menus *only*.
Here's the site I am working on. Notice how awful the drop-down menus look:
http://myasha.org/tempasha/
Emanuel
|
#4
May 10, 2010, 12:32 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
I know this isn't what you want to do but how about using a darker version of your menu bar background color for "Background Color: Hover" and "Background Color: Parent"? Something along the lines of #FD8604.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#5
May 10, 2010, 12:39 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
Yeah not at all what I want to do. I like the parent menu bar as-is. I want to radically change the drop-down menus.
|
#6
May 10, 2010, 01:02 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
This might be a place to start of course changing the colors as needed.
HTML Code:
li.rMenu-expand li a {
background-color:#FDA94D !important;
}
li.rMenu-expand li a:hover {
background-color:blue !important;
}
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#7
May 10, 2010, 01:27 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
That's exactly what I needed. Don't mark this thread as solved quite yet. Let me do some work and then post another reply. But that's what I was looking for to get started. Thanks!
|
#8
May 10, 2010, 01:58 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
Ok I am almost there. Check out the sub-menus now:
http://myasha.org/tempasha/
There are only two remaining problems. One seems like a bug. Basically, the drop-down menus are offset to the right about 10px. This is fine, except it puts a white stripe down the left side of the drop-down menu. Go look. I either want this stripe to be transparent or else I want to get rid of the off-set so it's not there.
Lastly, I want to turn off the hover properties for the first-level parent item. Since I have these links turned off, I don't want the text to change color when someone hovers over them and the drop-down appears.
How can I accomplish these two things?
Oh, and here's the css I used to create the current effect, in case anyone is curious.
li.rMenu-expand li a {
background-image:url('http://www.myasha.org/images2/menu_gradient.png') !important;
background-repeat:repeat-x !important;
border: solid 1px #000000 !important;
}
li.rMenu-expand li a:hover {
background-image:url('http://www.myasha.org/images2/menu_bghover.png') !important;
background-repeat:repeat-x !important;
background-color:#a3d7f1 !important;
}
|
#9
May 10, 2010, 02:37 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Try modifying the selectors as shown changing the colors as needed.
HTML Code:
li.rMenu-expand li a {
background-color:#FDA94D !important;
margin-left:-15px !important;
color:black;
}
li.rMenu-expand li a:hover {
background-color:blue !important;
color:red !important;
}
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#10
May 10, 2010, 02:42 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
The margin-left line did the trick for the drop-down menus. Thanks miles! Any suggestion on removing the hover properties for de-linked parent items?
|
#11
May 10, 2010, 02:45 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
to get rid of the stripe, change your css insert of
HTML Code:
ul.rMenu li {
background:transparent !important
}
to
[html]ul.rMenu li ul {
background:transparent !important
}
[/html]
Do you want the sub-sub menu to act that way? ie: Our Work/Rally for Recovery
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#12
May 10, 2010, 02:47 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
That's what the color statements are for. If you don't mind the text always being black even for hovered submenus you can eliminate the color statement from the second (hover) selector.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#13
May 10, 2010, 02:58 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
JD, that change didn't work, though the left-margin that lmilesw suggested did.
lmiles, I want a link hover color for menu items without children. I just want to get rid of the hover-color for the items that *do* have children. I have set these first-level items as "Do not link" yet they still appear as links when they are hovered. Seems like a bug. Shouldn't they not appear as links when you set "Don't link first level parent items in Page Menu Bar?" to "yes"?
|
#14
May 10, 2010, 03:03 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
Sorry JD, your code did, in fact, work. I had a syntax error. Thanks. Now I get the offset without the stripe.
|
#15
May 10, 2010, 03:18 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
Try this for your hover issue.
HTML Code:
li.rMenu-expand a {
color:black !important;
}
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#16
May 10, 2010, 03:35 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
Great that did it. I see what you mean how the sub-menu items also remain black, but that's ok because I have a background hover change on the subs.
Two more questions...
1) How can I get "right-arrows" to appear in my second-level parent menu items? And,
2) How can I style the third-level menus? Ccheck out my "sub-sub" menu underneath the "Our Work" tab and then popping out to the right of "Rally for Recovery"... How can I bring that third-level menu closer to the left and offset it downwards a bit? I basically need to adjust the margins but I'm not sure how to assign the css insert.
Lastly, I want to donate more money to you guys. I am so impressed with Ata and the responsiveness I have received on this forum I want to support the people putting in the effort. Are general donations fine or should I specify the money is for forum moderators? Or should I donate to specific forum moderators? JD you have a link. lmiles I don't even know if you are a moderator or just a helpful member. It's kind of strange being able to donate to specific moderators. I like it when restaurants split tips equally among all the waiters.
|
#17
May 10, 2010, 04:17 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
I'm having a tough time finding where the right arrows went to. As for donations you can donate to the forum in general or Juggledad (moderator) by going here. I am just a very happy user of Atahualpa.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#18
May 10, 2010, 07:41 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
You mean the right arrows were there at one time? Now that you mention it, I think I remember them being there. Here are my css inserts. The problem must be with one of these:
ul.rMenu li ul {
background:transparent !important
}
li.rMenu-expand li a {
background-image:url('http://www.myasha.org/images2/menu_gradient.png') !important;
background-repeat:repeat-x !important;
border: solid 1px #000000 !important;
}
li.rMenu-expand a {
color:black !important;
}
li.rMenu-expand li a:hover {
background-image:url('http://www.myasha.org/images2/menu_bghover.png') !important;
background-repeat:repeat-x !important;
background-color:#a3d7f1 !important;
}
|
#19
May 10, 2010, 08:06 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
What happens if you yank out the background image lines temporarily?
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#20
May 10, 2010, 09:42 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
They reappeared when I removed the background images. In fact, I narrowed it down to the first background image. The one here:
li.rMenu-expand li a {
background-image:url('http://www.myasha.org/images2/menu_gradient.png') !important;
background-repeat:repeat-x !important;
border: solid 1px #000000 !important;
}
It's this image that is somehow hiding the arrows.
|
#21
May 10, 2010, 09:54 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
But more importantly than the arrows... how can I add some margins to the third-level "pop-out" menus? I don't like the location it pops out too. I want it right next to the second level menu and about 15px down.
|
#22
May 10, 2010, 09:56 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
That's kinda what I figured. You have two background images competing and I'm not sure how or even if you can layer them so the arrows show on top. What about just setting a background-color instead of the images. I know it's not quite as nice looking but maybe.
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#23
May 10, 2010, 10:35 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
My background images were nothing special, so I went ahead and changed them to just colors. Now the arrows are there. I did have all kinds of thoughts, though, for future sites using better background images there. Too bad. Isn't there a new menu system Ata is thinking about switching too for future upgrades?
And do you have any thoughts on my third-level menu styling issue? If it's possible, I know it is something like this...
li.rMenu-expand li a [SOMETHING ELSE GOES HERE] {
margin-top 15px !important;
margin-left -15px !important;
}
|
#24
May 11, 2010, 12:33 PM
|
|
|
|
10,176 posts · Jul 2009
Central New York State USA
|
|
For third level styling this works. It is probably not all needed but I didn't want to spend time figuring out which specific selector. I let you fiddle.
HTML Code:
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li a, div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li a, div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li a, div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li.rMenu-expand li a {
color: red !important;
}
__________________
~Larry ( CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
|
#25
May 11, 2010, 12:45 PM
|
|
|
|
133 posts · Apr 2010
California
|
|
Thanks Larry. I fiddled around and it didn't take me long to find the selector that worked. Here's the full insert I used:
div#menu1 ul.rMenu li.rMenu-expand li.rMenu-expand ul {
margin-top:8px !important;
}
Consider this thread [SOLVED]. Even though the little arrows prevent using a background image, this is good enough for me.
|
|