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-11-2015, 06:43 PM
Craig McMahon's Avatar
Craig McMahon is offline
Junior Member
 
Join Date: Jun 2015
Posts: 4
Default


I want to make the Category:Store, View as Grid etc. a bigger font.

I copied this and dropped it into the Ecwid white box, changed the value, saved but changes don't appear on my store after refresh. What am I doing wrong

Code:
font-size: 28px;
  color: black;
}

/* root categories, first level category links */ 
span.ecwid-categories-category { 
  font-size:16px; 
} 
/* subcategories, second level category links */ 
div.ecwid-categoriesMenuBar span.ecwid-categories-category { 
  font-size:19px; 
} 
/* 3rd, 4th, etc level category links */ 
div.ecwid-categories-MenuBarPopup div.ecwid-categoriesMenuBar span.ecwid-categories-category { 
  font-size:28px; 
}   

a span.ecwid-categories-category {
  font-size:16px !important;
  color: black !important;
}
www.faithhousepictures.com/shop.html

Last edited by Wendy; 06-16-2015 at 10:10 AM.
  #2  
Old 06-12-2015, 07:31 AM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Craig McMahon View Post
I want to make the Category:Store, View as Grid etc. a bigger font.

I copied this and dropped it into the Ecwid white box, changed the value, saved but changes don't appear on my store after refresh. What am I doing wrong


font-size: 28px;
color: black;
}

/* root categories, first level category links */
span.ecwid-categories-category {
font-size:16px;
}
/* subcategories, second level category links */
div.ecwid-categoriesMenuBar span.ecwid-categories-category {
font-size:19px;
}
/* 3rd, 4th, etc level category links */
div.ecwid-categories-MenuBarPopup div.ecwid-categoriesMenuBar span.ecwid-categories-category {
font-size:28px;
}

a span.ecwid-categories-category {
font-size:16px !important;
color: black !important;
}

www.faithhousepictures.com/shop.html
Hello Craig,

Thank you for contacting Ecwid Customer Care Team.

I inspected your store, using this link: http://www.faithhousepictures.com/shop.html As I can see, you already changed the font size of the following elements: Sign in link, breadcrumbs navigation (Category: Store) and Sort by section. Do you need further assistance with this?

Also, when I looked into your custom design theme "Standard (copy)" on the Design page of your Ecwid control panel, I noticed that you copied and pasted the whole Base CSS Theme there. This might cause a conflict between new and base CSS styles. You should place only the styles that you'd like to change into the CSS field. The rest will be taken from Base CSS Theme automatically. We recommend to remove the styles that you do not change from your custom CSS theme.

Please, feel free to ask should you have further questions. Thank you!
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
  #3  
Old 06-12-2015, 02:23 PM
Craig McMahon's Avatar
Craig McMahon Craig McMahon is offline
Junior Member
 
Join Date: Jun 2015
Posts: 4
Default

Hi Wendy,

Thanks for telling me to not paste all.

Can you post here the those codes exactly that I need to have (Sign in link, breadcrumbs navigation Category: Store and Sort by section.) in the upper white box?

I also couldn't find the line code that changes the font just below each product image (just above price). I spent hours looking for it and gave up.

My audience is older and they have trouble with font this small and really need all the font upped.

Thank you so much for helping me!
  #4  
Old 06-12-2015, 04:09 PM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Craig McMahon View Post
Hi Wendy,

Thanks for telling me to not paste all.

Can you post here the those codes exactly that I need to have (Sign in link, breadcrumbs navigation Category: Store and Sort by section.) in the upper white box?

I also couldn't find the line code that changes the font just below each product image (just above price). I spent hours looking for it and gave up.

My audience is older and they have trouble with font this small and really need all the font upped.

Thank you so much for helping me!
Hello Craig,

Thanks a lot for your reply!

In order to change the font size of Sign in link, Category:Store navigation path, Sort by section and product titles you should use the following CSS code:

Code:
.ecwid a, 
.ecwid a:active, 
.ecwid a:visited {
	 	font-size: 20px;
	 }

