I want to target the 'Fields' icon with the gear and update that icon to another color.
I tried the traditional way, but may be missing the element selector to change just that icon (Don't want to change all the icons colors). Just want to change the icon 'Fields'?
Thanks
Hello, Cedric,
Thank you for writing to us.
Each Toolbar Tab has an id, for example, the "Fields" Tab's id is defined as fm-tab-fields
.
We kindly advise using the id to change the colors of a specific Tab icon:
#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a svg .fill-background {
fill: #B2D2F8;
}
#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a svg .fill-border {
fill: #7FA3D7;
}
#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a:hover svg .fill-background,
#fm-toolbar-wrapper #fm-toolbar li#fm-tab-fields a:hover svg .fill-border{
fill: #345CA1;
}
Here is a JSFiddle showing how only the "Fields" Tab icon's color is changed: https://jsfiddle.net/flexmonster/a2jcw4rn/
Please let us know if this works for you.
Looking forward to your reply.
Kind regards,
Vera
Hello, Cedric,
We would like to add that it is also possible to create a custom Flexmonster theme and use it in your project instead of the default one.
Recently, our team has added a custom theme builder app, making it easier to create your own Flexmonster themes: https://github.com/flexmonster/custom-theme-builder
You can add the needed additional styles to the end of the flexmonster.less
file, build the custom theme and use the generated CSS files in your project.
Such an approach allows keeping Flexmonster styles in one place.
Please let us know if this helps.
You are welcome to write to us if additional questions arise.
Kind regards,
Vera