How to add Custom Search to Moto CMS 3 template

Please note! You can use this Custom Search solution only for live website. This feature will not work if you are using demo template, temporary domain name or Under Construction page.

Google Custom Search enables you to create a search engine for your website. With Google Custom Search, you can create custom search engines that search across a specified collection of sites or pages. In order to add custom search you will need to follow these steps.

1. Sign into Control Panel using your Google Account (get an account if you don't have one).

2. In the Sites to search section, add the pages you want to include in your search engine. You can include any sites you want, not just the sites you own. You can include whole site URLs or individual pages URLs.

3. The name of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.

4. Select the language of your search engine. This defines the language of the buttons and other design elements of your search engine, but doesn't affect the actual search results.

5. Click Create and your basic search engine is ready to use.

6. Then you will need to click on "Get Code" button.

7. On new screen please click on "Setup" section.

8. Click Look and feel in the sidebar, and then select the Overlay layout.

9. In this section, click Save & Get code. In the box that appears copy the code.

10. Add "Embed" widget to page where you want to have your search widget located and paste the code to 'Paste HTML code' text field. Then you will need to add following code under Google search code:

<style>
    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
</style>
</div>

11. Now you have Google search box on your page

Note we can not guarantee the proper work of Custom Search if you are using other source code or settings. 

This part of guide will help you to customize the appearance of your search widget

Appearance of this search widget can be changed by modifying custom code you have added at step 10 of this guide. Here is the code you will need to add before </style> tag.

a) In order to change background color of your widget and it's borders please add following code

.gsc-control-cse {
border-color: #FFFFFF;
background-color: #FFFFFF;
}

b) In order to change search button hover color of your widget please add following code

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-color: #FFFFFF;
}
.gsc-control-cse input.gsc-search-button {
    background-color: #FFFFFF;
}

c) In order to change search button frame color of your widget please add following code

.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #FFFFFF;

d) In order to change background color of your search results widget please add following code

.gsc-results-wrapper-overlay {
background: #FFFFFF;
}

e) In order to change color of your frame with search results please add following code

.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
background-color: #FFFFFF;
}

Please note that you will need to replace #FFFFFF code with your custom color code to apply the color you want to have.

For example if you want to change the color of your search widget background and color of your search button you will need to add code from a) and b) points before your </style> tag in step 10. 

This is the code you have added in step 8 before customization:

<style>
    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
</style>

With your custom colors it will look like this:

<style>
    .gsc-control-cse * {
-webkit-box-sizing: initial;
-moz-box-sizing: initial;
box-sizing: initial;
}
input.gsc-input {
height: 21px !important;
}
.gsc-control-cse {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
background-color: #FFFFFF;
}
.gsc-control-cse input.gsc-search-button {
    background-color: #FFFFFF;
}
</style>