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 04-03-2012, 12:14 AM
Kentucky Horse Park's Avatar
Kentucky Horse Park is offline
 
Join Date: Apr 2012
Posts: 4
Default

CSS Problem on Details Pages


As you can see fromt he attached image the picture is too big for the area. We would like to do 2 things to fix this.

1. Make the default image size smaller bringing it down from 500x500 to 400x400
2. Make the details pane on the right side thinner. like 200px or so.

question is where can i find the settings to change the 500x500 resizing (could not find an option to change this only to change thumbnail sizes and where can i adjust the details pane width?

Website URL: http://kyhorsepark.com/test2/index.p...oduct=10748100

Site Info: Joomla 2.5, RokEcwid plugin by Rockettheme
Attached Thumbnails
Click image for larger version

Name:	shopping cart.PNG
Views:	176
Size:	261.6 KB
ID:	1163  
  #2  
Old 04-06-2012, 05:00 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

1. To make the product image width in the Product details page equal to 400px please add the following rule to the end of your CSS theme (Ecwid control panel -> System Settings -> Design -> CSS Themes):


Quote:
.ecwid-productBrowser-gallery-image img {
max-width: 400px !important;
}
Click "Save (Ctrl+S)".


You can also limit height to 400px
Quote:
.ecwid-productBrowser-gallery-image img {
max-width: 400px !important;
max-height: 400px !important;
}

2. To make the right panel width 200px please add the following rule to your CSS theme:

Quote:
div.ecwid-productBrowser-backgroundedPanel {
width: 200px;
}
Then click Save (Ctrl+S).

Last edited by Wendy; 01-08-2016 at 04:18 PM.
The Following User Says Thank You to Kess For This Useful Post:
  #3  
Old 05-04-2012, 10:37 PM
Kentucky Horse Park's Avatar
Kentucky Horse Park Kentucky Horse Park is offline
 
Join Date: Apr 2012
Posts: 4
Default

Quote:
Originally Posted by Kess View Post
1. To make the product image width in the Product details page equal to 400px please add the following rule to the end of your CSS theme (Ecwid control panel -> System Settings -> Design -> CSS Themes):



Click "Save (Ctrl+S)".


You can also limit height to 400px



2. To make the right panel width 200px please add the following rule to your CSS theme:


Then click Save (Ctrl+S).
This worked for a while then all of a sudden my details page went nuts.

see this link

https://kyhorsepark.com/test2/index....oduct=10996156

and this image.

Cannot figure out why all of a sudden it started doing this.
Attached Thumbnails
Click image for larger version

Name:	Capture.jpg
Views:	161
Size:	100.1 KB
ID:	1188  
  #4  
Old 05-10-2012, 05:49 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

If I get it right, you would like the right panel not to be overlapped with the "Participate" table, correct?

This happens because your Facebook comments table width (800 px) exceeds the Ecwid table width (670 px).

To fix the issue you need to set the Facebook comments table width to 670 px. You can do it in your Ecwid control panel -> System Settings -> Social tools -> FB comments -> "Width, px" field.
The Following User Says Thank You to Kess For This Useful Post:
Judith M (05-23-2016)
  #5  
Old 05-12-2012, 12:43 AM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Default

To Kentucky Horse Park,

I love your shopping cart! You did a great job!
How did you customize your cart?

~May I ask please what is the code for one to
change their "store category bar" like you did?

~Also what is the code for one to make the
"sign in" pop up to have round corners and not square?

~What is the code for one to change
the buttons for "add cart" and "continue shopping"
for plain and hover states?

~Lastly, how does one make the corners round like
you did on the product details right before checking out?

Thanks so much for your help,
Tonya
  #6  
Old 05-12-2012, 12:57 AM
TonyasDynamicDesigns.com's Avatar
TonyasDynamicDesigns.com TonyasDynamicDesigns.com is offline
Webpartner
 
Join Date: May 2012
Location: Stafford, VA near Washington, DC, USA
Posts: 22
Default

Hi Kess,

~How do I move my product image closer to the LEFT
that way there will be less empty space between
my product's image and the block that displays the price?

~Also, how what is the css code for one to make the
"sign in" pop up to have round corners and not square?

~What is the css code for one to change the buttons for
"add cart" and "continue shopping" for plain and hover states?

~Lastly, how does one make the corners round like
Kentucky Horse Park did on the "product details block"?

To see what I mean, please go to the link below:
http://www.tonyasdynamicdesigns.com/...oduct=11687900

Thanks so much for your help,
Tonya
  #7  
Old 06-01-2012, 06:56 PM
Kess's Avatar
Kess Kess is offline
Senior Member
 
Join Date: Feb 2012
Posts: 2,071
Default

1. As far as I can see, the product image is already displayed rather close to the right panel (here is the screenshot: http://www.diigo.com/item/image/2cdgz/dh23). Would you like to move it yet closer?

2. To make the rounded corners for the sign-in pop-up please add the following rule to your Ecwid CSS theme (Ecwid control panel -> ‘System settings’ tab -> Design -> CSS themes):

Code:
div.ecwid-FormPopup {
border-radius: 13px;
  -moz-border-radius: 13px;
  -webkit-border-radius: 13px;
}
and click "Save (Ctrl+S)".

It's the border-radius CSS property that does the magic. border-radius is supported by most of the modern browsers, but not by Internet Explorer family of browsers - they will still display the usual corners.


3. Please refer to the following articles, they contain the info you need:

http://kb.ecwid.com/w/page/21499933/...ag%22%20button and http://kb.ecwid.com/w/page/25907450/...pping%20button


4. I have inspected the product pages of kyhorsepark.com (for example, this one - http://kyhorsepark.com/index.php?opt...oduct=10996208

and, as far as I can see, they have rounded corners for the breadcrumbs, the product image, navigation arrows and right panel. They can be set by the following CSS rules:

Code:
div.ecwid-productBrowser-categoryPath, div.ecwid-productBrowser-details-rightPanel, div.ecwid-productBrowser-backgroundedPanel,
div.ecwid-productBrowser-details-thumbnail img {
border-radius: 5px !important;
-moz-border-radius: 5px !important;
}
The Following User Says Thank You to Kess For This Useful Post:
Judith M (05-23-2016)
  #8  
Old 05-20-2015, 02:47 PM
Glam N Gems's Avatar
Glam N Gems Glam N Gems is offline
 
Join Date: Mar 2015
Posts: 18
Default

Hi

I need to add a border around the product details page right panel, including the bottom part where we have "Ask your friends for advice" and "share"

Thank you
  #9  
Old 05-20-2015, 03:10 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by Glam N Gems View Post
Hi

I need to add a border around the product details page right panel, including the bottom part where we have "Ask your friends for advice" and "share"

Thank you
Hi,

Thank you for contacting us.

You can change the design of your Ecwid store using Custom CSS Themes: http://help.ecwid.com/customer/porta...e-ecwid-design

In order to add a border to the right panel in the product details pages, please add the following code to your Custom CSS Themes:
Code:
.ecwid-productBrowser-details-rightPanel > table {
	border: 2px  solid black !important;
}
Where:
- 2px is the width of the border
- solid is the type of the border
- black is the color that you wish to have

More information about border property: http://www.w3schools.com/css/css_border.asp
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
The Following 2 Users Say Thank You to Rick G For This Useful Post:
Glam N Gems (05-21-2015), Judith M (05-23-2016)
 
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 05:47 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.