The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 01-07-2015, 04:20 PM
James Fletcher2's Avatar
James Fletcher2 is offline
Junior Member
 
Join Date: Jan 2015
Posts: 1
Default

Search Bar CSS not working


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
  #2  
Old 01-09-2015, 10:38 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by James Fletcher2 View Post
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

Code:
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:
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.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
bar, box, code, css, search

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:52 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.