Custom CSS Code to change position of label

HTML & CSS
1

Hi

Anyone care to share a custom css code to change the position of the ‘Open/Closed’ label on the Elementor listing slider card module from top left to bottom left ?

The change should apply to Slider Card module on the Home Page & Listing page.

/* Home page

Screenshot_584
Screenshot_5841759×648 241 KB

https://sub.oshwalwh.inpro2.fcomet.com/

Listing page

Screenshot_585
Screenshot_5851380×616 150 KB

Listing page

Also, the ’Featured’ label should shift to Top Left.

Fyi, I have disabled the ‘price feature’ of the listings therefore leaving a empty space.

Screenshot_587
Screenshot_5871742×677 250 KB

Thanks in advance.

2

Unfortunately this is not really viable as the structure doesn’t allow for the buttons to be placed outside their current content with exact certainty. I can give you a “Magic Number” fix but will not be 100% reliable should content change as it relies on things being where they are all the time.

I suggest you put the following code somewhere where you can easily extricate it all should something go wrong.


/* home page */
.listing-one__single{
    position:relative;
}
.listing-one__image,
.listing-one__labels{
    position:static;
} 

.listing-one__label.listing-one__time.open,
.listing-one__label.listing-one__time.closed{
    position:absolute;
    bottom:2rem;
    left:25px;
}
.listing-one__label.listing-one__featured{
    position:absolute;
    top:20px;
    left:20px;
}
.listing-one__logo{
    bottom:auto;
    margin-top:-5rem;
}
.listing-one__image:after{
    height:100px
}
.listing-one__title a {
    min-height: 55px;
}
.listing-one__meta-top{
    min-height:35px
}


/* listing page changes */

.listing-five__image{
    position:relative;
}

.listing-five__labels{
    position:static;
} 

.listing-five__label.listing-five__time.open,
.listing-five__label.listing-five__time.closed{
    position:absolute;
    left:calc(100% + 28px);
    top:auto;
    bottom:1rem;
}
.listing-five__label.listing-five__featured{
    position:absolute;
    top:20px;
    left:20px;
}

With that code in place the pages will look like this assuming nothing has changed since.

image
image1636×612 245 KB

image
image970×551 97.7 KB

As I said it relies on magic numbers because the elements were inside positioned contexts and in css you can’t move out of a positioned context as it is tied to the positioned parent. The code works by using a magic number to get it into position but that is an unreliable way to code. It may suffice but there are no other choices other than changing the html so what you want can be achieved.

3

Hi Paul

The css code works like a charm. :100:

I’m happy to use css code until such time I figure out to modify the source code in the template file.

Meanwhile, can you share the css code to change the b/g colour of the ‘Closed’ label from orange to red (##FF0000)

Screenshot_47
Screenshot_47605×431 75.8 KB

Also, share the css code to change the b/g colour of the ‘Featured’ label to black with 50% transparency & text colour to orange (#ff6e3d) ?

Screenshot_48
Screenshot_48619×431 74.9 KB

Thanks

4

Hi Paul

Pls ignore the previous post.

I want to achieve a b/g ‘frosty glass effect’ for the 3x labels on the Home Page Restaurant slider ie Open, Closed & Featured.

The text colour for ‘Featured’ label should be orange (#ff6e3d).

Screenshot_592
Screenshot_5921731×550 228 KB

Below the Search Form on the Home page, you can see ‘browse highlights’ labels for Travel, Shopping & Places.

Take note the ‘frosty glass effect’ b/g on the labels which I want to achieve on Restaurant slider labels.

Screenshot_591
Screenshot_5911290×525 154 KB

Home page link

Thanks

5

Hi Paul

We can use the glassmorphism effect b/g colour below in the css code:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);

I have incorporated the b/g on the Home page slider - looking groovy ! :smiling_face_with_sunglasses:

Screenshot_595
Screenshot_5951595×433 222 KB

6

Hi,

Sorry not been at a computer all day so didn’t get around to looking at this.

I assume you are sorted now but if not I am around on the weekend to take a look:)

7

Not quite.

I want to apply the glassmorphism b/g code below to the Listing Card Module labels ie ‘Open’, ‘Closed’ & ‘Featured’.

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);

No change to the text colour except for ‘Featured’ which should be orange (#ff6e3d).

There’s no real urgency.

Enjoy your weekend.

8

Ok, I think this will do it.

.listing-one__label.listing-one__time.open,
.listing-one__label.listing-one__time.closed,
.listing-one__label.listing-one__featured {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.listing-one__label.listing-one__featured {
    color:#ff6e3d
}
9

I can confirm the code works fine, however, the change is not showing on the listing page.

Screenshot_54
Screenshot_541730×717 187 KB

On the home page, click on the search btn to load the listing page.

Screenshot_55
Screenshot_551826×245 71.1 KB

Kindly share the code for the listing page. :+1:

10

This should do it:

.listing-five__label.listing-five__time.open,
.listing-five__label.listing-five__time.closed,
.listing-five__label.listing-five__featured {
   background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.listing-five__label.listing-five__featured{
    color:#ff6e3d

}
11

Thanks Paul.

I’m ever so grateful. :slightly_smiling_face: