How to target the correct element

In order to allow multiple templates on the same page, the template name is added to the main container as a CSS class. Also, the view ID is added. For example, here's the container in the default template:

HTML
<div class="strong-view default strong-view-id-1">

The template names (as of version 2.30):

Template CSS Selector For The Container
Default .strong-view.default
Default + dark theme option .strong-view.default.dark
Default + image on right option .strong-view.default.image-right
Default + no quote symbol option .strong-view.default.no-quotes
Bold .strong-view.bold
Modern .strong-view.modern
Simple .strong-view.simple
Small Widget .strong-view.small-widget
Small Widget + image on right option .strong-view.small-widget.image-right
Unstyled .strong-view.unstyled

The elements in cascading order:

Element CSS Selector
Content wrapper .strong-content
Individual testimonial .testimonial
Inner box .testimonial-inner
Heading .testimonial-heading
Content .testimonial-content
Featured image .testimonial-image
Client box .testimonial-client
Client name .testimonial-name
Client company .testimonial-company
Read more .readmore

The following examples will make this clear.

Steps

  1. Where to put custom CSS code
  2. Take care of your code
  3. Get familiar with the elements — you are here
  4. Examples for the Default template
  5. More examples on the way
  6. Resources for information and inspiration