How to style the stickers: Sold, Under Offer, Leased

Within the Easy Property Listings code framework we have applied minimal styling so that the plugin CSS works across a wide variety of themes.

This also makes it really easy to tweak the default CSS. 

Our goal was to provide the CSS structure, then with some minor tweaks you can create the look and feel you want with your unique real estate website.

Read here on how to make custom CSS changes  How to make CSS changes to Easy Property Listings. An alternative since WordPress 4.7 is to use the Admin Bar > Customizer > Additional CSS.

Right Click and inspect the CSS sticker(signs) element

Default Sticker Styling

Default Structural CSS as of v3.1

/* Position */
.epl-stickers-wrapper {
	position: absolute;
	left: 0;
	top: 20px;
	z-index:9;
}
/* Styling */<br>
.epl-property-single .status-sticker,
.epl-property-blog .status-sticker {
	padding: 0.3em 1em;
	margin-right: 0;
}

Default Style CSS as of v3.1 (mainly

/* Stickers color */
.epl-property-single .status-sticker,
.epl-property-blog .status-sticker {
	background: #F00;
	color: #fff;
}
.epl-property-single .status-sticker.under-offer,
.epl-property-blog .status-sticker.under-offer {
	background: #FFA500;
}
.epl-property-single .status-sticker.open,
.epl-property-blog .status-sticker.open {
	background: #7FAF1B;
}
.epl-property-single .status-sticker.new,
.epl-property-blog .status-sticker.new {
	background: #800080;
}

Tweaked Sticker styling in browser

To add this to your CSS and ensure you prefix the classes if you are attempting to alter the padding. prefix with body for example.

/* Styling */
body .epl-property-single .status-sticker,
body .epl-property-blog .status-sticker {
	padding: 0.3em 1em;
	margin-right: 0;
	font-size: 2em;
	test-transform: uppercase;
	font-weight: bold;
}
/* Stickers color */
body .epl-property-single .status-sticker,
body .epl-property-blog .status-sticker {
	background: #F00;
	color: #fff;
}

Related Articles