How to change the color of top search button in nopCommerce

There are times when web developers or designers do not wish use all the default layout or colors that comes out of the box with any open source project. nopCommerce comes with a great modern theme that should fit most of the store sites need (irrespective of the industry). But, sometimes, making some minor changes to the default colors gives store site an edge and that is what makes the design different from other online stores using the same default theme.

Today, we will go over the process of changing the color of top search button in nopCommerce.

Here is the default color of top search button:

 

In order to make changes to the color, go to:
Nop.Web / Themes / DefaultClean / Content / css / styles.css

 

Open “styles.css” and look for this class “.search-box .search-box-button” – You will find this:

.search-box .search-box-button {
    float: left;
    min-width: 86px;
    height: 36px;
    border: none;
    background-color: #4ab2f1;
    padding: 0 15px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

 

 

Simply change the “background-color: #4ab2f1;” to any color based on your requirements.

In this example, let’s change the color to “brown”

 

.search-box .search-box-button {
    float: left;
    min-width: 86px;
    height: 36px;
    border: none;
    background-color: #A52A2A; /* Adding brown color code here */
    padding: 0 15px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

 

Here is the result:

 

In a similar way,  you can also change the hover color for the same button, simply look into this class in your stylesheet:

.search-box .search-box-button:hover {
    background-color: #248ece;
}

 

Here are a few examples of search button (with different colors):

 

 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *