Here we will change the background color for the body of the page:
A fun gradient generator. Copy the code from there and add it to your custom css - making sure that you have the code from the generator wrapped with the brackets for the body:
Here we'll add an image for the background of the blog:
First, upload the background image you would like to use to your TypePad account in the File Manager. Copy the URL for the image and replace it in the following code:
If you'd like your background image to remain fixed instead of scrolling with the content, add the fixed setting for the background-attachment:
The first line adds the border around each section.
To get the effect we're looking for, the modules will need to be spaced out more so we add 15 pixels of margin on the bottom of each.
The rounded corners are added in the next line. This is optional and you can remove the border-radius link if you want square corners.
And then we color in the sidebars by adding the background color and add some padding around the inside of the box.
*Depending on the size of your borders you may wish to adjust the space between the columns.
The Clean theme uses one font across all elements - Lato from Google Web Fonts (see the section below for more information on Google Web Fonts).
To change the default font on your blog, simply add the font-family of your choice to the body code:
Note: When multiple fonts are listed, the page looks for them in order. For example, in this case, it would first look for Helvetica Neue. If it is present, it will use that, but if it is not not present then it will continue on and look for Helvetica. If Helvetica is not present, then it looks for Arial, and if Arial is not present then it uses the default sans-serif font on the computer. Also, font names that have multiple words (like "Helvetica Neue") need to be enclosed in quotes when used in the CSS code. Font names that are a single word do not need quotes.
Some other standard fonts (also see here) that people usually have installed are:
Serif font-stacks
Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
"Lucida Bright", Georgia, serif;
Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
Sans-serif font-stacks
Optima, Segoe, Calibri, Arial, sans-serif;
Futura, "Trebuchet MS", Arial, sans-serif;
"Gill Sans", "Gill Sans MT", Calibri, sans-serif;
"Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
Using Google Web Fonts, the font is stored online so it does not rely on the viewer having the specific font installed on their computer. To import a Google Web Font for use on your blog, first head on over and choose a font.
When you have found one that you would like to use, click the Quick-use link next to the font. Then scroll to where it says Add this code to your website. Click on the @import tab and copy the code shown there.
Note: Depending on the font, there may be different font weights available in the pack. Select only the weights you will be using (no need to load extra things you are not using, as this will slow down the page loading time).
For this example, we are going to use the Noticia Text font. We will apply it to the entire blog so we selected the normal version (400) to use for the regular text and the bold version (700) to use for the title. The import code provided for this font looks like this:
Take the @import line and paste it in your Custom CSS at the top. This imports the font for use but does not actually apply on the blog until you add the font-family next.
Back on the font page at Google, scroll down to the next section and you'll see Integrate the fonts into your CSS. There it will display the font-family:
font-family: 'Noticia Text', serif;
Take this Google font-family provided and put it in your body code and add it to your Custom CSS:
And there we are with our new serif blog font!
Here we'll change the blog title font (to Signika and leave everything else as it is:
Since we are using the new font only for the blog title, we'll select just the bold (700) version to be imported:
This is a neat CSS effect we found at design shack that gives the appearance of a stitched seam around the edge and adds a drop shadow for a realistic look. Here we have adapted it to fit with the TypePad template.
Here is a quickie that adds a shadow across the top of the blog, and has an effect of scrolling behind the shadow when the page moves:
Before:
After:
Click to see more clearly in a live page demo.
From red-team-design.com
