User guides for PizazzWP blocks and plugins for Headway and WordPress
ExcerptsPlus User Guide

CSS Selectors

Okay, this chapter is for the design freaks who really want to get their hands dirty. Excerpts+ has many CSS classes you can use to uniquely style your or your client’s site using Headway’s Live CSS Editor, or custom.css file.

Some useful Excerpts+ CSS classes

.excerpts-plus-excerpt
.excerpts-plus-row
ep-more-indicator (this is the ellipses)
a.excerpt-more-link (this is the text)
.excerpt-linkto
.excerpt-title
.entry-title a
.excerpt-content
.ep-show-border-content img
.ep-show-border-title img
.ep-show-border-none img (i.e. this is when the image is in the structure)
.ep-cell
.ep-cell-container
.ep-cellcol1 (Contains image when title location, position left and title aligned).ep-cellcol2 (Contains the cell rows).ep-cellcol3 (Contains image when title location, position right and title aligned)
.ep-cellrow1 ( and 2,3,4,5 These are the rows set in the Structure).
excerpts-plus-excerpt-behind
.slider.slider-slide
.slider-bglight.
slider-bgdark
.slider-bullets
.slider-numbers

Also, each cell, at the ep-cell level, is assigned a unique call consisting of the cell number and the block ID in the form ep-cell-no-CC-block-id-LL where CC is the cell’s number, and LL is the id of the block.

Here’s a few examples:
/* Colour excerpt titles red but only in sliders */
body.custom .slider .excerpt-title a {
color: red;
}

/* Colour excerpt content navy and it’s background grey, but only when content is displayed in cell row 3 */
body.custom .ep-cellrow3 .excerpt-content {
color: navy;
background:grey;
}

/* Change the background tint colour of the text area when using image behind.*/
body.custom div.excerpts-plus-excerpt-behind .ep-cell-container {
background: rgba(96,127,192,0.7)!important;
}