Themes's Profile | Typepad

This is Themes's Typepad Profile.

Join Typepad and start following Themes's activity

Join Now!

Already a member? Sign In

Themes

Recent Activity

Creating a new TypePad Theme

Introduction to Layouts and Themes When creating a new Theme, there are five Layout options you can style. Layouts are preset HTML and are output automatically by TypePad. The Theme is the customized CSS that sits on top of these Layouts. In short, Themes are easy because the HTML is... Continue reading

Posted Mar 20, 2012 at CSS Cookbook

0

Style the nav bar as hanging tabs

Here we'll style the nav bar as a solid thick colored line, with the menu items hanging from it as tabs with rounded corners: To create the bar and hanging tabs, we add this nav style to our Custom CSS: #nav, #nav-inner, .nav-list { background-color: #fff; border: 0; } #nav... Continue reading

Posted Jan 8, 2012 at CSS Cookbook

0

Add a fancy TypePad badge

You can add images to your sidebar using an Embed your own HTML module, but you can also do this with CSS only and using the existing Powered by TypePad module. Here is our sidebar with the fancy TypePad badge: In Design > Content, select the Powered by TypePad module... Continue reading

Posted Jan 8, 2012 at CSS Cookbook

0

Setting Column Widths - 1 Column Layout

The One-Column layout has the blog content area filling the entire width of the container area, and has the sidebar modules positioned at the bottom: In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at: /* Outline main columns */ #container... Continue reading

Posted Jan 8, 2012 at CSS Cookbook

0

Use multiple link colors in the nav bar

Here we'll set each separate link in the navigation to a different color: /* Set the navbar background color */ #nav, #nav-inner, .nav-list { background-color: #fff; border: 0; } /* Set the default link color */ #nav a, #nav a:visited { font-size: 105%; font-weight: bold; background-color: #fff; color: red; }... Continue reading

Posted Jan 7, 2012 at CSS Cookbook

0

Add a sidebar hover list

