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!