The Tonic theme is available for all Pro plans.
With all five class layouts available, Tonic is perfect for a wide variety of blog types. Choose from ten different color options, or customize it with your own color preferences via a few lines of CSS, and you'll be ready to go in a matter of minutes!
Gray, Light Green, Turquoise, Coral, Blue
Standout Features
- Comes with all five classic layouts;
- Has a visually interesting background for some pop;
- The wide column is perfect for images, videos, or showcasing your text;
- Set a post to be featured and it'll stand out as a great way to grab your readers' attention;
- Requires only 4 lines of CSS in the Custom CSS screen to make a full color change.
Customize this theme
If you are an Unlimited blogger or above then you will be able to customize the theme even further with the Custom CSS feature.
To get started, let's take a look at the color variation CSS for the default (orange) version of Tonic:
/*============ Tonic Theme // ORANGE============*/
/* Background color for blog body */
body { background-color: #345474; }
/* Background color for Banner and Blog Footer */
#banner, #footer-inner { background-color: #B2C7DC; }
/* Background color for post column and sidebars */
#alpha, #beta, #gamma { background-color: #E6EDF4; }
/* Post date color */
h2.date-header { color: #2C4762; }
All of the above CSS adjusts the basic colors for the theme. If you want to adjust the featured post background color, or the link color, then you'll want to use the following CSS as your guide, replacing the hexadecimal color code with your preferred color:
/* All links - color */
a { color: #666666; }
/* All Links - Hover Color */
a:hover { color: #888888; }/* Featured Post Container Color */
.entry-featured { background-color: #ffffff; }
To override a specific color, or all colors if you want to completely customize the theme to your preferred colors (branding!), locate the section of CSS that references the area you want to customize. Copy that CSS and paste it into Design > Custom CSS.
Replace the default color code (e.g. #345474) with the hexadecimal code of your choice. After that, preview and save your changes.
Replace the default background striping
The default background in the Tonic theme uses a transparent striping pattern. When you set a solid color for the body background, the striping will automatically appear due to the transparent background image. You can use the CSS above to change the color behind the striping OR you can completely remove and/or replace the background stripe.
To remove the background striping, paste the following CSS into Design > Custom CSS:
#body { background-image: none; }
To replace the background striping with your own image, follow the instructions in our article on adding a background image.
Add a background image to the banner
The banner section of the Tonic theme is set to 100% width, so you'll either want to:
- create a banner image that is repeatable;
- or set a fixed width (recommend 1000px wide) for the banner so that it can be centered over the blog content
You can read more about adding a banner to a pre-defined theme, but here are specifics for the Tonic theme:
For a repeatable background for the banner, you'll need to upload your banner image to the File Manager, then use the following CSS at Design > Custom CSS:
#banner { background: url(http://example.typepad.com/image.jpg) repeat; }
Replace http://example.typepad.com/image.jpg with the URL of your uploaded image.
For a fixed width background for the banner, you'll need to make a few more adjustments. First, upload your banner image to the File Manager, then use the following CSS at Design > Custom CSS:
#banner {
background: url(http://example.typepad.com/image.jpg)
no-repeat top center;
width: 1000px;
height: 200px;
margin: 0 auto;
}
Replace http://example.typepad.com/image.jpg with the URL of your uploaded image, then adjust the height to match the height of your image as well.
With the above changes you should be able to customize the theme as much as you like. If you find that something is missing, or you aren't clear on a particular step, feel free to open a help ticket.
Interested in knowing the exact steps taken to create the Tonic theme? Check out our Making Of... page to review the steps and submit your own color variations for Tonic. Go a few steps further and use our CSS framework to build and submit a theme if you'd like us to consider offering it to all Typepad users!