Typepad Knowledge Base
Index Typepad Status Login Need additional help?

Design Lab: Style Settings

The Design Lab adds more easy to configure design options which can be set in the Style settings.

When using the Design Lab, go to Design > Style to configure the styles for the elements:

Fonts

Scroll through fonts in the Handwriting, Display, Serif, and Sans Serif categories. Click on the font to make it the Active font. The active font can be applied to a design element by clicking the location in the preview or using the menu on the right.

For more details on choosing, importing, and applying fonts, see the article on applying fonts to a design.

If you don't see a font you like, you can import another font from the Google Web Font library. Learn more.

Banner

The Banner options will vary depending on whether or not a custom banner image has been added. A custom banner can be uploaded at Design > Banner. Learn more.

Text Banner

  • Title: Select a Font and Color for the Blog Name. The Blog Name can be changed at Settings > Basics. Learn more.
  • Description: Select a Font and Color for the Blog Description. The Description can be changed at Settings > Basics. Learn more.
  • Background: Select a color for the background behind the Title and Description. Click the x to remove the background color or + to add it back. If no background color is set, the title and description will display over the Page Background color.
  • Show Banner: Displaying the banner is optional. With Yes selected, the banner will display at the top of the page. With No selected, the Navigation Bar will display at the top of the page.

Custom Banner Image

  • Top Strip: Select a color for the strip which appears at top of page. Set color to same as Page Background to blend strip with rest of background. Not an option when banner spans full width of browser.
  • Show Banner: Select Yes to display banner at the top of the page. Select No to display the Navigation Bar at the top of the page.

Navigation

For the Navigation Bar, you can choose None to not display the navigational links or display Icons or Text links. At Design > Content, you can edit the items in the Navigation Bar by clicking the pencil icon next to the module. Advanced configuration for Navigation Bar content is not available with the Design Lab currently. Learn more.

Icons

  • Link: Select a color for the link icons.
  • Background: Select a color for the navigation bar background. Click the x to remove the background color or + to add it back. With no background, the icons will display over the Page Background color.
  • Display Position: Select to display the navigation bar above or below the banner. Not an option when using a custom banner.
  • Show Blog Title: If Yes, the blog title which links to the home page of your blog will be included in the navigation bar.

Text

  • Link: Select a color and font for the links.
  • Background: Select a color for the navigation bar background. Click the x to remove the background color or + to add it back. With no background, the links will display over the Page Background color.
  • Display Position: Select to display the navigation bar above or below the banner. Not an option when using a custom banner.
  • Text Alignment: The links can be aligned left, center, or right in the navigation bar.
  • Show Blog Title: If Yes, the blog title which links to the home page of your blog will be included in the navigation bar.

Posts

The Post modules are optional. At Design > Content, you can opt to not display the Post Title, Post Date Header, and Post Footer and customize the modules. Learn more.

  • Title: Select a color and font for the Post Title.
  • Date: Select a color and font for the Post Date.
  • Text: Select a color and font for the content of the Post Body.
  • Footer: Select a color and font for the Post Footer.
  • Post Background: Select a color for the background of the post. Keep in mind the background color should contrast with the Text and Links colors. i.e. Dark background with light text color. Light background with dark text color.
  • Post Links: Select a color for the links included in the body of a post.

Sidebar

The Style options for the Sidebar will be applied to the modules you have added at Design > Content. With the 1 Column Layout, sidebar modules actually display below the main content column instead of to the side.

  • Header: Select a color and font for the Header of the sidebar modules.
  • Link: Select a color and font for the links in the sidebar modules. This applies to Links Typelists as well as any links added via the custom sidebar module and other modules.
  • Text: Select a color and font for the text in the sidebar modules. e.g. Image captions.
  • Background: Select a background color for the sidebar.
  • Text Alignment: Align the sidebar content to the left, center, or right.
  • Fill Column Height: If Yes is selected, the sidebar background color will extend the same height as the main content column. If No is selected, the sidebar background color will stop after the last module.

Footer

The Blog Footer is an optional module that appears at the end of all pages of your blog. At Design > Content, you can opt to not display the Blog Footer or click the pencil icon to customize the module content. Advanced configuration for Blog Footer content is not available with the Design Lab currently. Learn more.

  • Link: Select a color and font for the links in the Blog Footer.
  • Background: Select a color for the background behind the Blog Footer. Click the x to remove the background color or + to add it back. If no background color is set, the Blog Footer content will display over the Page Background color.
  • Link to Top of Page: If Yes is selected an arrow icon will display to the right of the Blog Footer which returns readers to the top of the page if clicked. If No is selected, the iconed linked to the top will not appear.
  • Text Alignment: Align the Blog Footer content to the left, center, or right. Not an option when Link to Top of Page is set to Yes.

Background

  • Page Background: Choose a solid color for the background which displays around the container of the blog.
  • Round Corners: If Yes, the corners of the banner, carousel, columns, and blog footer will be rounded. If No, the corners will be square.
  • Collapse Margins: For multiple column layouts, the Yes setting will remove the padding between columns. For the one column layout, the Yes setting will remove the padding between the main content column and the sidebar modules which are below. If No, the columns will be separated by padding.

Pattern

  • No Image or Pattern: With No Image or Pattern selected, the background will be a solid color.
  • Background Overlay: Select Choose an overlay from the Patterns menu to add a repeating pattern to the background. Use the arrows on the left to scroll through the overlays. Click on the overlay to select it. The available overlays work best with dark background colors, and overlays will be harder to see on light backgrounds.
  • Custom Background Image: A custom background image can be uploaded. Select Upload a custom image from the Patterns menu and click Browse or Choose File to select an image from your computer.

Collections

Select Collections to scroll through suggested combinations of color schemes and fonts. Click once on any collection to see a preview of the selection. You can start with an existing collection and adjust it, or start with the custom settings above.

When you have found a collection that you want to use, click on it to see it in the preview. If you want to change a color or font, click the Return to builder button. Then, you can change one or more elements of the collection. Click Save Changes to apply the changes to your blog.

Updated 14 December 2018

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