March 09, 2012

Theme: Chunky

Chunky - a Typography theme

The Chunky theme is available for all Pro plans.

With a minimalist design, and a single pop of color for Featured posts, the Chunky theme is great for all types of blogs, and especially so for typography enthusiasts. No matter what type of blog you apply the design to, though, you can enjoy the standout features that allow your content to be the real focus.

Standout Features

  • Loads super quick since the design is text-based!
  • Displays large images beautifully.
  • Enhanced mobile viewing for folks on the go.
  • Features an extra clean, beautifully minimal design with lots of white space.
  • Showcases stunning fonts, suitable for a wide range of blog types and content.
  • Using a single column layout? Your blog footer is customizable and ready for content.

If you are a Pro Unlimited member or above then you will be able to customize the theme even further with the Custom CSS feature. We have examples below.

Change the background color of the Featured post

The default background-color for the Featured post in the Chunky theme is a bright yellow-orange. The code for the existing background color is:

.entry-featured { background-color: #ffe054; }

You can use the code above, replacing the #ffe054 with the hexadecimal code for the color you want to appear, at Design > Custom CSS.

Change the background color of the Navigation Bar and Blog Footer

The default background-color for the navigation bar and blog footer modules are a light gray. The code for the existing background color is:

#nav { background-color: #ddd; }
#footer { background-color: #ddd; }

You can use CSS, at Design > Custom CSS, to override the default with your own hexadecimal color code.  An example of how to edit the background color would be:

/* Set background color to lime green */
#nav { background-color: #def000; }

/* Set background color to olive green */
#footer { background-color: #abc000; } 

Display the blog description

By default the description of the blog, set at Blog > Settings > Basics, is hidden. You can set the description to display by overriding the default code with:

#banner-description { display: block; }

Place the code into the Custom CSS screen at Design > Custom CSS, then save your changes.

Change the background color of the "continue reading" link

The Chunky theme highlights the "continue reading" link, which displays when the Split Extended Entry feature is used in posts, by adding a medium gray background color. When hovered over, the background becomes a light gray.

To change the default background color, override it by using:

p.entry-more-link { background-color: #ddd; }

Replace #ddd with the hexadecimal color code of your preferred background color.

To change the default hover state color, use:

p.entry-more-link:hover { background-color: #f9f9f9; }

Replace #f9f9f9 with the hexadecimal color code of your preferred hover state color.

Place the code changes into the Custom CSS screen at Design > Custom CSS, then click save.

Remove the chevron (<<) in front of list items

To remove the chevron arrows that appear to the left of the list items in your sidebar, go to Design > Custom CSS, then enter:

.module-content li:before { display: none; }

Click the save button to save the changes to the design, then reload your blog.

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