A little girl reading to a sleeping lion

Coding in the Wind: Tweaking Themes with CSS

No comments

As I see it, I have two choices: go out and hire my own website designer or learn enough to do it myself. Luckily, do it yourself web design isn’t all that difficult or expensive. Learning how to tweak existing themes using CSS is kind of fun. 🙂 Here’s another bit on learning how to tweak themes using CSS.  Here’s a very short experiment in playing with post formats, including the standard format.

Studying Up on CSS in Themes

From my study of CSS in the Olden Days,  I knew most of the basics about CSS.  I recall, in the Olden Days, struggling with a misplaced “curly brace” or a forgotten semi-colon at the end of a statement. Taking the course on CSS at CodeAcademy (it’s free! though they do try to upsell you with “professional classes”) was a very helpful refresher.  But it did not quench my thirst for knowledge.   Sure, I can do a little bit of styling of the post format for quotes.   With help from a Happiness Engineer, of course.

But I want to do MORE. (Of course).   Note: Only Premium, WordPress.com Business Plan and self-hosted blogs have access to the Additional CSS feature when we customize themes. 

What I did During the Windstorm

Inspired by this success, and with a good bit of time on my hands, I brushed off my old CSS knowledge and took the course on CSS at CodeAcademy.  Took me about three hours  to get through the beginning class–in a coffee shop. I had the TIME because my house had NO POWER due to the Great March Wind Storm.  It was cold, dark and six in the morning, when John and I trekked to a coffee shop.  They let us stay, drink coffee and code and make use of their electricity.  Kind of fun, actually, if we hadn’t been so cold and tired!

March really did come in like a lion!  200K houses without power!

While the quote post has a new look on the blog homepage, if you click through to the blog itself, you can see the ugly purple h2 code I put in–in my first attempt to create a nice quote.  The changes I made to the post-format .entry content class did not carry over into the face of the post itself.  SOME of the CSS did, other aspects were over-ridden by the “inline” styling I did in the post itself.

Screen Shot 2018-03-03 at 7.31.28 PM.png

Here’s what the click-through looked like. I’d applied an H2 tag on the text and colored it purple. Hey, it was an experiment!  Not very pretty, I admit.

When I went to the page, there was a second of flicker as the HTML parser in the browser first set the quote to the style in the stylesheet, then over-rode that with the more “local” code I had inserted.

That’s the thing about cascading style sheets: they cascade. 

Decoding CSS: Deconstructing a Little Code

Let’s review the CSS I put in to style the original post format for quotes:

Screen Shot 2018-03-03 at 6.37.11 PM
The original CSS to style the post format for quotes

In CSS, you can designate a bunch of different tags and classes with the same formatting by grouping them together like this.

What is .entry-content?

.Entry-Content is clearly a class, most likely a default class set up in the CSS on the original stylesheet of the Entrepreneur itself, somewhere.

I decided to play around with this. I First, we can separate out the the two classes: .format-quote .entry-content and then just .entry-content by itself. Next, we can apply a little code for a light blue color to .format-quote and a light pink color to .entry-content.

Screen Shot 2018-03-04 at 6.22.00 PM.png
Example Code A: Blue and Pink

And here’s what happened.  A “standard” post gets a pink background.  And a quote post gets the blue background!

Screen Shot 2018-03-04 at 6.24.06 PM
Examples of a standard blog post (top) and format-quote post (bottom) using the Example Code A: Blue and Pink css style

.Entry-content is the selector for all posts.  It appears that we can manipulate selectors by adding initial CSS–we just have to know what selector is doing what. When the Happiness Engineer and I were figuring out how to style the quote post format, there was a good deal of trial and error. Our final “kludge” of attempts including the class: .single-format-quote — which did NOTHING. It was one of the guesses that she had about what selector we could use to create a style for the quote post format.

Tweaking Themes With Additional CSS

I took out the pink for the .entry-content which was kind of clashing, and substituted a very soft yellow.  (I rather like this HTML color picker).  And I separated .format-quote from .entry-content.

Here’s the CSS for this (adding a little cell padding here and there).

Screen Shot 2018-03-04 at 6.43.45 PM
Example Code B: Blue and Yellow Posts

The two phrases together: .format-quote .entry-content  — have a specific meaning.  If I remove the “.entry-content ” statement associated with the .format-quote,  then the entire post format is turned blue, including the box around the title.  Note that the body of the quote turns to the light yellow of the .entry-content. 

Screen Shot 2018-03-04 at 6.57.40 PM.png
Results when the .entry-content element is removed from the .format-quote CSS statement

.Entry-content is a modifier for .format-quote.   We’ll keep that in mind when we get to styling other post formats. 

Back to white backgrounds for regular posts.

I’ll be playing around more with CSS and using it to tweak themes. I want to create that start menu using css styles and figure out what I can do to make this theme into something that can accomplish my vision. Here’s what I hoped I’ve been able to share with you.

(1) Learning to code isn’t hard.

(2) It’s okay to play with CSS and figure out things for yourself.

(3) Our themes are built on CSS.  A little bit of coding knowledge can go a long way.

More soon. ~Lola

Leave a Reply