Custom CSS

Making minor style changes is simple once you understand the underlying structure. Every theme and plugin is different and Strong Testimonials is no exception.

This quick guide is meant to point you in the right direction. It is not a comprehensive style guide or CSS course. It assumes you have a basic understanding of HTML and CSS, or are at least willing to try. WordPress does require a certain bravery. 😉

Terminology

Let’s get our terms straight.

selector {
    property: value;
}

rule set (also called a rule) consists of a selector followed by a declaration block.

declaration block starts with a left curly brace and ends with the matching right curly brace.

declaration consists of a property name, followed by a colon, followed by a value.

Terms

First, let’s get our terms straight. Here is the general CSS syntax:

selector {
    property: value;
}

A selector can be any HTML element. Class selectors are used extensively. For example:

.testimonial {
    text-align: left;
    border: 1px solid #E6E6E6;
}

That selects any element that has been assigned the class name “testimonial” like this:

<div class="testimonial">
Multiple Classes

Frequently, multiple classes are used to narrow down the selection. For example:

/* no space in between = find elements with both classes */
.centered.full-width {
    text-align: centered;
    width: 100%;
}
<div class="centered full-width">
Child Elements

Multiple classes are also used to select child elements. For example:

/* a space in between = parent and child */
.content .section {
    padding: 1em;
    margin: 1em;
}
<div class="content">
    <div class="section">
    …
    </div>
</div>

See how the CSS and HTML connect?

Try these great resources for learning more:

Elements

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):

TemplateCSS 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:

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

Class Names

Assemble the class names

Depending on what property (border, background, margin, etc.) you’re trying to style, a single class may work for some elements.

.testimonial-client {
    font-style: italic;
}

For most elements, you will also need to use the container class names in order to be more specific.

Not specific enough to override:

.testimonial {
    border: none;
}

Still not specific enough to override:

.strong-view .testimonial {
    border: none;
}

Bingo!

.strong-view.default .testimonial {
    border: none;
}
Notes

When in doubt, be more specific.

Your theme may provide testimonials too so you may need to match or exceed its specificity.

You can change the CSS class names assigned to your custom fields in the view editor.

You can examine the template files and stylesheets directly in the plugin’s templates folder.

Browser Tools

Did you know that every major modern browser includes a tool for inspecting the source code?

Chrome Developer Tools | Firefox Developer Tools | Microsoft Edge Developer Tools

Basically, hit F12 or right-click any element and select “Inspect” to see the HTML and CSS behind it.

Where to put custom CSS code

In the Customizer

In WordPress 4.7+, use the Additional CSS section in the Customizer.

Note: Any custom CSS added in the Customizer is only available for that particular theme. To use your custom CSS in other themes, simply copy and paste it the same way for each theme.

One big advantage to using the Customizer is that you will see your changes right away so you can easily dial in your CSS without saving files and flipping between browser windows.

In your theme

Some themes offer a custom CSS section too. Like the native WordPress option above, your CSS will only be available when that theme is active.

With a plugin

Try a plugin like Simple CSS for theme-agnostic changes and more room to type.

Lots of changes? Make the pro move.

Create a child theme and place your custom CSS in its stylesheet.

Child themes require a little more work up front but offer many benefits down the road, including:

  • the stylesheet can be cached, improving your site’s speed
  • they are safe from being overwritten by theme updates
  • they make further customization easier; for example, custom post templates
What NOT to do

Modify the plugin stylesheets. Your changes will be overwritten in the next plugin update, which are frequent.

Modify the theme stylesheet if you are using a free theme from wordpress.org or a premium theme. Your changes will be overwritten in the next theme update.

Your own classes

If you want to use the same style across multiple templates, or you prefer a bit more organization, create your own CSS classes.

For example, here are two classes named “rounded” and “shadowed”:

/* rounded */
.strong-view.rounded .testimonial {
  background: #ECF5F8;
  border-radius: 20px;
  border-color: #388196;
}
.strong-view.rounded .testimonial-inner {
  border: 0;
}
/* shadowed */
.strong-view.shadowed .testimonial {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

Then add these class name(s) to the “CSS Class Names” option in the view editor. You can also add classes that may exist in your theme. They will be added to the main strong-view container.



Results
<div class="strong-view default strong-view-id-1 rounded shadowed">
  <div class="strong-content strong-normal columns-1">
    <div class="testimonial post-1179">
      <div class="testimonial-inner">…</div>
    </div>
  </div>
</div>

Take care of your code

Add comments

Do your future self a favor and add comments to your code so you know what the heck it does and why you put it there when you come back to tweak it 3 months or 3 years from now.

Anything in between /* and */ are comments.CSS

/* Comments can be on their own line like this. */
.widget {
    text-align: center; /* Comments can be appended to any line. */
}

You can also “comment out” CSS rules to disable them without deleting them.

By line:

.widget {
    /* text-align: center; */
}

By section:

/*
.widget {
    text-align: center;
}
*/

If you’re working with other people, consider adding your name and the date to comments so they know who to blame/thank later. 😉

Keep it organized

Do your future self another favor and organize your code. Group CSS rules by their purpose and comment liberally to make them easier to find and understand later.

State what it does in English (e.g. “make page heading larger”) not how it does it (e.g. “increase font size”).

/* ===== Theme adjustments ===== */

/* ----- Front page ----- */

/* Add a background to the main content area */
.home .content-area {...}

/* ----- Archive page ----- */

/* Increase the margin on the post archive page */
.archive .content-area {...}


/* ===== Plugin adjustments ===== */

/* Add a border to My Contact Form */
.contact-form {...}

/* Remove the border on My Facebook Widget */
.facebook-widget {...}
Indent well

Tabs or spaces? Two spaces or four? Pick one and be consistent. WordPress prefers tabs.

Like this:

p {
    color: #111;
    margin: 1em 0;
    padding: 0;
}

Not like this:

p {
color: #111;
margin: 1em 0;
padding: 0;
}
p {
  color: #111;
    margin: 1em 0;
padding: 0;
}
Maybe combine

When experimenting, it often makes sense to keep rules separate even if they all have the same property and value.

p {
    color: #111;
}
a {
    color: #111;
}
.contact-form {
    color: #111;
}

The final set of rules are often combined. Less code usually means easier maintenance.

p,
a,
.contact-form {
    color: #111;
}
Remember the cascade

The C in CSS stands for “cascading”. Rules are applied from first to last and later rules can override earlier ones. That goes for stylesheets too. If two rules have the same specificity, the second one wins.

p {
    font-color: blue;
}
p {
    font-color: red;
}

Result? The paragraph will be red.

Disable all caching

To make sure you will see your custom CSS in action, disable caching while making modifications. In general, it’s a good idea to disable caching during development or troubleshooting.

Examples for the Default template

Changing colors
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* heading color */
.strong-view.default .testimonial-heading {
    color: red;
}

/* testimonial text color */
.strong-view.default .testimonial-content p {
    color: red;
}

/* custom fields color */
.strong-view.default .testimonial-client div {
    color: red;
}

/* custom fields link color */
.strong-view.default .testimonial-client a {
    color: red;
}

/* custom fields link hover color */
.strong-view.default .testimonial-client a:hover {
    color: blue;
}

/* read-more link color */
.strong-view.default a.readmore {
    color: red;
}

/* read-more link hover color */
.strong-view.default a.readmore:hover {
    color: blue;
}
Removing borders
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* remove outer border */
.strong-view.default.slider-container .wpmslider-viewport {
    border: none !important;
}
.strong-view.default .testimonial {
    border: none;
}
/* remove inner border */
.strong-view.default .testimonial-inner {
    border: none;
}
The featured image
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* ----- featured image ----- */

/* remove border */
.strong-view.default .testimonial-image img {
    border: none;
    padding: 0;
}

/* rounded corners */
/* barely rounded */
.strong-view.default .testimonial-image img {
    border-radius: 4px;
}
/* slightly rounded */
.strong-view.default .testimonial-image img {
    border-radius: 20px;
}
/* circle or oval depending on image's aspect ratio */
.strong-view.default .testimonial-image img {
    border-radius: 50%;
}
Centered text
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* ----- centered -----  */

/* heading */
.strong-view.default .testimonial-heading {
    text-align: center;
}
/* content */
.strong-view.default .testimonial-inner {
    text-align: center;
}
/* If that doesn't work, try this instead: */
.strong-view.default .testimonial-content p {
    text-align: center;
}
/* custom fields */
.strong-view.default .testimonial-client {
    text-align: center;
}
The heading
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* ----- heading ----- */

/* remove quote image (instead of using the No Quotes option) */
.strong-view.default .testimonial-heading {
    background: none;
    padding-left: 0;
}

/* increase font-size */
.strong-view.default .testimonial-heading {
    font-size: 2em;
}

/* increase height */
.strong-view.default .testimonial-heading {
    line-height: 3;
}

/* increase weight */
.strong-view.default .testimonial-heading {
    font-weight: 600;
}

/* when linked to full testimonial */
.strong-view.default .testimonial-heading a {
    color: red;
}
.strong-view.default .testimonial-heading a:hover {
    color: blue;
}
Background
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* ----- background ----- */

/* color (instead of using the view setting) */
.strong-view.default .testimonial-inner {
    background: #EEE;
}

/* rounded corners */
/* barely rounded */
.strong-view.default .testimonial-inner {
    border-radius: 4px;
}
/* slightly rounded */
.strong-view.default .testimonial-inner {
    border-radius: 20px;
}
Other tweaks
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* normal font weight on client name */
.strong-view.default .testimonial-name {
    font-weight: normal;
}

/* semi-bold font weight on client name */
.strong-view.default .testimonial-name {
    font-weight: 600;
}

/* italic custom fields */
.strong-view.default .testimonial-client {
    font-style: italic;
}
Isn’t CSS fun!
/* ===== Strong Testimonials ===== */
/* ----- Default template ----- */

/* ----- FUN ----- */

.strong-view.default .testimonial-content p:first-letter {
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    background: gray;
    border-radius: 1px;
    padding: 0 5px;
    margin-right: 1px;
}

Resources for information and inspiration

The art & science of CSS:

Was this article helpful to you? Yes No

Still stuck? We’re here to help.

Send us a message and we’ll get back to you as soon as we can.