To download a printable, PDF of this post, click here
A week or so ago, I posted about Modifying A WordPress Theme to accommodate the extra width needed to post a VFlyer.
Then in a conversation here, I mentioned how much easier it would be to accomplish the same thing in TypePad.
I thought I'd demonstrate just how easy. People who are new to TypePad can follow along, TypePad regulars can go take a coffee break. :-)
This post is going to be dreadfully long, because I've included lots of screen shots, and tried to break the process down into the tiniest baby steps.
First, you need the TypePad Pro or Premium account that allows you to have unlimited blogs and access to the custom design features. (Pro is $149.50 per year, Premium in $299.50 per year -- remember that includes hosting.)
Click the Weblogs tab, then click Create a new Weblog
Name the new blog (I'm going to call it "test-01") and fill in the rest of the Form. Note you can always "map" a unique domain name to the blog after you've created it. If the blog is under construction, I usually answer "Make this weblog public?' with "No". However, you do need to remember to change that when you're done with the construction.
Also note when the new "test-01" blog is created, TypePad will also name the theme for that blog "test-01". The theme exists separately from the blog itself. When you've finished tweaking the theme as described below, you can then apply the new test-01 theme to any TypePad blog in the same account.
Click Create New Weblog.
Before you do anything else, click "Compose a new post".
Type in anything, you can delete it later. When finished, click Save.
Now you're ready to rock and roll. Click on the Design tab. That will bring up the Current Design screen. Click Change Theme.
Select the little radio button for "Custom Theme". This is the doorway to the fun stuff. The screen will change as soon as you select that button. You are now at the "customize Your Theme" screen. Under the first item "General Page Settings", click "Edit This Element".
When you click Edit This Element, a pop-up dialogue box appears.
My project here was to duplicate the look of the Cutline WordPress theme that I modified for http://www.bobtaylorproperties.com/
So, here are the settings to fill into each item to create that same look:
General Settings:
- Background: FFFFFF
- Border: None
- Border Color: FFFFFF
Main Content Column:
- Center Column: Fluid
- Background: FFFFFF
- Border: None
- Border Color: FFFFFF
Right Column:
- Right Column: 300 pixels
- Background: FFFFFF
- Border: None
- Border Color: FFFFFF
Link Style:
I left these all at the default setting: Color 003366 for each item.
After you've edited all the settings in the dialogue box, click Save Changes, and the box will close, taking you back to the Customize Your Theme screen.
Move on to the next Element -- under "Page Banner", click "Edit This Element"
To use your own header banner, under "Optional" check "Use this banner instead of a text title", and upload your own banner image. Note that you will tell TypePad to center the banner a little later, don't worry about that for now. Click Save Changes.
The dialogue box closes, and you're back to the Customize Your Theme Screen. The next element is Weblog Posts. Click Edit This Element.
Here are the Weblog Post Settings I used:
Date Header:
Post Title:
Post Body:
Post Footer:
Note: I'm not crazy about the Georgia font, but since the goal is to match the WordPress Cutline Theme, Georgia, it is.
Click Save Changes.
Now you're back to the Customize Your Theme Screen, with one final Element to edit.
Under Sidebar Items, click Edit This Element
Here we go with the Georgia again.
Sidebar Title
- Font & Size: Georgia Small
- Font Color: 006699
- Style: Bold All Caps
- Border: Bottom Solid
- Border Color: 006699
Sidebar Items:
- Font & Color: Georgia Small
- Font Color: 666666
- Style: none checked
- Alignment: Left
- Line Spacing: Normal
I left the defaults for Sidebar Images and Sidebar Link Style
Click Save Changes at the bottom of the dialogue box. Back at the Customize Your Theme screen, scroll to the bottom and click Save Changes again.
Now you're back to the Current Design screen. Click Change Layout.
By default, the layout is set at Two Columns Right. That's just fine. Leave it there. If for some reason, another layout is selected, click on the radio button for Two Columns Right and click Save Changes to return to the Current Design screen.
Stay with me. There is one last step to building the framework of this theme. At the Current Design screen, look at the last item in the list: Edit Custom CSS. Click there.
Don't worry. You don't need to know a thing about CSS. Just copy and paste these two lines into the Custtom CSS box
#banner { background-position:center; }
.layout-two-column-right #container {padding: 10px 5% 20px;}
Then click Save Changes.
The first line is telling TypePad to center the banner image. The second line is telling TypePad to allow a little extra white space around the content -- 10 pixels at the top, 5% of the page size at the left and right sides, and 20 pixels at the bottom.
Back at the Current Design screen. click Republish Weblog, a Publishing dialogue box opens - Publish All Files shows in the drop down box. Click Publish.
There you go: http://cheryljns.typepad.com/propertytemplate/
The info in the sidebars was added with TypeLists. I'll cover those another day if anyone is interested.
There is one big difference http://www.bobtaylorproperties.com has some horizontal navigation tabs. I added those by hand to the WordPress theme. And on another day, I'll demo how to add them by hand to this TypePad design.
But I figured this was plenty for one day.
To download a printable, PDF of this post, click here
