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-30-2013, 08:10 AM
Dawn Lane's Avatar
Dawn Lane is offline
 
Join Date: Jan 2013
Posts: 1
Cool

Background hover colour change


I would like to lose the background hover colour around my products and categories: http://virtualbusinessinabox.co.uk/vbinab-store/ - it is currently showing a grey colour and would like to it be white to blend in with the rest of the website.

Any ideas how/where I can do this?

Dawn
  #2  
Old 01-30-2013, 07:52 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by Dawn Lane View Post
I would like to lose the background hover colour around my products and categories: http://virtualbusinessinabox.co.uk/vbinab-store/ - it is currently showing a grey colour and would like to it be white to blend in with the rest of the website.

Any ideas how/where I can do this?

Dawn
I have checked your site and as far as I can see this weird behavior has been caused by following code in your site's CSS theme:
Code:
tr:hover{background: url(images/submenu-widget.png);}
In order to fix it, I suggest you to add following code in your custom CSS theme in Ecwid control panel -> System Settings -> Design:
Code:
.ecwid tr:hover{background: transparent  none; }
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
  #3  
Old 08-24-2014, 12:13 AM
So Necessary's Avatar
So Necessary So Necessary is offline
 
Join Date: Aug 2014
Posts: 1
Default

Hi, I've copied a CSS style but I want to change the red background to purple at the base and white on the top, is there a way I can sort this out... www.sonecessaryng.com

Thanks
  #4  
Old 08-26-2014, 08:39 PM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by So Necessary View Post
Hi, I've copied a CSS style but I want to change the red background to purple at the base and white on the top, is there a way I can sort this out... www.sonecessaryng.com

Thanks
Hi,

If I get it right, you’d like to change color of separate Starter Site elements.
Basically, you can change design of your store with help of custom CSS styles.
You should create your custom CSS theme here: Ecwid Control Panel > System Settings > Design and then add here the classes of elements you’d like to change.

Please refer to this article to find detailed instruction on how to find the classes of elements you’d like to change: http://help.ecwid.com/customer/porta...nttochangenbsp

If I get it right, you want to change the background color of your store and also the color of your product browser background.

Here are the classes that you can use to do it:
Product browser background:
HTML Code:
html#ecwid_html body#ecwid_body .ecwid .ecwid-productBrowser {
background-color: rgb(69, 1, 0);
}
Storefront background:
HTML Code:
html#ecwid_html body {
background-color: rgb(87, 123, 4);
}
Also you may want to change the color of these elements:

Header and footer of the store:
HTML Code:
.header-outer, .footer-outer {
background-color: rgb(123, 255, 255);
}
Navigation bar:
HTML Code:
.ecwid-loaded .navigation {
background-color: rgb(214, 53, 50);
}
To change color of these elements you should do the following:

1) Pick the code of the color you want to use. You can use this tool to do it: http://www.colorcodehex.com/html-color-picker.html
2) Paste the color code to CSS code of the element. For example, if you want to change storefront background color to black, the could should be look like this:

HTML Code:
html#ecwid_html body {
background-color: #000000;
}
3) Add the final code to your custom CSS theme.

Please refer to this article to learn more about changing design in Ecwid: http://help.ecwid.com/customer/porta...e-ecwid-design

Let me know if you have anymore questions.

Last edited by Arthur Belostotsky; 08-26-2014 at 08:42 PM.
  #5  
Old 01-23-2016, 07:31 PM
Textworkers's Avatar
Textworkers Textworkers is offline
 
Join Date: Jan 2016
Posts: 17
Default

Is there a way to have the background color turn blue on hover?
  #6  
Old 01-23-2016, 07:42 PM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by Textworkers View Post
Is there a way to have the background color turn blue on hover?
Hi,

Thanks for your question!

Basically, you can change the color of any store element with the help of custom CSS themes.
The article above describes, how to find the CSS class of certain elements using your browser tools and how to change their style.

Please specify, which element do you want to change (screenshots are greatly appreciated), so I'll be able to provide you with more specific recommendations.

P.S. Please feel free to contact us directly using this contact form.

Thanks!
  #7  
Old 01-23-2016, 07:51 PM
Textworkers's Avatar
Textworkers Textworkers is offline
 
Join Date: Jan 2016
Posts: 17
Default

Hello, thank you so much for the response. So because I don't have the buy now buttons next to my products, you must click on one of my products where it then opens up. When you hover over the product it creates a box around the product to let you know it is clickable. I am trying to make the box turn completely blue instead of staying white and just creating a border. Is this possible? Please let me know if you don't understand. Thanks so much.
  #8  
Old 01-23-2016, 08:00 PM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by Textworkers View Post
Hello, thank you so much for the response. So because I don't have the buy now buttons next to my products, you must click on one of my products where it then opens up. When you hover over the product it creates a box around the product to let you know it is clickable. I am trying to make the box turn completely blue instead of staying white and just creating a border. Is this possible? Please let me know if you don't understand. Thanks so much.
Thanks for clarification,

I've checked your website and haven't found the store page there.
Could you please provide me with your store page URL, so I'll be able to take a look?

Thanks!
  #9  
Old 01-23-2016, 08:03 PM
Textworkers's Avatar
Textworkers Textworkers is offline
 
Join Date: Jan 2016
Posts: 17
Default

Here is a screenshot of me hovering over a product. In this case it is " 8 Blog Discount Package" see how it creates a box around it with a grey outline? Is there a way to make the whole box turn blue?

I don't have my store up right now as I am making all of these changes before it goes live.

Not a solid blue, but just something more than an outline to make it really stand out more when you hover over the product.
Attached Thumbnails
Click image for larger version

Name:	hover.png
Views:	160
Size:	37.2 KB
ID:	3306  

Last edited by Arthur Belostotsky; 01-23-2016 at 08:10 PM.
  #10  
Old 01-23-2016, 08:12 PM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by Textworkers View Post
Here is a screenshot of me hovering over a product. In this case it is " 8 Blog Discount Package" see how it creates a box around it with a grey outline? Is there a way to make the whole box turn blue?

I don't have my store up right now as I am making all of these changes before it goes live.

Not a solid blue, but just something more than an outline to make it really stand out more when you hover over the product.
Hi,

Please try adding this code to your custom CSS theme (Ecwid Control Panel > Settings > Design > CSS themes):

Code:
html#ecwid_html body#ecwid_body .ecwid-productBrowser-productsGrid-v2 td.ecwid-productBrowser-productsGrid-productInside.ecwid-productBrowser-productsGrid-hover {
  background-color: #3BBFEB;
}
Feel free to replace the color code (#3BBFEB) with the code of any color you like. You can grab the color code with the help of this Color Picker.

Please try it out and let me know if you have any questions. I'll be glad to help!
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
background colour, hover

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 08:51 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.