Change Icon Color

[louder]

i am not a programmer but is there an easy way to change the icon and button color? it is light blue and i need it #99098A

thanks,
will

[schadwick]

I don’t work for the seventhqueen team but I can help, depends on which buttons and icons you are trying to change.

[louder]

i would like to try and change the icon color in the “feature item” widget

thanks for your help.

[schadwick]

So it looks like the “feature item widget” uses a couple different css selectors for styling.

To change the color add this to your style.css file under Appearance > Editor or in the Quick CSS section in the Theme Options.

COPY CODE

.feature-icon {
color: green; 
}

Keep in mind that those icons are actually a font so the size can be changed by adding

COPY CODE

.feature-icon {
font-size: 40px;
}

Finally by default, Kleo has set the feature item icon to have an opacity(transparent) of .1 so to change that add this

COPY CODE

.el-appear {
opacity: 1 !important;
}

Hope this helps!

[louder]

Hey there.

thank for you help. So it appears that it worked for some of my pages where i had the features set up but not all. also, do you know how i can change the color when you round over the icon feature?

thanks again,
will

[sharmstr]

Why not use the built in way of doing it?

Theme Options > Styles

Either change the change the main or alternate sections. For featured items, make sure you set your row to use the appropriate style (main or alternate)

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[louder]

hey there,

i actually tried doing this and it didn’t take. i basically changed the color that came with the demo content to the color i want. it show correctly in the style however it does not seem to be showing up. i cleared the cache…so that was i was question if there was another way of doing this. is the style section, what line should i be updating to change the icon (please see below).

again thank you for your help.

Text color*

Transparent
Background color
Default: #ffffff

Transparent
Background image

Upload
Border color*

Transparent
Link colorSelect your color for text elements
Default: #367bb7

Transparent
Hover link color
Default: #00b9f7

Transparent
Highlight color*

Transparent
Highlight background color
Default: #00b9f7

Transparent
Alternate background color
Default: #f7f7f7

Transparent
Alternate border color*

Transparent

[sharmstr]

respond privately with a link a credentials

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[louder]

Hi there,

Since i was just started with the site i actually just reinstalled with the 3.0 and did not load the demo content and it appears that i can just use the system to change the color. this was not working before. again many thanks for your help.

best,
will

[Author]

Posts