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 11-24-2011, 01:56 PM
ShuLan's Avatar
ShuLan is offline
Junior Member
 
Join Date: Nov 2011
Posts: 6
Default

[Solved] Changing font size on product grid - won't work...


Hello, I have tried to add the following code into the custom CSS themes. It has worked for the SKU and price font size, but not the product name...


Quote:
/* Product name links */
div.ecwid-productBrowser-productNameLink a,
div.ecwid-productBrowser-productNameLink a:active,
div.ecwid-productBrowser-productNameLink a:visited {
font: normal 12px helvetica, arial, verdana, sans-serif;
color: #666666;
text-decoration: underline;
}

/* Product sku */
div.ecwid-productBrowser-sku {
font: normal 8px tahoma, geneva, verdana, sans-serif;
color: #1e2c38;
white-space: nowrap;
}

/* Product price */
div.ecwid-productBrowser-price {
font: normal 14px tahoma, geneva, verdana, sans-serif;
color: #a20505;
white-space: nowrap;
}
The red bits are what I changed. Where am I going wrong? I also changed the blue bit, and this worked, but it is just the font size that didn't work. As I said before, the SKU and price sizes changed, but the product name didn't.
  #2  
Old 11-25-2011, 08:30 AM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Your CSS code for product name is generally correct and is applied the right way. However, your styles don't override basic Ecwid style, which has more precise selectors, due to the way how the CSS generally works. This is the reason why your styles don't change product links look.

If you need to change styles for product link you should add the following code instead of yours:

Code:
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink a, div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink a:link, div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink a:active,
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink a:visited,
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-productNameLink a:hover {
      font: normal 12px helvetica, arial, verdana, sans-serif;
      color: #666666;
      text-decoration: underline;
}
In this CSS code product the precise selectors from original theme have been used. As a result, these styles will override the default ones and actually affect the look of your shop, changing the font size and the color of the links.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
The Following 2 Users Say Thank You to Maya For This Useful Post:
Feijoa (03-10-2012), Noshers (04-01-2014)
  #3  
Old 11-25-2011, 10:00 AM
ShuLan's Avatar
ShuLan ShuLan is offline
Junior Member
 
Join Date: Nov 2011
Posts: 6
Default

Hi Maya,

Thank you ever so much for helping. That works fine now. Just another quick Q, is there anyway to get the text to be centered rather than aligned to the left?

Thanks again.
  #4  
Old 11-25-2011, 11:16 AM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by ShuLan View Post
Hi Maya,

Thank you ever so much for helping. That works fine now. Just another quick Q, is there anyway to get the text to be centered rather than aligned to the left?

Thanks again.
Text alignment inside elements is also controlled with CSS.

Therefore, if you need to center product link and SKU on products list page in Grid mode, you should just override default Ecwid styles, which set left alignment in these blocks.

In order to do this you should add following code in the end of your CSS theme:
Code:
div.ecwid-productBrowser-productsGrid-productBottomFragment  div.ecwid-productBrowser-productNameLink,  /* for product link block*/
div.ecwid-productBrowser-productsGrid-productBottomFragment div.ecwid-productBrowser-sku /* for SKU block*/ {
  text-align: center;
}
You can change the alignment for other Ecwid texts using the 'text-align' property. For detailed description of 'text-align' option refer to this site
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
The Following 2 Users Say Thank You to Maya For This Useful Post:
AshleyC (08-06-2012), Jenny Tours (09-01-2012)
  #5  
Old 02-21-2015, 04:37 AM
Tracie Thompson's Avatar
Tracie Thompson Tracie Thompson is offline
Junior Member
 
Join Date: Feb 2015
Posts: 4
Default

This completely failed to work for me. I don't know why, but I don't do CSS either; I make traditional art for a living. I got the text color to change on my product listings, but the size is still obnoxiously large and I can't seem to reduce it. I can't even find where in the code the default size is set. I see color but not size specified. Help?
  #6  
Old 02-21-2015, 10:31 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 Tracie Thompson View Post
This completely failed to work for me. I don't know why, but I don't do CSS either; I make traditional art for a living. I got the text color to change on my product listings, but the size is still obnoxiously large and I can't seem to reduce it. I can't even find where in the code the default size is set. I see color but not size specified. Help?
Hi,

My understanding, that you wish to change the size of your product names in the List view, correct?

In order to do that, please add the following codes to your Custom CSS Themes:
Code:
div.ecwid-productBrowser-productsList-details div.ecwid-productBrowser-productNameLink a,
div.ecwid-productBrowser-productsList-details div.ecwid-productBrowser-productNameLink a:active,
div.ecwid-productBrowser-productsList-details div.ecwid-productBrowser-productNameLink a:visited {
	font-size: 18px !important;
}
As a result, your product name font size will be smaller: http://take.ms/ibu2a
Please let me know if you wish to change something else in your store and I'll be glad to help.
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #7  
Old 02-21-2015, 03:28 PM
Tracie Thompson's Avatar
Tracie Thompson Tracie Thompson is offline
Junior Member
 
Join Date: Feb 2015
Posts: 4
Default

Thank you so much! Yes, that works. Now I feel ready to upload a lot more art.
 
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 09:37 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.