May 24, 2011

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.

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services