product list (corners)

dennyno2 · May 23, 2014

Here I'm again guys!

Is is possible to add a corner like the image below to each product image?

it was on Wix ^(R) default theme, and it has been one the very little things I found nice there.

Thanks anyone.

Chris2013 · May 23, 2014

Try adding adding the following to your product_list.css, look for the following at around line 221

And add

border-radius:5px
-moz-border-radius:5px

to it

Edited May 23, 2014 by Chris2013 (see edit history)

vekia · May 23, 2014

Here I'm again guys!

Is is possible to add a corner like the image below to each product image?

it was on Wix ^(R) default theme, and it has been one the very little things I found nice there.

Thanks anyone.

any example of online version of this frame?

dennyno2 · May 23, 2014

Dear @Chris2013 do I need to change the lines or add them between others I already have?

Dear @vekia , nope because I didnt publish the site there yet, (and I dont want neither) so it's still on demo mode...

If you want, and It's helpful.. I found this code:

<div vctype="ProductBundle" vcview="Polaroid" vcfield="currentImage" class="pic wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1" comp="wixapps.integration.components.WPhoto" propertyquery="#wixAppsi3g" style="box-sizing: border-box; position: absolute; visibility: visible; width: 275px; min-height: 192px;" id="vwprxyWPht9-ixp" styleid="wp1" skin="wysiwyg.viewer.skins.photo.ScotchDoubleVertical" dataquery="#undefined" title=""><div skinpart="link" class="wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1-link" style="box-sizing: border-box; cursor: default;"><div skinpart="img" skin="skins.core.ImageNewSkinZoomable" comp="core.components.image.ImageNew" id="mgNw23-17ll" styleid="" class="skins_core_ImageNewSkinZoomable" dataquery="#undefined" style="visibility: visible; width: 255px; height: 172px;"><img skinpart="image" class="skins_core_ImageNewSkinZoomable-image" alt="" src="http://static.wixstatic.com/media/3145c4_9df7a22ba7c4478fbcbce73b0d3a5683.png_256" style="margin-top: 0px; margin-left: 41px; width: 174px; height: 172px;"></div></div><div class="wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1-c-ScotchL"></div><div class="wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1-c-ScotchR"></div></div>skin="wysiwyg.viewer.skins.photo.ScotchDoubleVertical" dataquery="#undefined" title=""><div skinpart="link" class="wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1-link" style="box-sizing: border-box; cursor: default;"><div skinpart="img" skin="skins.core.ImageNewSkinZoomable" comp="core.components.image.ImageNew" id="mgNw21-luz" styleid="" class="skins_core_ImageNewSkinZoomable" dataquery="#undefined" style="visibility: visible; width: 255px; height: 172px;"><img skinpart="image" class="skins_core_ImageNewSkinZoomable-image" alt="" src="http://static.wixstatic.com/media/3145c4_741eee9145024fc898092f3efad8fc02.png_256" style="margin-top: 0px; margin-left: 42px; width: 172px; height: 172px;"></div></div><div class="wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1-c-ScotchL"></div><div class="wysiwyg_viewer_skins_photo_ScotchDoubleVerticalwp1-c-ScotchR"></div></div></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid" vcfield="rolloverStrip" pos="" class="rolloverStrip hidden " height="3" style="box-sizing: border-box; width: 100%; height: 3px; margin-top: 3px;"></div></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid" vcfield="ribbonSwitch" pos="" class="switchDIV hidden" style="box-sizing: border-box; flex-direction: column; display: -webkit-flex; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"></div></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid" vcfield="def_13" pos="" style="box-sizing: border-box; display: -webkit-flex; width: 0px; height: 12px; min-width: 0px; flex: 0 0 auto;"></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid" vcfield="textLayout" pos="" class="txtHoverColor " style="box-sizing: border-box; flex-direction: column; display: -webkit-flex; margin-left: 2px; margin-right: 2px;"><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid" vcfield="$viewName" pos="" class="" style="box-sizing: border-box; flex-direction: column; display: -webkit-flex;"><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="$text-alignment" pos="" class="" style="box-sizing: border-box; flex-direction: column; display: -webkit-flex;"><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="def_1" pos="" class="" style="box-sizing: border-box; flex-direction: row; display: -webkit-flex;"><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="outOfStockTitle" pos="absolute" class="txtHoverColorOutOfStock hidden" style="box-sizing: border-box; white-space: normal; margin-right: 10px; min-width: 0px; flex: 1 1 0px; text-align: left; height: 100px;"><div vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="outOfStockTitle" class="txtHoverColorOutOfStock wixapps_integration_skins_ClippedParagraphSkin" comp="wixapps.integration.components.ClippedParagraph" skin="wixapps.integration.skins.ClippedParagraphSkin" propertyquery="#wixApps18uy" id="vwprxyClppdPrgrph0-10ql" styleid="" dataquery="#undefined" style="box-sizing: border-box; position: absolute; visibility: visible; overflow: hidden; width: 5px; white-space: normal; height: 100px;"><div skinpart="richTextContainer" class=""></div></div></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="text" pos="absolute" style="box-sizing: border-box; white-space: normal; height: 38px; margin-right: 10px; min-width: 0px; flex: 1 1 0px; text-align: left;"><div vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="text" comp="wixapps.integration.components.ClippedParagraph" skin="wixapps.integration.skins.ClippedParagraphSkin" propertyquery="#wixApps1f3g" id="vwprxyClppdPrgrph1-qi2" styleid="" class="wixapps_integration_skins_ClippedParagraphSkin" dataquery="#undefined" style="box-sizing: border-box; position: absolute; visibility: visible; overflow: hidden; width: 225px; white-space: normal; min-height: 38px; height: 38px;"><div skinpart="richTextContainer" class="" style="width: 225px; margin-top: 0px;"><p class="font_8"><span style="visibility: visible;">Golden</span> <span style="visibility: visible;">DOP</span> <span style="position: absolute; visibility: hidden; display: inline;"></span></p></div></div></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="retailPriceSwitch" pos="" class="" style="box-sizing: border-box; flex-direction: column; display: -webkit-flex;"><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="def_8" pos="" class="flex_vbox" style="box-sizing: border-box; flex-direction: column; text-align: right; display: block;"><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid_AltTxtLayout" vcfield="price" pos="" class="price wysiwyg_viewer_skins_WRichTextNewSkin" comp="wysiwyg.viewer.components.WRichText" skin="wysiwyg.viewer.skins.WRichTextNewSkin" style="box-sizing: border-box; visibility: visible; white-space: normal;" id="vwprxyWRchTxtg-ory" styleid="" dataquery="#undefined"><p class="font_8">€0.80</p></div></div></div></div></div></div></div><div hasproxy="true" vctype="ProductBundle" vcview="Polaroid" vcfield="def_23" pos="" style="box-sizing: border-box; display: -webkit-flex; width: 0px; height: 10px; min-width: 0px; flex: 0 0 auto;"></div></div></div></a>

