Thesis 2.0 Guide – Part 7 – CSS Editor – Comment Package Options

Part 7 of the Thesis 2.0 guide will continue to cover all the options available to you in the default theme classic. In the previous guide Part 6, we covered all the options found in the Menu Package. This guide will cover the options found in the Comment Package.

If you haven’t read it already you can find the previous guide below.

Thesis 2.0 Part 6 – CSS Editor – Menu Package Options

You ready?

Let’s begin!

Comment Package

In the previous part of this series we talked about the complexity of styling a menu and how Thesis 2.0 makes it much easier to achieve the desired results.

Comments are almost as complex because they are structured in a similar way in terms of parent and child levels (depths) as well as essentially being a list.

For comments the parent would be the first comment.

When someone replies to that specific comment it becomes a child of the parent comment.

Not only that, the admin of the site is assigned a separate class to identify the admins comments.

Luckily you don’t need to worry about that because Thesis 2.0 makes it very easy to style your comments.

In the CSS editor you can either create a new comment package via the drop down menu where it says select a package to add or if you are using the default theme classic you will see a package already made for you.

Just open up the package and you will see a pop up just like this.

Here we can find the usual options to name and link our CSS package to the reference sheet as well as the HTML structure in which is will ultimately style.

Options Tab

Then next tab displays the options. As we already stated, comments are fairly complex structure to style but Thesis 2.0 does an excellent job at making this task much easier.

The options tab contains 4 different sections of the overall comments structure for you to style.

Comments

This section contains options that will style the overall structure of the comments and there are quite a few different options for you to edit.

Font Settings

These options will affect all the comments universally and make no distinction between parent, child or admin comments.

Comment Author ( .comment_author)

This is for styling the authors name which you can see in this example

Lists

This simply applies to any list that may be added to a comment, you may want to create a test comment with a list in it to help you style this.

Box Sizing

There are two options to choose from here, if you remember from a previous series. When using a border always select the border-box option as this will ensure the dimensions of the comments section will be what you set it too.

Width

Moving on from the box-sizing, as we said, if you set a width here at say 600px and added a border that is 2px then if you didn’t select border-box, the width of the comments would be 604px. So it is important to ensure you select border-box only when a border is used.

Typography: Enter Width of Text Area

This is where you can set width of the actual text, to work this out, you simply need to take the width of your comments set above and deduct any padding, this will give you the width of your text and then Thesis 2.0 will automatically set the perfect typographical calculations to ensure your text looks awesome.

Text Color

As we are setting the universal settings, this will affect the color of all the text for your comments.

Background

Here you can set a background color, add an image and align the background image for each comment area.

Border

Looking at the image below, the border is applied to the outside of the container unless you select border-box, this will ensure the border is inside the container and thus the container will maintain its dimension.

Margin

Remember that margins are added to the outside or the comments, so if you add a margin around the comments, it will push the whole comment block inwards.

In this image which is also relevant to borders and padding you can see the different colors and they are as follows:

Yellow – is the margin, which you can see is outside the container.

Red – represents the border, if I select a border box and set a width of 600px, this container would be exactly 600px wide from the outer edge of the border.

Purple – represents padding.

Padding

Padding as you can see from the image above, is added to the inside of the container and pushes the content inside, inwards.

This is where the typography settings comes in to play, so with this example I have said the container is 600px wide, let’s say there is 20px worth of padding all the way around the content. So that means my typography settings would be 560px. This would be the perfect typographical setting.

Nested Comments

The options here will effect any child comment.

For example, Someone comments on your post, we can think of this as the parent comment, when someone replies to that comment is will becoming a nested comment also known as a child comment.

If someone was to reply to John Doe, then that would also be a nested (child) comment and so the CSS rules set here will also apply to that comment also.

Author Comments

The CSS rules set here will affect only the author of the post, so if you would like to style the author comments separately to easily identify the author over other comments then you will need to change the options found here.

You can see in the above image, that the background for the author comments are a light blue, but so are the nested comments, this is because you would need to specify a background color for the nested comments otherwise they will assume the background of the parent, or in this case the Authors CSS rules.

Nested Author Comments

Nested author comments work in the same way ordinary nested comments except these options effect only the admins comments.

So when you reply to a comment on your post, the CSS rules defined here will be applied.
Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

2 comments… add one
  • Alison Moore Smith Feb 22, 2013, 8:14 am

    You will probably get bored of hearing me compliment your posts, but I just found this site a few days ago and it’s been incredibly helpful.

    Just finished all seven of these tutorials. I’m on my second site conversion, but this was still very helpful.

    • Matthew Horne Feb 22, 2013, 8:19 am

      Glad it it useful for you, there are a few updates I need to do, but if you have any questions you can use the forum Under Thesis 2.0 support and I will be happy to help.

      Regards

Leave a Comment