CODEWITHSUNDEEP
menubackground-colorjoomla3.0
user2295585
user2295585

Reputation: 31

Changing Gantry v4 menu color

I can't seem to figure out how to change the menu color or add a background to the menu bar in Gantry 4 for Joomla. Tired of the gray or dark gray default.

I could change the font and selection through the .less file but not the menu itself.

The documentation on the Gantry website is too general.

Thank You in advance.

Upvotes: 3

Views: 5763

Answers (4)

Neil Robertson
Neil Robertson

Reputation: 3345

Use FireBug or similar to find the default CSS styling.

Create a file /templates/gantry/css/gantry-custom.css and add your own CSS to override the default CSS.

This is a better method than editing compiled or other template less or css files which can be overwritten during compilation or when the template is updated.

Upvotes: 0

open-ecommerce.org
open-ecommerce.org

Reputation: 1814

Hi Gantry framework for joomla as you probably notice uses Less to really understand how to change things on the template you first have to learn how less works even that Gantry compiles the less files for you. Less it is fantastic so it worth it. Basically you use a code to define css in a clever way much more economic and then you compile this into more efficient css files

If you change the compiled files as our friends are saying here make not sense at all because as soon you compile again (and you will) this files will be override and all your work lose.

I will give you the direction and you will see that it is not that difficult as look.

1- check the menu you had selected on your Gantry template under Templates Manager - Style - menu style.

2- on your less folder you will see a less file for each of the menu styles with the main variables for example menu-dark.less try to make sense of the variables and the colors and change them to see what is what.

3- on the same folder you have menu.less and there is where the magic is done using the variables from the previous file. You will see that for example define first level of menu you will have something like:

&.l1 {
    > li.active {
        background: @menuActiveBack;

So that menuActiveBack variable will be the background value of the active li of the level 1.

4- the last part will be the menu-hovers.less that i thinks it is over complicate things because it is not a need to have a different file to do the hovers but there it is.

You can control CSS compression, Compile Wait Time and Debug Header, as well as manually clear the cache with the Clear Cache button at Extensions → Template Manager → gantry → Advanced → Less Compiler.

more info at: ganty less documentation

Hope it helps to start with....

Happy coding,

Eduardo

Upvotes: 1

rdwilson713
rdwilson713

Reputation: 11

Also check: menu-light.less & menu-dark.less in the less\ directory.

The folks at RocketTheme don't recommend editing the compiled CSS (but it works great as @Adriana pointed out).

Upvotes: 1

Adriana Adrie Silva
Adriana Adrie Silva

Reputation: 11

it took me a while maybe half an hour to go through the "menu" css file in the "css-compiled" folder.

You can find all the css to alter the background and colors of Gantry's default menu.. I'm using Gantry v4 also.

Go here:

Joomla>templates>gantry>css-compiled>menu-675c76.....

Please view my image to see my results: http://dream2unite.com/images/misc/GANTRY-MENU-675c76.png

Upvotes: 0

Related Questions