div.ecwid-productBrowser-categoryPath {
	 	font-size: 20px;
	 }

div.ecwid-results-topPanel div {
	 	font-size: 20px;
	 }

div.ecwid-productBrowser-productNameLink a {
	 	font-size: 30px !important;
	 }
You should add the code in your Ecwid control panel > System settings > Design page. Choose your active CSS theme and place the code into the field. Do not forget to save changes.

Please, feel free to ask should any further questions arise.

Thank you!
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
  #5  
Old 06-12-2015, 06:48 PM
Craig McMahon's Avatar
Craig McMahon Craig McMahon is offline
Junior Member
 
Join Date: Jun 2015
Posts: 4
Default Bag, shopping bigger

Hi Wendy,

Thank you!

Can you post the code to make these 4 images all around bigger.

If it is impossible, I understand, perhaps the code for the font size adjustments.

I promise to go away as soon as I get it looking good.

Craig
Attached Images
File Type: jpg question-for-bag-image.jpg (146.2 KB, 145 views)
  #6  
Old 06-16-2015, 10:04 AM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Craig McMahon View Post
Hi Wendy,

Thank you!

Can you post the code to make these 4 images all around bigger.

If it is impossible, I understand, perhaps the code for the font size adjustments.

I promise to go away as soon as I get it looking good.

Craig
Hello Craig,

I created the custom CSS code for you:

Code:
.ecwid-productBrowser-backgroundedPanel {
	width: 300px;
}

.ecwid-productBrowser-sku,
.ecwid-productBrowser-details-outOfStockLabel,
.ecwid-productBrowser-cart-subtotalLabel,
.ecwid-productBrowser-cart-subtotalAmount,
.ecwid-productBrowser-cart-shippingLabel,
.ecwid-productBrowser-cart-shippingAmount {
	font-size: 20px !important;
} 

.ecwid-productBrowser-price-compareTo,
.ecwid-productBrowser-price-save,
.ecwid-productBrowser-details-qtyLabel,
button.gwt-Button,
.ecwid-productBrowser-cart-checkoutOptionsSeparator {
	font-size: 16px !important;
} 

div.ecwid-productBrowser-price,
.ecwid-productBrowser-cart-totalLabel,
.ecwid-productBrowser-cart-totalAmount {
	font-size: 30px !important;
} 

.ecwid-productBrowser-details-inTheBag  div {
	font-size: 25px !important;
}
Please, try out the code and let me know how it works on your site. Please, note that you are free to change the values such as 25px or 30px the way you want.

As for "Add to Bag", "Continue Shopping" and "Checkout" buttons, they are actually the images. So, it is not possible to increase them by applying custom CSS code only. Please, find instructions on how to change these buttons in the following articles:

1) How to change your "Add to Bag" button
2) How to change your big Continue Shopping button
3) How to change your "Checkout" button
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
  #7  
Old 06-17-2015, 12:19 PM
Craig McMahon's Avatar
Craig McMahon Craig McMahon is offline
Junior Member
 
Join Date: Jun 2015
Posts: 4
Default

Is this code supposed to make the grey panel wider, because when I change the width it doesn't effect size.

.ecwid-productBrowser-backgroundedPanel {
width: 300px;
}
  #8  
Old 06-22-2015, 08:19 AM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by Craig McMahon View Post
Is this code supposed to make the grey panel wider, because when I change the width it doesn't effect size.

.ecwid-productBrowser-backgroundedPanel {
width: 300px;
}
Hello Craig,

I am so sorry for the delay with the answer.

I inspected your website and found out that the code that increases the grey panel on the product detailed page works correctly:

Code:
.ecwid-productBrowser-backgroundedPanel {
	width: 300px;
}
As I understand, you'd like to make the grey panel wider than now, right? If yes, please feel free to use another code:

Code:
.ecwid-productBrowser-backgroundedPanel {
	max-width: 400px !important;
	width: 400px;
}
You should replace the old code with the new one in the CSS field on the Design page of your Ecwid control panel. You are free to change the 400px values if you want.

Please, feel free to write me back should you have any further questions.
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
fontsize

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