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 06-20-2014, 11:41 AM
Intimate Whispers's Avatar
Intimate Whispers is offline
 
Join Date: May 2011
Posts: 6
Talking

How to change the gap between categories on the vertical categories widget


Thank you in advance for your help with my problem.

I have uploaded 2 images.
The old [image1] is how I am wanting the new css theme [image2] to show the categories.

As you can see there is quite a large gap between each category. I am wanting to close that gap so the 'new' image looks like the 'old' image, more condensed.

Also, how do I make each category name change on hover? so it becomes more prominent?

Thank you so much for your help, everyone at the ecwid team are amazing at fast replies and simple help! I hope my description makes sense!

Loving all the new updates as well, the new 'favourites' feature is great!

Thank you
Lee
http://www.intimatewhispers.com.au
Attached Thumbnails
Click image for larger version

Name:	OLD.jpg
Views:	131
Size:	9.1 KB
ID:	2538   Click image for larger version

Name:	NEW.jpg
Views:	114
Size:	8.8 KB
ID:	2539  
  #2  
Old 06-24-2014, 06:50 PM
Thematizr.com's Avatar
Thematizr.com Thematizr.com is offline
Webpartner
 
Join Date: Jul 2012
Posts: 379
Default

Although the things you request are quite doable, I bet mobile visitors will not appreciate it. The thin categories will be difficult to click with a finger, and the hover effect is simply non-existent on mobiles. Why not use the right category names from the very beginning?
__________________
Check out our latest ready-made designs for Ecwid:

Termion | Helata | Martina

Get 1 year of access to all our current and future themes.

Follow us on Twitter: @thematizr
  #3  
Old 07-07-2014, 03:41 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,270
Default

Quote:
Originally Posted by Intimate Whispers View Post
Thank you in advance for your help with my problem.

I have uploaded 2 images.
The old [image1] is how I am wanting the new css theme [image2] to show the categories.

As you can see there is quite a large gap between each category. I am wanting to close that gap so the 'new' image looks like the 'old' image, more condensed.

Also, how do I make each category name change on hover? so it becomes more prominent?

Thank you so much for your help, everyone at the ecwid team are amazing at fast replies and simple help! I hope my description makes sense!

Loving all the new updates as well, the new 'favourites' feature is great!

Thank you
Lee
http://www.intimatewhispers.com.au
Hello.

In order to reduce the gap between categories on your store page please go to Ecwid Control Panel > System Settings > Design > CSS Themes

If you already have a custom created CSS Theme please paste the following code at the bottom of the custom CSS code that you use and click ‘Save’.

If you use standard CSS Theme, click on ‘New CSS Theme’ and then paste the code below and click ‘Save’.

Code:
html#ecwid_html body#ecwid_body td.ecwid-categories-vertical-table-cell table.ecwid-categories-vertical-table-cell-categoryLink {
margin: 5px 20px;
}
In order to change the look of the element when you hover over it, you need to add :hover selector to this element. For example, to change the background color of the category to blue, you need to add this CSS code to your custom CSS theme in Ecwid as I mentioned previously.
Code:
html#ecwid_html body#ecwid_body td.ecwid-categories-vertical-table-cell table.ecwid-categories-vertical-table-cell-categoryLink:hover {
	background-color: blue;
}
In order to change the color of the text of this category to white, please paste this code to your custom CSS theme:
Code:
html#ecwid_html body#ecwid_body span.ecwid-categories-category:hover {
color: white;
}
Obviously if you want to apply all these changes simultaneously you need to paste this code:
Code:
html#ecwid_html body#ecwid_body td.ecwid-categories-vertical-table-cell table.ecwid-categories-vertical-table-cell-categoryLink {
margin: 5px 20px;
}
html#ecwid_html body#ecwid_body td.ecwid-categories-vertical-table-cell table.ecwid-categories-vertical-table-cell-categoryLink:hover {
	background-color: blue;
}
html#ecwid_html body#ecwid_body span.ecwid-categories-category:hover {
color: white;
}
__________________
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.

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