Good morning.
I am struggling to change the colours of the zen accordion menu. Both for the menu text and the drop down arrow.

I am using the Keon template and zen-accordion menu class suffix. The drop down arrows have a blue background(primary) which goes green (secondary) at hover.


How do I change these. I have tried all the template menu settings but they doesn't seem to be any control for the accordion menu.

How do I control the accordion menu text colour?

Many thanks John

Hi John,

You need to change the styling in the theme in the module itself

Are you familiar with how to do this?

You will probably want to use the custom css in the module

Cheers
Paul

Thanks for the reply Paul.
I would appreciate a few pointers in the right direction. I'm using a menu module and it isn't obvious where to put CSS, and my coding knowledge is basic!. I have attached a view of the advanced tab currently. ?

Ideally I would like to do the following:

I also have an accordion published to the 'bottom2' template position. The line spacing is different and the menu lines have bullets. I thought I was missing some template settings.

If you want to see it I will have to update the online test version?

John

Thanks for the reply Paul.
I would appreciate a few pointers in the right direction. I'm using a menu module and it isn't obvious where to put CSS, and my coding knowledge is basic!. I have attached a view of the advanced tab currently. ?

Ideally I would like to do the following:
- reverse the drop down button colour and hover colour
- reduce the vertical line spacing

I also have an accordion published to the 'bottom2' template position. The menu items have bullets when published here.
- to remove the bullets

If you want to see it I will have to update the online test version?

John

ah sorry John

I thought you meant the zentools accordion - sorry didn't read the question correctly

Can you add the link for the site?

Cheers
Paul

Hi Paul. This is the link.
www.wainwrightlandscapearchitecture.co.uk/WLAtest/index.php/news-and-blog

There is an accordion menu in sidebar2 and one in bottom2.

I would like the arrow button green then blue on active in both accordions. The opposite to current setting.

I want the menu text to look a bit more consistent with the main menu.The text grey/black in sidebar2, orange/blue on active like the main menu.

I think the line spacing in bottom 2 may want increasing so the buttons sit better.
How do I remove the bullets?

Thanks John

Hi John,

To reverse the colours would mean changing the primary and secondary colours so instead try adding

.zen-accordion li.parent span.zen-accordion-trigger:before {background:#96ca2d;}

.zen-accordion li.parent.open span.zen-accordion-trigger:before {background:#227fbb;}

This would be to the custom.css file - sorry forgot to add that

For the link colours try adding

.zen-accordion li a {color: #333; font-size:120%;}

#mainwrap .zen-accordion a:hover {color:#faa005;}

again to the custom css file

To remove the bullet its

.sidebar .moduletable .zen-accordion li {list-style-type: none;}

If you want to remove the margin

.sidebar .moduletable ul.zen-accordion ul {margin-left: 16px !important;}

This is the current style so if you replace 16px with the required value

If you want to remove padding

.sidebar .moduletable ul.zen-accordion li li {padding-left:4px;}

is the current value

Cheers
Paul

Thank you Paul. That put me in the right direction. I wanted the menus consistent and simpler colours. A few more changes and it is close to what I want.

Many thanks
John

Are you all ok or do you need more help with those changes?

Cheers
Paul

HI Paul. I think I'm ok thanks.

There may be a better way to write it but its all running ok on the test.

www.wainwrightlandscapearchitecture.co.uk/WLAtest/index.php/news-and-blog

I just need to work on updating the rest of the content now!

John

I further simplified the hover and link colours.

John

Thanks John

Best of luck with the site

Cheers
Paul