Customize Icon Menu List

[Darren22]

Good morning,

I have recently started to look at update our Portal and one way I thought about doing this is by using the Icon Menu List widget. When changing the bootstrap colour I notices that its only the icon that changes colour. So the menu header and roll over colours remain plain grey which is pretty boring.

Has anyone customized this widget before and if so how? How would I go about changing the header colour as well as the mouse roll over colour?

[John Longhitano]

Hi Darren,

You could do a few things.

1. Open the 'Icon Menu List' widget in the widget editor.  On the context menu select Clone widget and give it a new name.

2.  In the CSS script of the widget editor try using:

.panel-heading{

color: #33006F;

}

Replace the hex code with whatever color you want.

3.  For the hover color you could try targeting the css of the icon:

.fa-circle:hover{

color: black;

}

Again replace the hex code with whatever color.

This may not be exact code to work but hope this helps and gives you a better idea.

Down the line you could probably create options for it to easily change the colors in case branding ever changes but I won't get into that here.

[John Longhitano]

Also, if color doesnt work for the icon hover try background-color property instead