SOLVED Menu Text colour setting
-
-
- Leo List
- Rocketeer
- Posts: 58
- Thanks: 0
-
Using the latest version of Ethereal (v1.2.3 / rt_ethereal).
Trying to change the look of the top level menu and have added one of the pre-defined variations to the block definition. I changed it to "Box Blue". All works as expected but would like to change the text color. I'd appreciate a hint on where this is set.
Also, the dropdown menus don't change to the color of the main menu. A solution to this would also be great
Thanks,
Leo
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Please do a screenshot of your problem and annotate to make it clear.
Text color in what state? normal? hover? active? main level? dropdown level?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Leo List
- Rocketeer
- Posts: 58
- Thanks: 0
-
Don't seem to be able to upload a screenshot, but when you go to the site it's pretty obvious.
The main menu is blue, submenues are grey.
Mind I just did this and I now can't see any of the submenus.
Thanks
Leo
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok, it's not obvious to me? What color of what and where do you actually want to change? the background or text color? and then in what state if text color.
The dropdowns disappeared because you added "rounded" class to the menu so Use this code...
.rounded .g-content { overflow: visible; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Leo List
- Rocketeer
- Posts: 58
- Thanks: 0
-
Sorry about the vague questions and also the fact that I ended up qith twi issues in the one post
- Color. I'd like the text for the menus to be white
- Disappearing sub-menus. I only used what's available via Ethereal. Are you saying I should not use the variation and code this myself?
Thanks,
Leo
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
1. menus to be white in what state please? NORMAL? HOVER? ACTIVE? TOP LEVEL? SUB MENU LEVEL? BOTH LEVELS?
2. No, I was just telling you why it happened and the solution to it.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Leo List
- Rocketeer
- Posts: 58
- Thanks: 0
-
Submenus are back. Thanks.
In the first screenshot, the main menu shows the selected submenu in green and the rest of the menu items are shown in black (or something similar). I'd like to know how/where I can change both the green and the black
The second screenshot shows the submenu. I'd like to know how I can change the background of the submenu together with the text to the same colours at the toplevel menu.
Thanks,
Leo - Last Edit: 6 years 10 months ago by MrT.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I'll just give you them all and you can change what you want to then...
#g-header .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: pink; } #g-header .g-main-nav .g-toplevel > li.active > .g-menu-item-container::after { background-color: pink; } #g-header .g-main-nav .g-toplevel > li > .g-menu-item-container { color: orange; } #g-header .g-main-nav .g-dropdown { background-color: turquoise; } #g-header .g-main-nav .g-sublevel > li > .g-menu-item-container { color: red; } #g-header .g-main-nav .g-sublevel > li:hover > .g-menu-item-container, #g-header .g-main-nav .g-sublevel > li.active > .g-menu-item-container { color: yellow; } #g-header .g-main-nav .g-sublevel > li:hover > .g-menu-item-container, #g-header .g-main-nav .g-sublevel > li.active > .g-menu-item-container { background-color: purple; }
To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Remember to recompile CSS from base outline too.
When developing web sites it is useful to learn to use either, the Inspector in Firefox, Chrome Developer Tools in Chrome, or one of the other browser developer tools, they will save you hours on things like this and they're very easy to use.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Leo List
- Rocketeer
- Posts: 58
- Thanks: 0
-
Thanks for your solution, but it really only addresses one part of my problem.
I set everything back to the standard ethereal template. The default looks like the first screenshot with the vertical menu without a box. The second screenshot show the dropdown, which (obviously) needs a box around it.
What I'm really after is a horizontal menu that looks like the third screeshot with a blue box and white text and a dropdown menu in the same color and text
Thanks for your help.
Leo
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I gave you all the CSS to change every aspect of the menu color. Did you try it? I gave each a weird color so you could see which statement did what.
You need to invest some time in learning to use a web inspector tool and to learning some basic CSS.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.073 seconds