[James Fletcher2]

Howdy,

I have pasted the JavaScript code for the Ecwid search bar into my code and the search function itself is working fine. However, I've copied and pasted the CSS provided here (http://help.ecwid.com/customer/porta...ch%C2%A0widget) into my code and endeavored to change the styles, but I have not been able to change the height, background color, border width or color, etc. I can change little things like the width, text color, and font, but nothing else. I have been able to change the search button styles, but not the input styles.

I have a feeling that the javascript which is linked to make the search bar appear is somehow affecting the styles and I'm not able to override them with my CSS.

Thanks in advance.
James

[Rick G]

Originally Posted by James Fletcher2

Howdy,

I have pasted the JavaScript code for the Ecwid search bar into my code and the search function itself is working fine. However, I've copied and pasted the CSS provided here (http://help.ecwid.com/customer/porta...ch%C2%A0widget) into my code and endeavored to change the styles, but I have not been able to change the height, background color, border width or color, etc. I can change little things like the width, text color, and font, but nothing else. I have been able to change the search button styles, but not the input styles.

I have a feeling that the javascript which is linked to make the search bar appear is somehow affecting the styles and I'm not able to override them with my CSS.

Thanks in advance.
James

Hi,

Thank you for contacting us.

As I understand you added the search box widget into your website page here: http://rffdemo5.info/rootsource/

In order to change the style of the input box, please add the following code into your Ecwid Custom CSS Themes in Ecwid control panel > System settings > Design > Create new theme or select an existing one

input.ecwid-SearchPanel-field {
 width: 160px; /* change width as needed*/
 height: 40px; /* change height as needed*/
 border: solid 3px #aaaaaa !important; /* change border color */
 background-color: black; /* change background colour */
 font-size: 14px; /* change font size in search field */
 color: #ffffff; /* change font color in search field */
}

After you add the above code and save the changes, your Ecwid search box will be:
- 160px wide
- 40px tall
- have a solid border of 3px with a color of #aaaaaa
- have a black background
- the text will be white (#ffffff) and the size will be 14px

If you wish to customise the button that your customers use for search, use the following code:

button.ecwid-SearchPanel-button {
 width: 160px; /* change width as needed*/
 height: 40px; /* change height as needed*/
 border: solid 2px #000000 !important; /*change border color */  
 background: white; /*add bacground image*/
}

After you add this code, change the values accordingly.

Please mind that any changes to your Ecwid store are strongly advised to be added into your Ecwid custom CSS Themes, rather than the CSS files of your website, like it is at the moment.
Thank you.