Sometime css rules I have set are overruled by ‘cc-xxx’ classes. eg. cc-cntr, cc-icon. Could anyone help me understand where these come from and how I can change their css? I can’t find out where they are or how they are set?
For example, I have set some icons to change colour and background colour on hover. It works in the backend but on the live site the icon colour is overruled by this ‘.cc-icn svg’:
.cc-icn svg {
fill: var(–cc-color-8) !important;
I can’t find anywhere I have set this?
you should setting by yourself globally.
maybe this will help you for it
Thanks @qiang814k Unfortunately I still can’t find these settings. I have a few stylesheets and extra css but none that I can find affect the icon background or cc-xxx classes
Hi @heeeresjonny,
Those are created by Cwicly.
The .cc-cntr is for the container block. You can configure the defaults for the Section and Container in Global Styles > Elements:
The svg fill comes from the icon settings for the block:
Thanks @StrangeTech
I can see the css for the icon block settigns and it is correct but it is overruled by .cc-icn svg. This makes me think I have a global setting for icon fills but I can’t find it.
What’s more it works on the backend but the css on the live site is different. This is on the backend:
On the live site:
Block settings:
@heeeresjonny, that is unusual. Many versions ago, there was an issue with the order of the stylesheets, which was fixed. Perhaps there is a regression or perhaps a plugin is conflicting and causing this.
@Araminta & @JohnD, there are a few instances on the forums of differences between the frontend and backend styles. I am wondering whether they may be symptoms of the same issue.
Hi @heeeresjonny,
Sorry to hear you’re experiencing trouble with this.
Could you possibly share a frontend link to this page (through PM if you prefer), so I may investigate this further?
Thank you in advance.
Thank you for providing that so promptly, @heeeresjonny!
It seems this is coming from the custom CSS you have added for your search icon block:
Could you possibly check the custom CSS for that block, and see if you haven’t mistakingly applied it?
Thank you in advance.
I thought it might be but I don’t have any custom css on the icon or container blocks. It also works properly on the back end, just not on the published page.
You’re welcome to look at the back end if there’s something I might have missed.
This does seem strange
That would be great, thanks!
Sorry for hijacking here 
I think the styles come from the mobile menu toggle right next to the search icon:
You can always check if there is custom CSS applied to a block via the Navigator.
Ah that’s it! I didn’t realise I’d applied that to the whole cc-icon class 
Sorry everyone for the trouble.
