How to make CSS changes to Easy Property Listings

Easy Property Listings has been designed as a structural plugin framework that adapts to your WordPress theme. We have minimised the styling options in the plugin CSS so that you can make adjustments that will suit your design goals.

Legacy CSS Settings: Inside the Easy Property Listings plugin is a style-front.css file and this is what creates the structure and layout on how your listings display. 

Note: You can also modify the structure of the templates and create anything you want using the template loader covered here.

All the CSS used by Easy Property Listings is often prefixed with epl- allowing you to create your own CSS that can modify fonts, colours add effects.

The key listing templates have parent CSS wrapper classes:

Archive Page eg /property/

.epl-property-blog {
/* Listing Loop Entry Wrapper Class */
}

Single Listing

.epl-property-single {
/* Single Listing Wrapper Class */
}

Due to the nature of cascading style sheets (CSS) these allow you to adjust what is already there or add new classes to adjust the design.

Where to add custom CSS

The CSS in Easy Property Listings is broken down into two stylesheet files. style.css and style-structure.css

We have made it easier to add your own custom style.css file which will be loaded from your_active_theme/easypropertylistings/style.css

You can create a style.css file and add your customisations to that or use a plugin like Simple CSS to modify your styles if you are not comfortable adding them to your child theme style.css

Note: When adding classes determine your theme parent class so that you can override the Easy Property Listings styles without using the !important CSS option.

For example the iThemes Builder WordPress Theme Framework has a parent class of .builder-module that you can place before any epl- prefixed class and they will take precedence over the plugin classes. You can use the  body tag but its better to determine the theme class to prepend your classes. For Example:

iThemes Builder has a .builder-module class so add the theme parent class before your custom css.

.builder-module .epl-property-blog .entry-title {
	font-size: 3em;
	color: red;
}
.builder-module .epl-property-single .entry-title {
	font-size: 3em;
	color: red;
}

Some themes do not have a named class like above but there will be a container class that you can use.

.content-area .epl-property-blog .entry-title {
	font-size: 3em;
	color: red;
}
.content-area .epl-property-single .entry-title {
	font-size: 3em;
	color: red;
}

Now all you need to do is add your custom classes to your child theme style.css file or use the plugin mentioned above.

Related Articles