October 30, 2014

Theme: Loft

The Loft Theme is a modern design, trimmed down to the essentials, for those of you who like to show off your photos. Take advantage of the full 1000px width of the theme to showcase your work, be it text or photographs, and enjoy how pulled together it appears when published.

Colors

The Loft Theme is available in Brick, Mustard, and Boho Light.

At Design > Colors, you can preview each color. Is there another color you wish to use? Jump to the customize section.

Loft Colors

Layouts

The Loft Theme has 3 layout options in order to optimize the look for larger photos. At Design > Layouts, you can select Two Column Right, Two Column Left, or One Column.

Note: The two column layouts hide the Reblog, Digg, and Delicious buttons in the post footer in order for the alignment to remain intact.

Customize the Theme

The Custom CSS feature available with the Unlimited and higher plans can be used to further customize the Loft Theme. At Design > Custom CSS, you can add the code to make any changes.

Is there a change you wish to make that is not listed here? Contact Typepad and we'll add it!

Change Colors

The color codes can be changed for Loft Theme elements regardless of which of the three color options are selected.

You can open the Stylesheet for the selected theme colors to see the CSS:
http://static.typepad.com/.shared:v90d99d4:typepad:en_us/themes/typepad/theme-loft/boholight.css

For example, if you want to change the Navigation Bar colors, copy the code from the Stylesheet into the Custom CSS field:

/* Nav Link and Hover Color */
.nav-list-item a { color: #BD8CBF; }
.nav-list-item a:hover { border-bottom: solid 1px #BD8CBF; }

Replace the current color code #BD8CBF with your preferred color code and click Save Changes. Similarly, you can change the other colors included in the Stylesheet.

Display All Footer Options

By default, the post footer is simplified with the Loft Theme, but if you would like all options to display, you can add the below CSS.

.entry-footer .entry-footer-info {
width: 250px;
padding-top: 0px;
}

.entry-footer .post-footers { display: inline; }

Then, go to Design > Content and click the pencil icon next to the Post Footer to choose which items to display. Learn more.

Additional Tips

Not quite what you are looking for? Check out these other articles:

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