PDA

View Full Version : How to change icons colors



Pricky
February 18, 2020, 04:27 PM
Hello All, I'm customizing the colors for my site with CSS. (General Nova Template)

Now all the icons are in blue, I wanted to change it in green, I can't find the css code to edit the color.

Can anyone help me out?

Pete Young
February 18, 2020, 11:40 PM
all if the icons come from a single image? and there is no real way to change them unless you get one of the green themes and change that image out ? that might work? and that will depend if the images are the same and in the same order ? and they should be.

send a link to the icon your talking about and can confirm?

Wei Hong
February 19, 2020, 02:41 AM
all if the icons come from a single image? and there is no real way to change them unless you get one of the green themes and change that image out ? that might work? and that will depend if the images are the same and in the same order ? and they should be.

send a link to the icon your talking about and can confirm?

Pete is correct. But there is a psd file in the same folder where you can open with photoshop and change the color yourself, you need to do one by one then save it and use it instead

Graham Jupp
February 19, 2020, 03:44 AM
If its one file, you should be able to just adjust using the hue setting in photoshop on the layer and all should change at once.

This might help for changing the colour with CSS though https://www.w3docs.com/snippets/css/how-to-change-the-color-of-png-image-using-css.html

Pricky
February 19, 2020, 03:30 PM
Thanks everyone! :)

https://classifieds.demoflynax.com/templates/general_nova/img/gallery.png

In the same /img folder there's gallery.psd file.

This is the only file contains all the icons, here i have to change all the blue to green color right?

Graham Jupp
February 19, 2020, 10:57 PM
Seems you can do this with CSS, although I'm not very good with CSS at all so unsure if there is an easier way to apply this across all icons without adjusting each icon style. But this might help:

For instance if you want to change the shopping cart and sign-in icon colour from blue to green on the front page of classifieds general nova, look for the following around line 775 of style.css and add the filter: hue-rotate(240deg);

Play with varying numbers from 0 - 359 I guess until you get close to what you want. Or read more about hue-rotate at https://www.qhmit.com/css/functions/css_hue-rotate_function.cfm


find this:


#user-navbar > span.default:before,
.circle.cart-box-container > span.default:before {
content: '';
display: inline-block;
background: url('../img/gallery.png') 0 -242px no-repeat;
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0 10px 0 0;
}

replace with:


#user-navbar > span.default:before,
.circle.cart-box-container > span.default:before {
content: '';
display: inline-block;
background: url('../img/gallery.png') 0 -242px no-repeat;
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0 10px 0 0;
filter: hue-rotate(240deg);
}

Pricky
February 27, 2020, 08:08 AM
Yes Graham, The "hue-rotate" works but i can't pick the right color.

@ Pete Young, Wei Hong

And i tried to apply the color for each icons which is in blue using photoshop, most of them i can change it to green but few (Heart, Location, User Account, Twitter) of them i can't apply the color in both gallery.png & gallery2.png

I don't know what's wrong!

3579

Wei Hong
February 28, 2020, 02:29 AM
Yes Graham, The "hue-rotate" works but i can't pick the right color.

@ Pete Young, Wei Hong

And i tried to apply the color for each icons which is in blue using photoshop, most of them i can change it to green but few (Heart, Location, User Account, Twitter) of them i can't apply the color in both gallery.png & gallery2.png

I don't know what's wrong!

3579

You can, I think they are line, try to hover your mouse to the color section on the left menu bottom and right click or left click to switch to line, you will see a full-filled color square on top and the line square behind.

Graham Jupp
February 28, 2020, 03:12 AM
Yeah they do appear to be vector shapes in photoshop in the PSD file. On the layers pallet, click the layer you want to edit (or select it in the image if you have "auto select layer" ticked when in select mode). The box to the left of the layer will denote the colour, click this box and select a new colour. A little different to what Wei Hong mentioned but both methods might work.