How to create circle CSS status stickers
Use the below CSS to create circle CSS status stickers.
Circle Status Sticker CSS
/* Circle Status Stickers */ .epl-stickers-wrapper { top: 10px; left: 10px } .epl-property-single .status-sticker, .epl-property-blog .status-sticker { position: relative; display: block; padding: 0; margin: 0; background: transparent !important; /* text styling */ font-size: 1.3em; width: 80px; height: 80px; color: #FFF; text-align: center; text-transform: uppercase; font-weight: bold; /* Adjust based on your theme fonts. */ padding-top: 38%; } .epl-property-single .status-sticker:after, .epl-property-blog .status-sticker:after { content: ""; position: absolute; top: 0; left: 0; background: red; width: 80px; height: 80px; border-radius: 80px; top: 0; z-index: -1; -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); } .epl-property-single .status-sticker.under-offer, .epl-property-blog .status-sticker.under-offer { /* TWO Lines of text */ padding-top: 25%; } .epl-property-single .status-sticker.under-offer:after, .epl-property-blog .status-sticker.under-offer:after { background: #FFA500; } .epl-property-single .status-sticker.open:after, .epl-property-blog .status-sticker.open:after { background: #7FAF1B; } .epl-property-single .status-sticker.new:after, .epl-property-blog .status-sticker.new:after { background: #800080; }