This sidebar menu is just like the messy sidebar list, but with straight lines instead of tilted: You can also see it in action on the sidebar here on the Style Guide site. .module-archives ul li { padding: 8px 15px; margin: 5px 0; } .module-archives a, .module-archives a:hover {color: #444;}... Continue reading

Posted Jan 7, 2012 at CSS Cookbook

0

Add a shadow across the top of the page

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. body:before { content: ""; position: fixed; top: -10px; left: 0; width:... Continue reading

Posted Jan 7, 2012 at CSS Cookbook

0

Add a date header ribbon

Here we'll add a date header ribbon that wraps around the edge of the container. This effect is specific to a Two-Column-Right layout (since the ribbon wraps around the content edge on the left): h2.date-header { position: relative; width: 40%; font-size: 1.3em; font-weight: bold; padding: 7px 20px 7px 25px; margin:... Continue reading

Posted Dec 31, 2011 at CSS Cookbook

0

Add a fun polaroid sidebar menu

This is fun menu that makes your images look like polaroid pictures and does a cool zoom effect when you hover over it: See it live in action here! This is done completely in CSS with no extra scripts added! Thanks to zurb.com for the code. This has been modified... Continue reading

Posted Dec 31, 2011 at CSS Cookbook

0

Add a messy sidebar list

Here we add formatting to the sidebar modules to give it the look of a "messy list" - this rotates each content item a little bit each way so it looks haphazard. It's a funky and fun and a way to add some interest: .module ul li { padding: 8px... Continue reading

Posted Dec 29, 2011 at CSS Cookbook

0

Clean Theme setup & how to use this guide for customizing your blog

First, set your blog to use the Clean theme. Some of these style customizations will work with other themes, but are made specifically to drop in perfectly with the Clean framework. To add Clean to your blog: Log into your TypePad account and go to the Design tab for the... Continue reading

Posted Dec 28, 2011 at CSS Cookbook

0

Create a banner with an overlapped text effect

This is a fun display made with overlapping and offsetting the text: Code via and adapted to fit in the TypePad template structure. First, we use the code to have a text-only banner: #banner { height: auto; } #banner-inner { position: relative; top: 0; background: #fff; padding: 0 0 15px;... Continue reading

Posted Dec 28, 2011 at CSS Cookbook

0

Create a banner with an inset text effect

This is a cool effect with the look of the text being sunk into the background: Code via and adapted to drop into the TypePad template. First, we use the code to use a text-only banner: #container { background: #eee; } #banner { height: auto; } #banner-inner { position: relative;... Continue reading

Posted Dec 28, 2011 at CSS Cookbook

0

Add borders around blog elements #2 - stitched effect

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. Stitched border around the banner: #banner-header, #banner-description {... Continue reading

Posted Dec 28, 2011 at CSS Cookbook

0

Setting Column Widths - 2 Column-Left Layout

The 2 Column-Left Layout has the sidebar in the first column, and blog content on the right: In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at: /* Outline main columns */ #alpha { border:1px dashed red; } #beta { border:1px... Continue reading

Posted Dec 22, 2011 at CSS Cookbook

0

Setting Column Widths - 2 Column-Right Layout

The 2 Column-Right Layout has blog content in the first column, and sidebar column on the right: In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at: /* Outline main columns */ #alpha { border:1px dashed red; } #beta { border:1px... Continue reading

Posted Dec 22, 2011 at CSS Cookbook

0

Setting Column Widths - 3 Column-Right Layout

The 3 Column-Right Layout has blog content in the first column, and two sidebar columns on the right: In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at: /* Outline main columns */ #alpha { border:1px dashed red; } #beta {... Continue reading

Posted Dec 22, 2011 at CSS Cookbook

0

Create a banner that stretches the full width of the screen

#container { width: 100%; } #banner-inner, #pagebody-inner, #nav-inner, #footer-inner { width: 1000px; margin-left: auto; margin-right: auto; } body, #banner, #footer, #footer a, #footer a:hover { background: #FAFAD2; } #banner { height: auto;} #banner-inner { position: relative; top: 0; padding: 10px 0px; background: transparent; border: 0; } /* Nav Bar Color... Continue reading

Posted Dec 21, 2011 at CSS Cookbook

0

Change the side margin between the content and container edge

The default setup for the Clean Theme features a wide content area - the widest possible within the set container size we are using (1000 pixels). Because of this, when you add a background color or image you may find that you wish to move the text in from the... Continue reading

Posted Dec 20, 2011 at CSS Cookbook

0

Change the font family for blog elements

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: body { font-family: "Helvetica Neue",... Continue reading

Posted Dec 18, 2011 at CSS Cookbook

0

Style post image caption

The default style sets the text as slightly smaller than the post text and italicized: /* Photo Caption */ .photo-caption { font-size:90%; font-style:italic; font-weight:400; text-align:center; } To make the text slightly larger, bolder and a different color, use: /* Photo Caption */ .photo-caption { color: #003366; font-size: 110%; font-style:italic; font-weight:600;... Continue reading

Posted Dec 18, 2011 at CSS Cookbook

0

Change the border of images in posts

The default style specifies rounded corners around images in posts: /* Rounded corners on images in posts */ .entry-body img,.entry-more img { -moz-border-radius: 7px; -webkit-border-radius: 7px; } To remove the rounded corners, use: .entry-body img,.entry-more img { -moz-border-radius: 0; -webkit-border-radius: 0; } To add a standard border around each image... Continue reading

Posted Dec 18, 2011 at CSS Cookbook

0

Style the Featured Post

Border around the entire Featured Post Set the border width, radius, padding, and colors: /* Featured Post */ .entry-featured { border: 2px solid #ddd; margin-bottom: 15px; border-radius: 25em/3em; background: #F5DEB3; padding: 30px 25px; } /* Border around content */ .entry-featured .entry-content { border-top: 2px dotted #fff; border-bottom: 2px dotted #fff;... Continue reading

Posted Dec 18, 2011 at CSS Cookbook

0

Change the color of post items

Post Link Colors /* Link Color */ a { color: #f27982;} a:hover, a:visited:hover { color: #fdd0a6; } a:visited { color: #666; } Post Text Colors Post Date Header /* Date Header Color */ h2.date-header { color: #FF8C00; } Post Title *For this you set both, because the post titles on... Continue reading

Posted Dec 18, 2011 at CSS Cookbook

0

Setting Column Widths - 3 Column Layout

The 3 Column Layout has sidebar content in the first column, blog content in the middle column, and another sidebar column on the right: In the screenshot, we have added temporary helper borders so we could easily tell what we are looking at: /* Outline main columns */ #alpha {... Continue reading

Posted Dec 18, 2011 at CSS Cookbook

0

More...

Subscribe to Themes’s Recent Activity