Documentation › Styling Author Comments to Stand Out

Styling Author Comments to Stand Out

This tutorial requires some basic CSS knowledge and an understanding of how to use the Live CSS Editor. More advanced CSS knowledge may be required, depending on what you’re trying to accomplish!

Headway does not yet have an option within the Visual Editor to style author comments separately from other visitor comments, however it’s easy to style these with just a little bit of CSS.

Below, you’ll find a simple chart that shows you what CSS selectors to use to target different areas of the author comment.

Selector Description
.block-type-content li.comment.byauthor The entire LI that holds the author comment. Use this to target things like the background color of the comment or a border.
.block-type-content li.comment.byauthor .comment-body This is the DIV inside the LI that holds all of the content. The author’s gravatar is technically inside this DIV, but it is positioned outside the boundaries, so a background color here would not appear behind the author image as well. Target this area to change the font used in the actual comment text.
.block-type-content li.comment.byauthor .comment-author This is just the comment author’s name and contains two SPANs inside: one for the name, and one for the word “says” that appears by default after the comment author’s name (for example, “Clay Griffiths says:”). This resides within .comment-body so any changes there may affect this area. To change just the text of the author’s name, you can target this selector.
.block-type-content li.comment.byauthor .says This is the “says” part of the “Author Name says:” text. This resides within .comment-body so any changes there may affect this area. You could hide this by adding the following to your Live CSS:

/* For authors only */
.block-type-content li.comment.byauthor .says {display:none;}

/* For all comments */
.block-type-content li.comment.says {display:none;}

.block-type-content li.comment.byauthor .fn This is the author’s full name. This resides within .comment-body so any changes there may affect this area. Target just the first name (and not the entire line including “says:”) using this selector.
.block-type-content li.comment.byauthor .comment-meta This contains the comment meta data—the date and time of the comment. This resides within .comment-body, so any changes there may affect this area. Target this selector to modify the look of the comment meta only separately from .comment-body.
.block-type-content li.comment.byauthor div.reply This is the container that holds the “Reply” link to start a reply to a specific comment (not to leave a new unthreaded comment). Target this for background changes, general font changes, or even font alignment.
.block-type-content li.comment.byauthor a.comment-reply-link This resides within div.reply, and any styling to div.reply may affect this as well. This is the actual link element for the Reply link. Style this to change the appearance of the link to look more like a button, to adjust the padding or margins, background, font, and so on.

Here, you’ll find a simple chart that shows you some examples of how to format the comment area and comment text/meta. Learn more about CSS syntax here.

Declaration Result
font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif; Change the font to Baskerville Old Face (with other fonts listed as fallbacks if Baskerville is not installed on the visitor’s computer). See more “websafe” fonts at http://cssfontstack.com/.
font-weight: bold; OR font-weight:normal; Makes the text bold or normal (not bold).
font-size: NNpx; Sets the font size to the designated pixel size (replace NN with a number!).
color: #999999; Sets the font color to the designated color. The # and numbers (or letters) are a hexidecimal code. You can find hex color codes in a variety of tools and websites.
text-decoration: underline; Underlines the text.
font-style: italic; Sets the font to italic.
background-color: #eeeeee; Sets the background to a light gray (hex color codes again here).
background-image: url(‘http://yourdomain.com/linktoimage.jpg’); Sets the background image. Make sure the URL in the quotes is a URL you can view in your browser to see your image directly – just the image alone! And don’t forget to set background-repeat and background-position as needed.
background-repeat: no-repeat; OR
background-repeat: repeat; OR
background-repeat: repeat-x; OR
background-repeat: repeat-y;
No-repeat sets background to not repeat.
Repeat sets background to tile (repeats horizontally and vertically).
Repeat-x repeats horizontally only.
Repeat-y repeats vertically only.
background-position: xx yy; Replace xx
either with a number of pixels to start at, percentage, or “left,” “center,” or “right” for the horizontal position. Applies only when not repeating horizontally.

Replace yy either with a number of pixels to start at, percentage, or “top”, “middle”, or “bottom” for the vertical position. Only applies when not repeating vertically.

border: 1px solid #dddddd; Sets a 1-pixel, solid border in a gray color.

First value is the width of the border. Second value is the type of border (solid, dotted, dashed, double), and the third is the color. You can also set specific borders using border-right, border-left, border-bottom or border-top, i.e.:

/* Set a top border */
border-top: 1px solid #dddddd;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
Sets the “rounded” corners on borders. Does not apply in IE8 and earlier. Use all three declarations to ensure greatest browser compatibility.
margin: 10px 10px 10px 10px; Sets a margin around an element. Margins can be a bit tricky—you may need to play around a bit! On some elements you’ll find that padding works better than a margin. Margins add negative space around an element while padding adds space inside the element boundaries.

The values for margin go clockwise: top right bottom left.

So to set different margins for top and bottom and different for right and left, you could write:

/* Add 10px top/bottom margin and 30px left-right margin */
margin: 10px 30px 10px 30px; OR
margin: 10px 30px;

padding: 10px 10px 10px 10px; On some elements you’ll find that padding works better than a margin. Margins add negative space around an element while padding adds space inside the element boundaries. The values for margin go clockwise: top right bottom left.

So to set different padding for top and bottom and different for right and left, you could write:

/* Add 10px top/bottom padding and 30px left-right padding */
padding: 10px 30px 10px 30px; OR
padding: 10px 30px;

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress