How to Add CSS to Blogger to Customize your Actual Plays

In the previous example, I used only the Blogger WYSIWYG/visual post editor to offset narrative using the Quote

Quote

button and also by adding a simple orange background to "mechanics" text. Outside the bounds of simple tactics like that, you're going to have to tinker with CSS or really get your hands dirty and modify the HTML and CSS of your theme.

If you're not used to dealing with HTML and CSS (or if you don't know what those are) most of the below will be problematic for you. You'll need to do some research and figure out the basics for these building blocks of the internet -- which I won't get into here -- or ask your tech-savvy friend or relative to help out. You can, of course, also leave comments here and I will do my best to help out if I can!

Simple CSS Tweaks

In a simple example, I went into the Blogger settings and added some custom CSS to the blockquote element -- which the visual editor wraps around text you add using the Quote button -- to make the "narrative" portions look a little better. To do that, log into Blogger and go to Theme > Customize and the screen below will load, where you can change all sorts of colors and text styles for various elements of your blog. Select Advanced > Add CSS to get at what we're interested in:

Adding custom styles to the blockquote element

Here's the CSS from the example:

#Blog1 blockquote {
    font-size: 1.1em;
    font-style: italic;
    background-color: #f5deb3;
    padding: 1em;
}

To break that down a little bit, blockquote is the type of element we're applying the styles to, which is what that Quote button inserts when you click it. I've identified #Blog1 as the id of an ancestor container in my theme (this appears to be universal to Blogger, but I'm not 100% sure, so it may not necessarily be true for your theme), which will help to avoid unintended application of the styles outside of the blog post area (more on that below). 

I chose not to apply it to the blog so it stays in it's original Blogger-themed state, so hopefully the picture will suffice for helping decide if this is the direction you want to go.

How did I know to apply the CSS to blockquote?

It's pretty simple, but again, maybe not if you aren't used to dealing with HTML/CSS. Visit your blog in your web browser of choice and view a post you'd like to inspect. At this point you have two options:

1. Most browsers have a right-click option to "View [Page] Source" or something along those lines. Selecting this will show you the HTML, CSS, and JavaScript code that is describing the page you're viewing to your browser, which knows how to read all that mess and render it graphically as a web page (and execute any JavaScript code). You can then search through this code (CTRL+F might be helpful to find specific text in the code) and locate the HTML tag that is surrounding the text you want to tweak.

2. Slightly more advanced/confusing: use the "developer tools" for your browser of choice. Usually this pops up by pressing F12 or you might be able to right-click near the text and select "Inspect" (this is an option in Chrome, the browser I typically use). This can make it easier to identify the element, and you can make real-time edits to see how you like the changes before you go to the trouble of adding into the Blogger settings.

Once you identify the element, you can apply the styles in the same manner, but again, you may want to use the #Blog1 ancestor selector or some other means of narrowing down exactly which of those tags you want to affect. Or, just use the HTML editor (more on that below) to apply the styles in-line in the post.

Is there anything else that can be tweaked easily?

Probably. You might be able to identify and leverage other tags associated with the editor buttons, maybe even the buttons you might never use -- strikethrough, underline, lists, subheadings, etc. (depending how these are implemented). Try adding these to a post, inspect the page, and then see if you can add styles to alter their appearance to suit you.

This can get into pretty complex CSS, especially if you add CSS3 functionality, but it could potentially produce some fantastic results with animations, transitions, and conditional application of styles with "selectors". Try googling for the effect you have in mind with phrases like "css text transitions" or "css collapse div". I didn't try it here in Blogger, but check out this example of a pure-CSS collapsing <div> element you could use for "spoiler" text.

Edit as HTML

Lastly, if you do happen to be at least a little bit comfortable with HTML and CSS, you can certainly just edit the post as HTML instead of in the WYSIWYG editor (or go back and forth as convenient), adding elements and inline CSS that would not normally be available to you in the visual editor. Like this <details> tag example I've added in the HTML editor, which could also be used as "spoiler" text (unfortunately, this does not work in all browsers, so you may not get the intended effect on your end):

Perhaps this is a question? Click the text to see the answer.

This is where you would put the "spoiler" or hidden answer. I used the color codes found here.

Here is the code for that:

<details style="background-color: skyblue; font-weight: bold;">
<summary style="background-color: darkorange; font-style: italic;">Perhaps this is a question? Click the text to see the answer.</summary>
This is where you would put the "spoiler" or hidden answer. I used the color codes found <a href="https://en.wikipedia.org/wiki/Web_colors">here</a>.
</details>

You may find that this will be too tedious and unsustainable if you regularly post actual plays with special formatting. One option is to keep "snippets" of code in an unpublished post or a text file on your computer that you can pull up to reference and copy/paste into your actual play.

Using the HTML editor on this post

A Word of Caution

While you won't be doing irreparable harm to your blog by playing with the HTML and CSS, be sure you know how to get back in and undo your changes. I also wanted to point out again that applying "blanket" CSS to commonly used elements like <span>, <div>, or <p> could have unintended side-effects by changing parts of the page you had not meant to change. Using CSS classes, identifiers, and selectors can help avoid these side-effects (as I did with the #Blog1 ancestor selector, above), but it will take some experimentation on your part.

For more information, check the Blogger documentation, specifically here and here.

* * *

Next, I'm going to look at going all out with Blogger theme tweaks, which will include adding "shortcode" support that will really take your actual play formatting to the next level!