WebSite X5Help Center

 
Sinisa B.
Sinisa B.
User

Product's card layout  en

Autore: Sinisa B.
Visite 224, Followers 1, Condiviso 0  

Hi,

I was looking some of the e-commerce templates at the marketplace - and I have noticed that many of them have "edited" the product card layout, mainly the dividing (black) line.

Below is just one  example:
https://market.websitex5.com/en/templates/live-preview/245ed0aa-ccdc-4393-93d8-1a776973ebd

I want to know why we could not edit/customize that part of the product's card via the software's options?

That black dividing line (see att.) could be really annoying (in some designs) and there should be an option for its customization...

Thank in advance for the feedback!

Postato il
6 RISPOSTE - 1 UTILE
Wsx5.afsoftware.fr  
Wsx5.afsoftware.fr  
User

Hello Sinisa,

Right click on your separator to find his class name intot the code.

in the code window on the right, find the class name of the separator.

Now try to find the name object into the code identified by ID= xxxx

OK you have the class of you separator and i which object...

Now you need to change CSS code in page properties.

And to click on 'advanced tab'

And to add this code in my case:

<style>

/* to change color & size of separator */
#imProductList_4_01 div.imProductListSeparator {
border-bottom: 5px solid;
color: red;
}

</style>

either:

And the display will be:

Enjoy,

https://wsx5.afsoftware.fr

Leggi di più
Postato il da Wsx5.afsoftware.fr  
Sinisa B.
Sinisa B.
User
Autore

@Wsx5.afsoftware.fr 

Thank you very much!

This changed style will stay that way upon closing the project's (after saving changes, of course)
***
But, again, it would be nice that we can do this without coding?!

Leggi di più
Postato il da Sinisa B.
Sinisa B.
Sinisa B.
User
Autore

@Wsx5.afsoftware.fr 

It did not work for me...
I did exactly what you've shown me - just with a different id name.

HERE IS THE THE div code of the element I want to change the line of:
*************

<div id="imProductList_01_1" class="imProductListCard">
<div class="imProductListImage" style="background-image: url('images/barsun_fotelja_plava_thumb.jpg');" onclick="x5engine.imShowBox({'showThumbs': true, 'media':[{ type: 'image', url: 'images/barsun_fotelja_plava.jpg', width: 1000, height: 1000, text: 'Fotelja NATALIA' },{ type: 'image', url: 'images/barsun_fotelja_plava_b.jpg', width: 1000, height: 1000, text: 'Fotelja NATALIA' },{ type: 'image', url: 'images/barsun_fotelja_plava_c.jpg', width: 1000, height: 1000, text: 'Fotelja NATALIA' },{ type: 'image', url: 'images/barsun_fotelja_plava_d.jpg', width: 1000, height: 1000, text: 'Fotelja NATALIA' }]}, 0, this)"></div>
<div class="imProductListName">Fotelja NATALIA</div>
<div class="imProductListDescription">Fotelja od predivnog plavog baršuna. Izuzetno udobna i pri dugotrajnom sjedenju!<br><div class="imProductListDescriptionFade"></div></div>
<div class="imProductListSeparator"></div>
<div class="imProductListPrice">
<span id="product_1gke80sb8_fullprice">1190.00 kn</span><span style="margin: 3px; font-size: 0.85em;">PDV uključen</span>
</div> <input type="number" id="product_1gke80sb8_qty" class="imProductListQty" value="1" min="1">
<div class="imProductListButton" onclick="x5engine.cart.ui.addToCart('gke80sb8', $('#product_1gke80sb8_qty').val(), $('#product_1gke80sb8_opt').val(), $('#product_1gke80sb8_subopt').val(), false, '');">Dodaj u košaricu</div>
<img src="images/New_06.png" style="position: absolute;top: 0; left: 0;" alt="New!">
</div>

***************

In the att. is the screenshot of the code I entered.

Thanks in advance!

Leggi di più
Postato il da Sinisa B.
Wsx5.afsoftware.fr  
Wsx5.afsoftware.fr  
User

Strange !!

send me your project (if you can) by wetransfer on my email: ***

I will check it

Leggi di più
Postato il da Wsx5.afsoftware.fr  
Wsx5.afsoftware.fr  
Wsx5.afsoftware.fr  
User

Hey Sinisa,

Seems your <div> name  is not correct.

look at my code with my example:

<style>

/* to change color & size of separator */
#imProductList_4_01 div.imProductListSeparator { 
border-bottom: 5px solid;
color: red;
}

</style>

The <div> in my example is this one which is alone on the line and not followed by a class name.

https://wsx5.afsoftware.fr

Leggi di più
Postato il da Wsx5.afsoftware.fr  
Sinisa B.
Sinisa B.
User
Autore

HI,

I did it - find a correct style in the Chrome...and it was a breeze!

Thank you very much!

Best,

Sinisa

Leggi di più
Postato il da Sinisa B.