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:

<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
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.


  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