Heading icon circle color and icon color

[planetshay]

Is it possible to change the color around the icon on each page? I do not like the orange.

Also, when I bring in a new icon, it doesn’t change to the blue color like the ones preinstalled, how can I get mine to do the same?

And what is the recommenced size of an icon I add? I put one on one of my pages and it cut it off?

[Andy]

This is the standard css styling for the color around the icon:

.header-title .fa,
.header-title .main-title-img{
    box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.45);
}

It uses rgba color so rgba(255,255,255,0.45) is white with a 0.45 opacity so that it appears to let the background color through slightly and with a lighter shade.

change the rgba(255,255,255,0.45) part to any color

as well as rgba the color can be defined as rgb or hexadecimal
e.g. rgba(11,72,158,1), rgb(11,72,158) and #0b489e are all the same blue color.

[Andy]

If you are using your own image instead of the preinstalled icons, then the color of the image cannot be changed by the theme. The image that you upload will need to be in the color that you want to use.

There is no recommended size for your own image, but it is recommended that it is of equal height and width e.g. 100×100, 300×300 etc.

[planetshay]

Great! Thanks so much 🙂

[Author]

Posts