Here are my steps for customizing the new Advanced Templates. I could not find an overview in TypePad help on customizing a TypePad theme.
FYI, from TypePad Knowledge Base: What are Advanced Template Sets?
Things to know in advance:
Once you switch to an advanced template you have control over the page layout and design, but you will lose the WYSIWYG ability to easily switch themes (the look), change the layout (columns) or add content (widgets) - this will all have to be done in the page code. Don't panic when all of those tools have disappeared. You CAN easily switch back to one of your WYSIWYG aka Drag-and-Drop themes.
To create Advanced Templates you should have a pretty good understanding of HTML, recognize PHP and know enough not to break coding; a very good understanding of CSS plus the ability to think in an object-oriented way. There are lots of pieces that go together and affect each other. If you want to learn, great, but don't start on a site that has to pay the bills or needs to be finished under a deadline.
custom banner, go back to a pre-built theme and add the banner using
the Custom CSS tab in your design control panel.
How to create an Advanced Template Set:
Preliminary: if you have a theme you want to modify on your live blog, fine. If not, create a Test blog and apply a theme close to what you want. Put in atleast one post and one page if you make a Test blog.
Next: create a new blog, I call it "MyLayoutBlog". This is where you will do your experimenting. (You get as many blogs as you want if you are paying for a plan that lets you use Advanced Templates, and can delete when done.)
- Go to the design tab in your new MyLayoutBlog.
- Go to Saved Designs.
- Create a new design, choose Advanced Tempates and Create.
- This will create a set in your Design list called Advanced Templates.
NOTE: The Advanced Template is based on the theme "Asterisk White"
NOTE: The Advanced Template is set to the "Two-Column-Right' Layout by default.
Apply your Advanced Template set in your MyLayoutBlog and then click back to Current Design.
The choices for Theme, Layout, Content, CSS, will be gone and in their place is the list of your Advanced Templates in 3 groups:
1. Index Templates. These dictate page layout for each type of page.
The Archive Index Page, Main Index Page plus the RSS feed pages. Stylesheet and Theme stylesheet are also here. This seems mysterious to me, I would have put all the page/post templates in the first group and the stylesheets in another group.
2. Archive Templates (not clear to me why they are a different set and why the Pages template is here, perhaps these are secondary from an engineering point of view). These are the layouts for the way the Archives by Category, Archives by Date, Individual archived posts and the individual Pages you create.
* You set what content is going to be seen on your home page via the
Configure tab > Preferences > Front Page: Display recent posts or Display a Page (pick the page to display). If you display posts the latest post appears at the top by default.
3. Template Modules are the last group. These are the bits of code (Content or Widgets) that go into the secondary columns of your pages, like category listings, page listings, latest posts, your picture, blogroll, etc. You create new modules to put whatever you want in them with Advanced Templates.
NOTE: The Navigation Bar is found in this group. By default it has a home, about, archive and subscribe link. You will see this code at the center if you select the module to edit it:
<li class="nav-list-item"><a href="<$MTBlogURL$>"><$MTTrans phrase="Home"$></a></li>
<li class="nav-list-item"><a href="<$MTUserSiteURL$>about.html"><$MTTrans phrase="About"$></a></li>
<li class="nav-list-item"><a href="<$MTBlogURL$>archives.html"><$MTTrans phrase="Archives"$></a></li>
<li class="nav-list-item"><a href="<$MTBlogURL$>atom.xml"><$MTTrans phrase="Subscribe"$></a></li>
Caution: the red links are different for Home and About. The Home ($MTBlogURL$) goes to the blog the template is applied to. The About ($MTUserSiteURL$) goes to the About page that is created separately in your Control Panel > Profile > About Page.
If you want to add a page you created in your MyLayoutBlog, use the $MTBlogURL$ not UserSiteURLS.
TIP: If you create the same page names in your live site, you won't have to change the navigation.
TIP: The about page is easiest to deal with by simply creating your own About Page and removing the link to the default About page in the default navigation if you like control and consistency.
GORY DETAIL TIME: customizing the templates. Remember you are working in the MyLayoutBlog you made for this purpose.
If you are creating from scratch, the asterisk stylesheet is in your set, called "theme stylesheet" while the other stylesheet is empty so anything you put in it will override the default Theme stylesheet and the TypePad base template. Go for it.
This tutorial is about creating a custom version of an existing theme offered in the theme selector. I assume that is fine to do since you can customize the CSS of those themes in the WYSIWYG mode. I do include the author's name in my new stylesheet header if there is one in the theme I am basing my modifications on.
SET THE LAYOUT: Open the Main Index Template for edit first and find the "two-column-right" reference if you want to change it. Change it to one of the other styles in the theme stylesheet, here are the defaults. Creating your own goes beyond the scope of this how-to.
I usually wait until I have the main page styled before I go in and change all the other page templates: archive-index, datebased archives, category archives, individual archives and pages. Then I do them all at once at the end. If you switch to three-column you need to add the third column. Here is the main index template with it added red. You could do it other ways, move the beta from the bottom and put gamma third.
<div id="pagebody-inner" class="pkg">
<!--where we add the third column-->
<div id="gamma-inner" class="pkg">
<!-- include sidebar module content here - Julie added this here and renamed it gamma for three column -->
</div><!-- #gamma-inner -->
</div><!-- #gamma -->
<div id="alpha-inner" class="pkg">
<!-- entries -->
The widths are set toward the bottom of the theme.css stylesheet. Copy and paste the relevant layout styles to your Stylesheet.css and adjust as needed.
Here is a diagram of the three-column layout I worked on.
Now that you have a home page with the layout you want and atleast one post or some content, move on to the styling.
I could not customize the styles without FireFox (FF) and Chris Pedrick's Web Developer Toolbar, plus the FF add-ons Measure It and Color Picker. Plus Dreamweaver and TextPad.
1. Open the weblog you have with the theme you want to work from in a browser window. From the webdev toolbar > Information > display ID & Class details.
2. Open your Layout blog in another window (with your Advanced Template applied to it)
Open the CSS editor in FF, and in the styles.css style sheet start adding your own styles. (The base style sheet is generated by TypePad and the theme stylesheet is the Asterisk stylesheet.)
TIP: if you don't see your changes, try adding them to the bottom of one of the other stylesheets, they may be taking precedence in the FF window. But add them to your stylesheet.csss in your template when ready (next step). The styles applied in FF are lost when you close the editing window, so copy them first!
3. Open the stylesheet.css for edit from your Typepad Control Panel. It should be empty except for the import of the base and theme stylesheets.
4. Open a new css file in DreamWeaver (DW) or Textpad. Add the changes you have made there and copy and paste from there into the stylesheet in step 3.
Why not just copy right to your stylesheet in the control panel?
- Because there is no "undo" in the stylesheet editing window and you lose whatever you overwrote each time. Merging two styles is an exercise in conflict management.
- Each time you get a step right, save a version as stylesheet1, 2, 3...
That way, when you make changes that mess up everything, you can recover. For example, I adjusted the header to the way I want. Save V1. Got the colors and fonts right. Save V2 which now has the right header and fonts. Move on to styling the 3 columns and importing some of the styles from the theme I like that conflict with the styles in Asterisk. Ooops. Totally messed everything up and can't undo in the TypePad editing window..... go back to V2.
Note: the links to the base TypePad stylesheet and the theme stylesheet will re-spawn if you copy and paste over them. You can delete the asterisk theme stylesheet when you are done but the link will stay so I prefer to just leave it.
TO ADD BACKGROUND IMAGES AND HEADER:
- Upload the images via the Files tab in your Control Panel
- Click on the image name to view them and get the URL for the image.
- Then replace the Asterisk images in the stylesheet with yours.
Next there may be several hours or lost days of hunting down styles with FF and adding your customizations to your new stylesheet, uploading it and viewing your test blog and tweaking, depending on how custom you need to be.
TIP: use a file merge program like Araxis Merge to view the theme stylesheet next to your own advanced template stylesheet to see what elements that you need might be missing and are causing trouble.
When your Layout blog looks exactly as you want, rename our Advanced Template to "My whatever" and apply it to your live blog. Further adjustments may be needed if there is lots of content in your blog and you see categories and widgets that were not enabled in your test blog and so not styled.