If you use the Theme Builder for your blog's design, you can make changes to the formatting of the Post Title at Design > Theme Builder. The style of the Post Title can be changed with Custom CSS if you are using a pre-made theme.
Custom CSS is a feature available with the Unlimited, Premium, and Business Class plans.
The basic formatting elements for the Post Title are included in the example below:
.entry-header, .entry-header a {
border-bottom: 1px solid #336600 !important;
color: #728FCE !important;
font-family: Georgia, 'Times New Roman', serif !important;
font-size: 14px !important;
font-style: italic !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
text-transform: uppercase !important;
}
The classes related to the Post Title are:
- .entry-header: Required class to apply different formatting to the post title.
- .entry-header a: The a element assigns the formatting to the post title when it is a link. By default, post titles are links to the individual post page on the front page of your blog, and category and date-based index pages. Required if you want to aply the formatting to post titles on all pages of your site.
- .entry-header a:link: The a:link assigns the formatting to links which are yet to be visited.
- .entry-header a:active: The a:active assigns the formatting to links which is seen when you click a link.
- .entry-header a:hover: The a:hover assigns the formatting to links which is seen when you hover your mouse over a link.
- .entry-header a:visited: The a:visited assigns the formatting to links which have already been viewed.
Not all pre-made themes require the formatting for a:link, a:active, a:hover, or a:visited classes, and in most cases, .entry-header and .entry-header a will apply the formatting to all post titles.
The main formatting options:
- Border: The border attribute will place a border on all four sides. Alternatively, the separate attributes - border-top, border-right, border-bottom, border-left - can be used to only apply to separate sides. The additional elements of a border are width, style, and color.
- Color: Replace "728FCE" with your preferred color code. See the color code reference here.
- Font-family: The type of font is determined by the font-family. A list of comment fonts is available here. If you prefer to use an uncommon font, try Typekit.
- Font-size: Set the size of the text. Recommended measurement for font size is px (pixel).
- Font-style: Select italic or normal for the style of the font.
- Font-weight: Select bold or normal for the weight.
- Text-align: Select left, right, center, or justify for the alignment.
- Text-decoration: Select underline or none to remove the underline.
- Text-transform: Set the capitalization of the text with uppercase, lowercase, capitalize.
If you are using the Mosaic Theme, the post title is blue and narrow. To make the post title black, add a border under the title, and make the title bold, you would use the CSS:
.entry-header {
border-bottom: 1px solid #000000 !important;
color: #000000 !important;
font-weight: bold !important;
text-decoration: none !important;
}
.entry-header a, .entry-header a:hover {
color: #000000 !important;
text-decoration: none !important;
}
The text-decoration: none !important; element removes the underline which is added when you hover over the post title.
Each pre-made theme is a bit different. Since the Post Title is a link on the index pages, you may need to assign formatting to the .entry-header a, .entry-header a:link, .entry-header a:active, .entry-header a:hover, and .entry-header a:visited classes as well.
What is the purpose of !important element? By including !important within all the CSS code you apply to your blog ensures your changes will override the default. While you can get away without including !important, we highly recommend adding it for consistent results.