Changing colours of icons and text for individual elements

EthanWSL · January 2022

Hello,

I want to 'invert' the colours of my website on a block.

So my icons are usually set to an orange but I want to change them in this section.

How do I do that?

Thanks,

Ethan

EthanWSL · January 2022

Just to be clear, it is the icons and titles in an icon box

Phil · January 2022

Hi,

If you would like to change them only for a particular section, you will have to add a class to this section and write a custom CSS code for it.

If you need help with writing such CSS, please, add the custom class, and send a link to a page where you want to apply it.

Thanks

EthanWSL · January 2022

https://www.sadataloggers.co.za/

I would like to change the icon text in the orange section to #eaeaea and the icons themselves to #027d9e please

Phil · January 2022

You did not add a class to this section, so please, do that, and use the following CSS code:

.exampleClass .icon_box i{
   color: #027d9e;
}

I have added the exampleClass to your page with the Inspector.

Put this code in the Custom CSS section for that page.

Thanks

EthanWSL · January 2022

Sorry by adding a class, I'm not sure what you mean?

Phil · February 2022

You should open section options, and add a class (you can name it however you want), like on the screenshot on this message:

https://forum.muffingroup.com/betheme/discussion/comment/209658#Comment_209658

Thanks

EthanWSL · February 2022

Got you! Didn't realise it could be anything you want. Thanks

Phil · February 2022

I can see that you handle it. ?

I am glad I could help.

If there is anything else, I can help you with, please, let me know.

Thanks

EthanWSL · February 2022

Thanks :)

For other CSS code, is it easy to generate? Just so I don't have to contact you for the code to use each time.

For example, if I wanted to change the icon box headings for that section too?

I can see how to change these in inspect but it does it for the icon headings further up too.

Phil · February 2022

The key is to locate a specific class/classes responsible for a particular element.

It requires some practice, you can read more about it under the following link:

https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

However, we are currently working on a new big update where you will be able to customize such things as the headings colors, font size, etc., so soon modifying them with CSS will not be necessary.

Thanks

EthanWSL · February 2022

OK thanks for the information.

Could you please provide the icon box heading code?

New update sounds very helpful!

Phil · February 2022

Here you go:

.Class1 .icon_box .title{
   color: #fff!important;
}

Best regards

EthanWSL · February 2022

Thanks!

Changing colours of icons and text for individual elements

Comments