Is this helpful? The border theme is called Scoth but I dont know how to add it... ( if it is!)

Jiten rash (away) · May 23, 2014

boder radius is enough

border-radius:5px
-moz-border-radius:5px
-webkit-border-radius: 5px;

Reduce ur css size..its too large

dennyno2 · May 23, 2014

Thanks Jiten rash,

should I add this to the end of my css list? or elsewhere?

www.laprimiziamilano.com/shop/

Chris2013 · May 23, 2014

boder radius is enough

border-radius:5px

-moz-border-radius:5px

-webkit-border-radius: 5px;

Reduce ur css size..its too large

My bad that's is what i was pointing out, the other style seemd to be pasted in via firebug, strange

Edited May 23, 2014 by Chris2013 (see edit history)

dennyno2 · May 23, 2014

that's is what i was pointing out, the other css is the actual css in that seletor

boder radius is enough

border-radius:5px

-moz-border-radius:5px

-webkit-border-radius: 5px;

Reduce ur css size..its too large

Thanks guys but.. where should I add this? I'm using the default theme.. and I dont have all the line u said before..

about lines 200 to 220 i have this:

/*******************************************************

Product list(List) Styles

********************************************************/

@media (max-width: 479px) {

ul.product_list.list > li .left-block {

width: 100%; } }

ul.product_list.list > li .product-container {

border-top: 1px solid #d6d4d4;

padding: 30px 0 30px; }

ul.product_list.list > li .product-image-container {

position: relative;

border: 1px solid #d6d4d4;

padding: 9px; }

@media (max-width: 479px) {

ul.product_list.list > li .product-image-container {

max-width: 290px;

etc etc..

Chris2013 · May 23, 2014

/*for the grid around line 126 or there abouts*/

ul.product_list.grid > li .product-container .product-image-container {

border: 1px solid #D6D4D4;

border-radius: 5px;

-moz-border-radius:5px

-webkit-border-radius: 5px;

margin-bottom: 13px;

padding: 9px;

position: relative;

}

/*for the list around line 235*/

ul.product_list.list > li .product-image-container {

position: relative;

border: 1px solid #d6d4d4;

border-radius: 5px;

-moz-border-radius:5px

-webkit-border-radius: 5px;

padding: 9px; }

dennyno2 · May 23, 2014

Tried but nothing happened!

Below there's the full css product list...

product_list.css

Edited May 23, 2014 by dennyno2 (see edit history)

Jiten rash (away) · May 24, 2014

can u plz leave ur site url here

dennyno2 · May 24, 2014

www.laprimiziamilano.com/shop

Thanks

vekia · May 24, 2014

your shop has got ccc for css files turned on.

please disable it temporarily

dennyno2 · May 24, 2014

lol..dear vekia...

I really don't know what are you talking about...

vekia · May 24, 2014

go to adv. parameters > performance tab in back office

you will see there several options related to CCC

you have to disable this feature, just use "keep as original" option near CCC for CSS

dennyno2 · May 24, 2014

here I'm!
I deselected everything there, under the ccc...
Now what to do?

vekia · May 24, 2014

okay

so now paste code:

ul.product_list.grid > li .product-container .product-image-container {
    border: 1px solid #D6D4D4;
    border-radius: 5px;
    -moz-border-radius:5px
    -webkit-border-radius: 5px;
    margin-bottom: 13px;
    padding: 9px;
    position: relative;
}
/*for the list around line 235*/
ul.product_list.list > li .product-image-container {
  position: relative;
  border: 1px solid #d6d4d4;
border-radius: 5px;
-moz-border-radius:5px
-webkit-border-radius: 5px;
  padding: 9px; }

to this file: /modules/themeconfigurator/css/theme8.css

you can paste it at the end of this file

product list (corners)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites