Customizing the Style of AWPCP
AWPCP allows website owners to override the CSS rules included in the plugin by using a special stylesheet stored in the current active theme directory, the parent theme directory or the plugins directory.
How to use the AWPCP custom stylesheet file
Create a file called awpcp-custom.css in one the following locations:
- The current active theme directory (See get_stylesheet_directory()).
- The parent theme directory (See get_template_directory()).
- wp-content/plugins or wherever plugins are stored (See WP_PLUGIN_DIR).
Place any style changes you need in this file. It will be loaded such that these changes will take precedence in the CSS hierarchy over other styles in AWPCP.
How do I know what I want to put in this file?
Good question! Use Firefox Developer Tools or Chrome Developer Tools to determine what styles are being applied to any given element. Once you know what rules are causing an issue, you can override them adding your own rules to the custom stylesheet.
What if I see custom hard-coded styling I can’t override?
You may see something like this in your output of the ads:
<div style="width:80px;padding:5px;float:left;margin-right:20px;"><!-- ... --></div>
That can be controlled from Classifieds Admin > Settings > Display > Layout and Presentation by altering the HTML templates in the Single Ad page layout or Ad Listings page layout settings. As long as you create valid HTML in there, you can change the templates to be anything you like.