+ Reply to Thread
Results 1 to 9 of 9

Thread: How to change icons colors

  1. #1
    Senior Member
    Join Date
    May 2014
    Posts
    182

    How to change icons colors

    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?

  2. #2
    Guru
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    2,028
    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?
    Getting Started or Starting Over with Your Classified Site? then Get Ready Set Fly V 4.7.1 > quietSecrets.net

  3. #3
    Quote Originally Posted by Pete Young View Post
    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

  4. #4
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    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/...using-css.html
    Last edited by Graham Jupp; February 19, 2020 at 03:46 AM.

  5. #5
    Senior Member
    Join Date
    May 2014
    Posts
    182
    Thanks everyone!

    https://classifieds.demoflynax.com/t...mg/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?

  6. #6
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    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/...e_function.cfm


    find this:

    Code:
    Only registered members can view the code.
    replace with:

    Code:
    Only registered members can view the code.

  7. #7
    Senior Member
    Join Date
    May 2014
    Posts
    182
    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!

    color-issue.jpg

  8. #8
    Quote Originally Posted by Pragash Jayaraman View Post
    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!

    Attachment 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.

  9. #9
    Senior Member
    Join Date
    Sep 2019
    Location
    Australia mate.
    Posts
    164
    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.

+ Reply to Thread