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.
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.
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.
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.
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
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.
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.
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.
As we are setting the universal settings, this will affect the color of all the text for your comments.
Here you can set a background color, add an image and align the background image for each comment area.
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.
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 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.
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.
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