Theme: Journal
The Journal Theme is available in 5 colors: Black , Green , Grey , Orange , and Red . At Design > Colors, you can select a different color for the theme.
With the Pro Unlimited and higher plans, you can use the Custom CSS feature to make further adjustments to the Journal Theme, including:
Remove the paragraph indents
Unlike other themes, the Journal Theme indents the first line of each paragraph. To remove the indent, go to Design > Custom CSS, enter the below CSS in the field, and click Save Changes.
.entry-content p { text-indent: 0; }
Adjust the column widths of the Journal Theme
The CSS used to change your column widths will depend on the layout selected at Design > Layouts. Custom CSS can only be used to change the column widths for the classic layouts. At Design > Custom CSS, you can enter the CSS for your layout and adjust the column widths to meet your needs.
One Column Layout
The widths will be the same for the #banner-inner, #pagebody, #nav, and #alpha classes.
#container { width: 100% !important; }
#banner { width: 100% !important; }
#banner-inner { width: 1000px !important; }
#pagebody { width: 1000px !important; margin: 0px auto 0px auto !important; }
#nav { width: 1000px !important; }
.layout-one-column #alpha { width: 1000px !important; }
Two Column Left Layout
The #banner-inner, #pagebady, and #nav widths are the same and the total of the alpha and beta column widths plus the beta margin.
#container { width: 100% !important; }
#banner { width: 100% !important; }
#banner-inner { width: 1000px !important; }
#pagebody { width: 1000px !important; margin: 0px auto 0px auto !important; }
#nav { width: 1000px !important; }
.layout-two-column-left #alpha { width: 200px !important; margin: 0 20px 0 0 !important; }
.layout-two-column-left #beta { width: 780px !important; }
Two Column Right Layout
The #banner-inner, #pagebady, and #nav widths are the same and the total of the alpha and beta column widths plus the beta margin.
#container { width: 100% !important; }
#banner { width: 100% !important; }
#banner-inner { width: 1000px !important; }
#pagebody { width: 1000px !important; margin: 0px auto 0px auto !important; }
#nav { width: 1000px !important; }
.layout-two-column-right #alpha { width: 780px !important; }
.layout-two-column-right #beta { width: 200px !important; margin: 0 0 0 20px !important; }
Three Column Layout
The #banner-inner, #pagebady, and #nav widths are the same and the total of the alpha, beta, and gamma column widths plus the margins set.
#container { width: 100% !important; }
#banner { width: 100% !important; }
#banner-inner { width: 1040px !important; }
#pagebody { width: 1040px !important; margin: 0px auto 0px auto !important; }
#nav { width: 1040px !important; }
.layout-three-column #alpha { width: 200px; margin-right: 20px; }
.layout-three-column #beta { width: 600px; }
.layout-three-column #gamma { width: 200px; margin-left: 20px; }
Three Column Right Layout
The #banner-inner, #pagebady, and #nav widths are the same and the total of the alpha, beta, and gamma column widths plus the margins set.
#container { width: 100% !important; }
#banner { width: 100% !important; }
#banner-inner { width: 1040px !important; }
#pagebody { width: 1040px !important; margin: 0px auto 0px auto !important; }
#nav { width: 1040px !important; }
.layout-three-column-right #alpha { width: 600px; }
.layout-three-column-right #beta { width: 200px; margin-left: 20px; }
.layout-three-column-right #gamma { width: 200px; margin-left: 20px; }
Add Custom Banner Image
To add a banner image to the Journal Theme, first go to Library > File Manager and upload the image. Copy the image URL after it is uploaded. At Design > Custom CSS, enter the below CSS:
#banner
{
background: url(http://example.typead.com/image.jpg) no-repeat;
height: XXXpx;
border-bottom: none;
background-position: center;
}
#banner-header a {
display: block;
height: XXXpx;
text-indent: -1000em;
}
#banner-description { border-left: none; display: none; }
Replace http://example.typead.com/image.jpg with the URL for the banner image uploaded to the File Manager. The background-position can be set to left, center, or right. The exact height of the banner needs to be entered in two places.
Change the font size and style
To adjust the font size and style, you can use the CSS below:
.entry-content { line-height: 14px; font-size: 12px; font-family: Arial; }
At Design > Custom CSS, you can enter the above code and make adjustments to the pixel (px) size and set the font family. Please note if you increase the font size, the line height will need to be increases too.
