[Kentucky Horse Park]

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...

Site Info: Joomla 2.5, RokEcwid plugin by Rockettheme

[Kess]

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):

.ecwid-productBrowser-details-thumbnail .gwt-Image {
max-width: 400px !important;
}

Click "Save (Ctrl+S)".


You can also limit height to 400px

.ecwid-productBrowser-details-thumbnail .gwt-Image {
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:

div.ecwid-productBrowser-backgroundedPanel {
width: 200px;
}

Then click Save (Ctrl+S).

[Kentucky Horse Park]

Originally Posted by Kess

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....

and this image.

Cannot figure out why all of a sudden it started doing this.

[Kess]

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.

[Tonya Becker-Haddadeen]

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

[Tonya Becker-Haddadeen]

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/...

Thanks so much for your help,
Tonya

[Kess]

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):

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/... and http://kb.ecwid.com/w/page/25907450/...


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

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:

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;
}