how to display images on top of each other in layoutgrid?

[Michael Fiil]

Hi experts,

this https://au2mailer.com/pablo/ is an example where cars for sale are displayed.
If the car is new, I would like to show https://carmagic.dk/pjauto/images/p-j-auto-bilnyhed.png transparent image on top of the image of the car

Can you do it in layoutgrid?

Best regards

Michael Fiil (Denmark)

[Pablo]

Maybe this template will be helpful (see the third row)?
https://www.wysiwygwebbuilder.com/suppo ... cards.html

[Michael Fiil]

Thanks Pablo - yes that's what I want but I do not think I quite understand how to do by looking at the source code in the example!
Where to find where the discount image is inserted or is it one layoutgrid on top of the other layoutgrid??

Can you help a little more?

Thanks in advance


Best regards

Michael Fiil (Denmark)

[Pablo]

You can download the template here:
https://wysiwygwebbuilder.com/templates2022.html
(ecommerce cards)

[Michael Fiil]

Thanks Pablo,
I have only had time to move forward with the challenge now.
Does the example only work with "Cards" or should it also work on top of a slideshow or images?
I have copied the html code into this test page https://carmagic.dk/pjauto/ribbon.html but the ribbon is behind the slideshow image. What caused it?

Thank you in advance

Michael from Denmark

[Pablo]

In this case, you may need to add a z-index to the ribbon

Code: Select all

z-index: 9999;

[Michael Fiil]

Hi Pablo and thank you

The ribbon is still behind the slideshow images

This is my ribbon-html-code
<style>
.ribbon
{
top: -10px;
right: -10px;
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.ribbon::before,
.ribbon::after
{
position: absolute;
z-index: 9999;
content: '';
display: block;
border: 5px solid #2980b9;
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon::before
{
top: 0;
left: 17px;
}
.ribbon::after
{
bottom: 17px;
right: 0;
}
.ribbon span
{
position: absolute;
display: block;
width: 225px;
left: -25px;
top: 30px;
transform: rotate(45deg);
padding: 8px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
color: #FFFFFF;
font-size: 15px;
font-family: "Arial";
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-transform: uppercase;
text-align: center;
}
#ribbonSlideShow1 .ribbon span
{
background-color: #FF0000;
}
#ribbonSlideShow1 .ribbon::before,
#ribbonSlideShow1 .ribbon::after
{
border-color: #DD0000;
border-top-color: transparent;
border-right-color: transparent;
}
</style>

[Pablo]

You will need to add the z-index to the ribbon class.

[Michael Fiil]

Thank You Pablo - this made it working

[Michael Fiil]

Now i am having another issue!
All pages in my project are using a masterpage with megamenu, which also have z-index.

With z-index = 9999 ind the class and style for the ribbon the ribbon will always be on top of everything and i am not
sure if i can control which z-index is used for the obejcts in masterpage?

se this pagehttps://carmagic.dk/pjauto/salgsafdelin ... lg-leasing

Thank you in advance

Michael from Denmark

[Pablo]

In this case, you should give the layout grid a higher z-index:

Code: Select all

#wb_master2pageLayoutGrid2 
{
  z-index: 10000;
}

[Michael Fiil]

Thank you Pablo

Every single day one get positive surprises about what is possible with WYSIWYG Web Builder.

Thanks for helping and have a nice weekend