Show Single position is currently unavailable

[Rev_Devan]

Hey, I would like to be able to show that a single position is not currently needed without hiding or deleting it. It would be amazing to have some sort of overlapping banner on the specific card, but anything noticeable would be nice. Then they can see that it may open in the future, since I use it for ministerial internships it changes often.

[Max]

Hi there, @Rev_Devan

We’ll be happy to help you with customization! Could you just specify the position name, exact place on the card where you’d like to add a banner? Also, it would be really helpful if you could share a reference of the banner you’d like to have

[Rev_Devan]

It could be as simple as the “Highlight Label” in the pricing table widget—red, maybe crossing from one side to the other, with one side slightly higher than the other—and customizable text like “Currently Unavailable.” I would like to be able to change it but for now the “Proof Reader” is definitely not needed.

[Max]

Got it! And what’s the name of the position, where you’d like to add this banner?

[Rev_Devan]

Sorry edited the text with that info: I would like to be able to change it but for now the “Proof Reader” is definitely not needed.

[Max]

Got it, thanks! I’ve forwarded your request to the devs and will let you know once the solution is ready

[Max]

Here is the CSS code to create a custom badge:

[class*="Item__Card-sc"]:has([alt="Proof Reader"]) {
  --ribbon-text: "Currently Unavailable";
  --ribbon-text-color: white;
  --ribbon-text-size: 13px;
  --ribbon-color: #d32f2f;
  position: relative;
}

[class*="Item__Card-sc"]:has([alt="Proof Reader"])::after {
  content: var(--ribbon-text);
  color: var(--ribbon-text-color);
  font-size: var(--ribbon-text-size);
  background: var(--ribbon-color);
  position: absolute;
  top: 5px;
  right: -65px;
  width: 100%;
  padding: 5px 0;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(45deg) translateX(55px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

By changing the alt text of the item card, you can apply this code to different positions:

And these settings will help you change the style of the ribbon badge:

Check it out and let me know if you like the result

[Rev_Devan]

Ok that’s great, I appreciate the flexibility.

I have played with it and now can’t seem to get it to translate well on my phone. the first two photos are how they appear in elfsight dashboard (in desktop and mobile view) but the next two are on web page with two different browsers on my phone. Which I would like to look same as dashboard.

[Max]

Hi there, @Rev_Devan

Sure! I’ve passed it on to the devs and will let you know once the issue is fixed

[Max]

The issue occurred because of the conflict with the styles of your website.

We’ve fixed by adding this line to your CSS code: box-sizing: content-box;.

Please check your website and let me know if it’s fine now