This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Replies

7
  1. saomair 11 years, 11 months ago

    please check this screenshot and tell me http://www.webpagescreenshot.info/i3/532798c3ed63a8-03710985 and want to change hover color of that search icon as well

    thank you

  2. Ian Rossiter 11 years, 10 months ago

    Hi Saomair

    I have let Greg know that you have been waiting :) I will make sure he gets back to you today.

  3. saomair 11 years, 10 months ago

    Thank you Ian Rossiter

  4. saomair 11 years, 10 months ago

    Hope he will reply today so that i can move forward thank you

  5. Greg Priday Staff 11 years, 10 months ago

    Hi saomair

    Very sorry for the delays. The issue comes in because the search icon is actually an image, so there are quite a few steps in changing it. This is something we hope to simplify in our future themes.

    The first thing you need to do is download the search icon from the theme folder. Download a ZIP copy, extract it, then go to the folder images/sprites/search-icon.png.

    You’ll need to edit this image in Photoshop to change its color. You’ll need to create 2 versions. The original version and the hover version. To set these up you should create a child theme. You can read up on creating child themes here. Place the 2 images you created in the images/sprites/ folder of your child theme. They should be called search-icon.png and search-icon-hover.png.

    For your child theme’s style.css, you’ll need to have all the required headers, an import of the original stylesheet and a few extra lines for the new search icon images.. Something like this.

    /*
 Theme Name:   Vantage Child
 Template:     vantage
 Version:      1.0.0
*/

@import url("../vantage/style.css");

#search-icon #search-icon-icon .icon {
  background: url(./images/sprites/search-icon.png) no-repeat;
}
#search-icon #search-icon-icon:hover .icon {
  background: url(./images/sprites/search-icon-hover.png) no-repeat;
}

    Finally, zip up your child theme, upload it to your server and activate it.

  6. saomair 11 years, 10 months ago

    thank you very much

  7. Sung Lee 9 years, 7 months ago

    I need that code for North theme. So to change the search icon color in North theme.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread