Improve Showit Blog Styles With CSS

If you have a Showit plan that includes a blog, you’ll be making your blog posts using WordPress.

However, you won’t get access to the full power of WordPress, and Showit takes over some of the functionality so that their templating can work properly.

By default, your WordPress blog posts on Showit will adopt the styles set in the Showit Editor. There are various places to set these styles, but that is a topic for another post!

Most designers do not create custom styles for blog posts, and unfortunately this often leads to Showit blog posts that have major readability issues.

The most common issues include:

• Heading fonts that do not work well in the post
• Centered headings that should be left-aligned
• No padding around images
• Unwanted typography differences between desktop and mobile
• Unstyled elements like blockquotes and lists

If you want to fix these things and you’re on the Advanced Blog plan, you may choose to use a plugin. You can use something like Kadence Blocks to get control over the elements, or a custom plugin for Showit like “Rise”.

The basic blog plan only allows the use of a small list of plugins.

If you know just a *little* CSS, you can fix most of the common styling issues on any Showit plan with a blog.

This post is a very basic intro into using CSS to style Showit blog posts, and is meant to be a “jumping-off point” for people who are interested in this kind of customization.

Don’t worry, it isn’t too complicated, and you can safely experiment by copy and pasting code from this post and making small changes as needed.

I’m using code blocks with comments in this post so that you can get familiar with what CSS should look like. I think this makes it easier to learn, but know that when you paste it into your Showit account, it will not maintain this formatting.

CSS Basics

Think of this lesson like Duo Lingo. I’m going to jump straight into using CSS because it is fairly easy to read. I won’t explain every single thing, but you can start using the language before you understand every detail.

If you’re someone who wants to learn the rules of CSS first instead of learning by immersion, here are a few places to dig in:

Mozilla’s CSS basics guide

W3 Schools CSS Tutorials

CSS-Tricks Guide Library

If you want to really take things to the next level, you’ll need to learn how to use Inspect in Chrome. This is a great video guide for getting started…

Where To Add Your CSS

Here’s Showit’s official guide, but honestly I don’t trust it lol. Some of the snippets they provide here make zero sense. Others may be helpful in figuring out how to select something that I don’t mention in this guide.

Anyway, here’s where you’re going to add the code in the Showit editor.

The Basics of Showit CSS

First, it is important to realize that Showit uses completely different styles for a blog post based on whether it is being viewed at a “desktop” or “mobile” size.

Showit also adds a class to the WordPress content area so that you can target elements here without affecting the design on the rest of your site (very useful and important).

/* Showit adds a class depending on whether the browser is above or below 768px wide */

.m /* mobile - less than 768px */
.d /* desktop - 768px or more */

/* Showit also adds a class for the WordPress content of a Showit template - I think of the abbreviation meaning "Showit Editor - WordPress Template." */

.se-wpt

The Main HTML Elements You’ll Want to Target

These are the main parts of a post that I usually want to edit when improving the formatting of a Showit blog post.

p /* paragraph */

h1 /* heading 1 */
h2 /* heading 2 */
h3 /* heading 3 */
h4 /* heading 4 */
h5 /* heading 5 */
h6 /* heading 6 */

ul /* unordered list - a bulleted list */
ol /* ordered list - a numbered list */
li /* list item - an individual item in a ul or ol */

a /* anchor - a link */

img /* image */

blockquote /* blockquote (aka "pullquote") */

Targeting Specific Elements

To change the styles of a specific part of your post, you’ll need to “target” it with CSS selectors.

/* To target a specific element, you can combine the classes */

/* This selector combo edits the H1 tag on Desktop, only when that h1 appears inside of the WP content box */

.d .se-wpt h1 {

}

Common CSS Properties

A property is the thing you want to change about an element. It might be the font size, color, alignment, or padding/margin.

The following example shows some of the most common properties I find myself updating on Showit blog posts.

This lesson about CSS Units might also be helpful if you aren’t familiar with px, em, or other units available in CSS.

.example-css-class {
font-size: 20px; /* most common units are px and em */

color: #000000; /* use a hex code, rgba value, or type a color */

text-align: left; /* left, right, center, justify */

text-transform: none; /* uppercase, capitalize, lowercase, none */

letter-spacing: .1em; /* value in em or px */

line-height: 1.5em; /* value in em or px */

margin: 0; /* space outside element in px, em, vw/vh, %. Top, Right, Bottom, Left */

padding: 10px 5px 20px 8px; /* space inside element in px, em, vw/vh, %. Top, Right, Bottom, Left */
}

/* You can also adjust padding and margin for one side using top, right, bottom, or left. eg: padding-bottom: 5px; */

Using !important

You’ll notice that some code snippets you find use !important after the values. This is needed when the Showit theme styles already declared a value for the specific element + property you are trying to target.

/* To override a previously set property, use the !important keyword Note: Use this only when needed. */

/* This adds margin to the bottom of a paragraph in the WordPress content. Since there was already a declared value in the theme's css, we need to override it using !important. */

.se-wpt p {
margin-bottom: 1.5em !important;
}

Swipe Some Code!

Use the sections below to copy some pre-written code that you can test on your Showit site. Use these to get started, and let me know if you have specific questions or issues in the comments of this post! I’ll update these examples to cover the most common requests.

Style your headings (h1-h6 tags)

This version applies styling to all headings within the WP content area (will not include the main post title on the page, so you may not need to copy the h1 styling). The styles apply equally on desktop and mobile.

 /* example styling for headings */
 
 .d .se-wpt h1, .m .se-wpt h1 {
font-size: 3.6em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1.2em 0 0.5em 0;
}

.d .se-wpt h2, .m .se-wpt h2 {
font-size:2.8em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1.2em 0 0.5em 0;
}

.d .se-wpt h3, .m .se-wpt h3 {
font-size:2.2em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1.1em 0 0.4em 0;
}

.d .se-wpt h4, .m .se-wpt h4 {
font-size:1.7em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1em 0 0.4em 0;
}

.d .se-wpt h5, .m .se-wpt h5 {
font-size:1.3em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1em 0 0.4em 0;
}

.d .se-wpt h6, .m .se-wpt h6 {
font-size: 1em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1em 0 0.3em 0;
}

This version uses clamp, and will adjust the text responsively based on the size of the window.

  /* clamp version */      
      
.d .se-wpt h1, .m .se-wpt h1, h1.se-wpt {
font-size: 3.6em !important;
font-size: clamp(2.3rem, 2.8vw + 1rem, 3.6rem) !important;
text-align:left;
text-transform: none;
letter-spacing: .1em;
margin: 1.2em 0 0.5em 0;
}

.d .se-wpt h2, .m .se-wpt h2 {
font-size:2.8em;
font-size: clamp(1.8rem, 2.2vw + 1rem, 2.8rem);
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1.2em 0 0.5em 0;
}

.d .se-wpt h3, .m .se-wpt h3 {
font-size:2.2em;
font-size: clamp(1.3rem, 1.7vw + 1rem, 2.2rem);
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1.1em 0 0.4em 0;
}

.d .se-wpt h4, .m .se-wpt h4 {
font-size:1.7em;
font-size: clamp(1rem, 1.3vw + 1rem, 1.7rem);
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1em 0 0.4em 0;
}

.d .se-wpt h5, .m .se-wpt h5 {
font-size:1.3em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1em 0 0.4em 0;
}

.d .se-wpt h6, .m .se-wpt h6 {
font-size: 1em;
text-align: left;
text-transform: none;
letter-spacing: .1em;
margin: 1em 0 0.3em 0;
}

Update Blockquote

This styles the blockquote separately on desktop and mobile, and gives it a light gray background.

.d .se-wpt blockquote {
    font-size: 1.4em;
    background: #eee;
    margin: 0;
    max-width: 70%;
    padding: 2em;
}

.m .se-wpt blockquote {
    font-size: 1.1em;
    background: #eee;
    margin: 0;
    max-width: 100%;
    padding: 20px;
}

Give your lists some space

This updates bulleted lists within your blog posts to make sure the text is aligned left, and adds a little extra space between each item.

.se-wpt ul {
text-align: left;
}
.se-wpt li {
margin-bottom: 1.2em;
}