Juggledad's colored menu cheat sheet
Here is my handy little cheat sheet for dealing with the two menu's and the parts. Put this at the end of your css and you can see graphically, what effects what. It should be enough to get you going.
HTML Code:
/* ================================================ */ |
I added these lines as CSS inserts on the Atahualpa them however the changes are only affecting the results in Chrome - not in IE. Is there an easy fix to this that you can share?
|
I just fixed it, IE doeswn't like the '#' sign before the NAME of the color, so while all the other browsers will let you have '#red', IE ignores it so you have to code it just 'red'. sigh have I mentioned how I hate IE?
|
Hey JuggleDad!
First off - thanks so much for posting this - very helpful. It'd really help if somewhere there were a guide to what the specific CSS markups are for all menu items, including subs. It's easy to get confused about the differences between page items and sub-menu items. Thanks again. |
Hello Juggledad
I have pasted this at the end of my CSS, saved the modified file and nothing happens /* ================================================ */ /* Page menu background */ /* ================================================ */ div#menu1 { height: 40px; margin-top:0px; background:#8cbb15 } Here's the website I'm working on : www.enjoy-english-blog.fr I'd like to have the whole Pages Menu + horizontal line in the same light green color #8cbb15 (and have my Pages Menu fonts in bold) Thanks for your help Pierre |
When you say you "pasted this at the end of my CSS" where do you mean?
This should be pasted into ATO>Add HTML/CSS Inserts>CSS Inserts |
Pierre,
i got the same problem i solved this way: ATO>Add HTML/CSS Insert in CSS Inserts look for this line div#menu1 { background: #eee; replace #eee with #8cbb15 and the grey uppr line is now completely green... :) a bientot Franco Here's the website I'm working on : www.enjoy-english-blog.fr I'd like to have the whole Pages Menu + horizontal line in the same light green color #8cbb15 (and have my Pages Menu fonts in bold) Thanks for your help Pierre[/quote] |
thank you very much, I had pasted it into Style.css....!
I'll delete it from there and do as you say Thanks a lot, à bientôt :-) Pierre PS : just did it, took me 2 minutes and works great !!! Thanks again Pierre |
I got problems with this.
Here is my code: Code:
/* ================================================ */ IE When I hover on left side (Internetas) it looks like it should be http://www.ipix.lt/thumbs/10179981.png But... When I hover on Programavimas or Tinklapiai, just right side, no hover image. Why? http://www.ipix.lt/thumbs/40090480.png Firefox Same code but different problems. No hover, my gradient image just dissapears where is a text http://www.ipix.lt/thumbs/47478262.png And when I hover on text (left or right side), it's just a color, not a green gradient which is in IE http://www.ipix.lt/thumbs/71111000.png I really need to fix this, please help me. Thanks |
What is the URL?
Are you using the atahualpa or wordpress menus? Do you have the two menu fixes applied? (see new version and updating forum) |
URL was sent to your pm. It's still not public, so I don't want to share it.
Wordpress menus When I was writing last post - no. I added now http://forum.bytesforall.com/showthread.php?t=8756 but it didn't fixed my problem. |
Remove the commas after the '}'s that is improper CSS and is causing issues
next re order your statements Quote:
|
At last it works. Thank you.
One more small problem Now my site code is: Code:
/* ================================================ */ I guess that when I'm in page which is in menu, that page link changes to menu-gradient-visit.gif |
I am not sure if this is what is giving you the problem but the syntax for the background should have the color at the beginning like the following.
HTML Code:
#menu2 ul.rMenu li a:active { This is the info from w3schools.com concerning background shorthand syntax... When using the shorthand property the order of the property values are: * background-color * background-image * background-repeat * background-attachment * background-position It does not matter if one of the property values are missing, as long as the ones that are present are in this order. |
Code:
/* ================================================ */ |
I am kink of at a loss now without seeing the site.
|
You can view my site in this link.
|
Shouldn't your active image be menu-gradient-visit.gif?
|
Yes, changed. Not fixed :(
|
try moving the
HTML Code:
#menu2 ul.rMenu li { |
Code:
/* ================================================ */ |
Which version of Atahualpa are you using? something is not correct in the way your menu's are being built. the atahualpa classes like 'current-menu-item' are not being built.
Do you have any plugins that may be effecting the menus" |
Atahualpa 3.5.3
No, not plugins problems. I deactivated all plugins 1min ago and menu still don't work. |
Something is not right a d I will need to take a look. Please send me a PM with an admin ID and pw
might not be able to look at it for several hours |
Sent.
....... |
take a look now, is that what you wanted - the current page menu item to be hi-lighted? See the CSS for the change, I used 'li.current-page-item a'
|
Yes, works now. Finally, my menu looks like it should be :) Thanks.
|
Since I used Juggledad's cheat sheet (which is great...thanks!), I thought I would post this question here, rather than start a new topic.
First off, here is the CSS from the CSS Inserts (Atahualpa 3.6.4): Code:
/* ================================================ */ http://liveinoakpark.com/ The flat tan color comes in on hover for parent menu items, but not regular links. Ideally, I'd like a second image BG for hover, but I tried that and couldn't get it to work. The flat tan background color is 8 pixels "taller" than it should be: I have had to make "%bar2" taller than it should be to hide the tan BG...but it only effects the links that are not "parents". "%bar1" (above the menu bar) is likewise getting cut off by the "parent" links. Lastly, the "child" menu items are 8 pixels below the menu bar. I'm certain I'm missing something quite elementary and that my brain is just addled...but I just cannot find the problem. Any guidance is greatly appreciated. |
Well, I was able to get this sorted out on my own...
Code:
/* ================================================ */ |
I need to use images for background of each tab, and darker image for active parent, but I'm struggling with both the active tab (doesn't change) and the dropdown submenu items are using the background image as well which I don't want - only for main tab.
here where I'm at right now: Code:
ul.rMenu li { I'm missing something obvious aren't I :-( Appreciate any help. - Vincent |
Hi,
I'm trying to do something a bit more tricky than the standard menus. I need to separate out the behavior of the parent page menu items from the behavior of the children. Specifically, the font size, padding, borders, hovers, visited links, and background colors of the child menu items all need to be drastically different than the parents. (see http://windcoalition.org for the current site, built using a non-WordPress CMS. ) Thankfully I don't have to mimic the way they have some of the menu items in smaller font than others. I can just tweak the padding/margins/borders to fill the horizontal space. I've got the gradients working on the development site, but those are currently being applied to the children as well as the parents. I've gotten most of the child menu stuff working now, thanks to some hints I pulled from this post: http://forum.bytesforall.com/showthr...ght=child+menu The last thing I need to figure out is how to put a border beneath JUST the last element in a submenu. I'd appreciate any pointers on that! Thanks! |
each menu item as a unique class - I would target the class with your CSS
|
All times are GMT -6. The time now is 08:22 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.