Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 54: How to style Thesis 2 author comments

Thesis 2 Author Comments

I like to make the post author’s comments stand out from the visitor comments.  This helps our visitors to see that the post author is engaged in the comments community.  In this step, I’m going to change the font color for post author comments.  My goal was to add a border to the author comments too.  The way Thesis 2 is structured I’ve not been able to figure this out.  It was possible in Thesis pre-2 using CSS/PHP if I remember correctly.  I am working to avoid PHP in this guide.  Both, for myself and others learning Thesis 2.  I’ll update this step if/when I can figure this out.  For now, we will change the font colors to give some contrast to the post author’s comments.

Making Post Author Comments Stand Out in Thesis 2

From the WordPress Dashboard click on Thesis > Thesis Home > Skins > Skin Editor.  Click on the CSS button.

Thesis 2 CSS Page

I’m going to use a CSS color variable that I created in Step 23.  Note the “$secclra1” value.

Thesis 2 CSS Color Variable

On the right side of the page, look for the “Comments” CSS Package.

Thesis 2 Comments CSS Package

Click on the Comments CSS Package and it will open a pop-up.  Click the “Options” tab.

Thesis 2 Comments CSS Options

We are going to make changes to the Text Color element for “Comments”, “Nested Comments”, “Author Comments”, and “Nested Author Comments”.

Click the black arrow next to “Comments”.  Scroll down and enter your normal text color (usually black).

Thesis 2 Comments Text Color

Next, click on the “Nested Comments” black arrow and enter your normal text color (usually black).

Thesis 2 Nested Comments Color

Scroll down and click on the black arrow for “Author Comments”.  Enter the CSS color variable of your choice.

Thesis 2 Author Comments Text Color

Do the same for “Nested Author Comments”.

Thesis 2 Author Nested Comments Text Color

Click the “X” at the top right of the pop-up.  Then click the “Save CSS” button.

Thesis 2 Save CSS

Our comments now look like the picture below.  Notice that my comments are in a different color.

Thesis 2 Author Comments Font Color

I experimented with WordPress Discussion Settings and changed my settings to not allow nesting or threaded comments.  Uncheck the threaded comments checkbox.

WordPress Threaded Comments

This changes the way the comments are formatted as shown below.  Removing the threading has changed the background to a light blue.  I like this better so I’m going to go with this format for the time being.

WordPress Comments Without Nesting

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 0 comments… add one }

Leave a Comment