How to add a ‘rented’ banner on unavailable Floor Plans or Properties

There are a number of ways to go about this. We actually do have some default styles that are available to gray out unavailable floor plans. Those are available in the settings under Rent Fetch Settings > Floor Plan Settings > Floor Plan Display.

Of course, you may want to add your own styles. The video below shows you step by step how to do it, and we reference a few individual styles within the video, so I’ve pasted those below.

Sample styles from the video

This is showcasing floor plans because one of these styles for the floor plan single image would only apply to the floor plans. However, all the rest of the styles here would apply equally for plans or properties (so long as the particular theme that you’re using doesn’t happen to override any of these properties).

.no-units-available {
	img.floorplan-single-image {
		filter: grayscale( 1 );
	}
	
	&:after {
		position: absolute;
		top: 8px;
		left: 8px;
		content: "Rented!";
		background-color: red;
		padding: 5px 10px;
		border-radius: 3px;
		color: white;
		z-index: 15;
	}
	
	&:before {
		content: "";
		background-color: rgba( 0,0,0,0.8 );
		position: absolute;
		inset: 0;
		border-radius: 5px;
				z-index: 14;
	}
}

Other examples

Centered ‘sold out’ banner (applies to both floor plans and properties)

.no-units-available:before {
	background: #E4440F;
	content: "Sold out";
	top: 50%;
	left: 50%;
	position: absolute;
	z-index: 10;
	padding: 12px 17px;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1;
	border-radius: 3px;
	transform: translateX( -50% ) translateY( -50% );
}

Here’s how that might display on the front-end (assuming that your theme doesn’t override any of these styles, in combination with the ‘faded’ version of the class: