Cécile is an image consultant in Paris, France who offers personal shopping, makeovers, wardrobe reviews and who will even accompany you to the beauty salon in her full Relooking package. If you want to make yourself over in Paris, visit Cécile.
This is totally off-topic, but it was a dreadfully long and grey winter in Paris since November 2008 and so I need to chronicle the arriving of Printemps (not the department store but Springtime). Will try to replace istock with my own photos over the years.
First, the fall, which is sometimes nice and long and rich. (my photo of Bois de Vincennes)
Skipping right along, Hyacinths are the first sign, given to friends to remind them winter will end in January-February.
Next, the first trees to bloom are the Ornamental Plums or Cherries planted all around Paris, which fall and cover the ground with a layer of a pretty pink snow of blossoms. This is in March or April, depending on the temperature that year. (my photo)
Then tulips go into all the parks in colors for Easter.
End of April people stand on the corners and sell bouquets of Lilacs, and some areas are filled with the fragrance from gardens of them. Isn't it great how Lilacs make the perfect bouquet just sitting in any vase?
(my photo of a garden in Bures-sur-Yvette south of Paris in April, 2009)
Something so ephemeral it can't be captured are the tiny papery blossoms from the tall trees shading the streets of Avenue d'Italie and Avenue de Choisy in the Chinese Quarter of the 13th. In a spring wind on a day with sunshine, these fall like translucent pieces of gold and swirl along the sidewalks, visualizing the dance of the spring breezes.
Wisteria comes along with the Lilacs, there is an apartment building near me that is a riot of color with all of the possibilities on display. (This isn't it, maybe next year..)
Suddenly the trees dress themselves. Paris has chosen a purple-flowering tree that comes into bloom after the Lilacs to plant around many of the city halls.
After this, it is a free-for-all.
Place d'Italie, Paris
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.
Advanced Template sketch (full size)
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.)
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.
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.
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?
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:
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.
Happy customizing.
How to add a favicon from TypePad help
Favicons are the cute little logos that show to the left of your site URL in the browser address bar. TypePad lets you add your own custom favicon to your blog. If you want to add one for each of your blogs it seems like you have to point a domain to each separate blog as of April, 2009, but correct me if I am wrong.
How to add a favicon from TypePad help
...and read this article: 5 Harsh Truths about Web Design firms
before proceeding to invest in, design, develop or market a web site. It is an excellent summary of how Web sites go wrong. I would add the following as crucial to building a success rather than building a web site:
Branding, information architecture, business analysis and good SEO.
In the continuing search for the Holy Grail of online forms, here is one that is totally customizable. It requires the ability to upload files and use PHP so it does not work on hosted blogs like TypePad and WordPress, but it is brilliant in its simplicity and works like a charm. Plus the developer is a great guy, please make a donation or buy him a coffee if you benefit from his efforts.
http://www.formmail-maker.com/
He also offers something cute, you can get a rounded box (try to do a rounded box without being a web designer or Adobe aficionado.) He even provides instructions on how to make a rounded box in Photoshop, this person is kind-hearted to web workers.
For 2009 blogs have really come a long way. As a developer, I work with most of the mainstream blogs for one client or another. Right now I have a client who has a terrific small business and moving her from her html site to a blog platform like Typepad or Word Press would be liberating for both of us. She needs to update her teaching schedule monthly and needs a WYSIWYG to do it.
Alas, she has a form on her site that allows students to request and get the first class free. It has been a great marketing tool so we can't give it up, but not so easy to add a validating, customizable form to a hosted blog!
Below is a Google doc form which I discovered in this pursuit. Below that is a Response-o-Matic form that works with Typepad too. What do each of them offer?
This is a form created free on Google docs. You can embed the form in your TypePad site or Blogger site (duh, Google owns Blogspot/Blogger) but not a WordPress.com site hosted at WordPress or a SquareSpace site.
The good: Google uploads the information to a spreadsheet in your Google docs (you need a free Google account) and also automatically forwards the input to your email from there if you want.
The limits: you can't do error checking on email, can't do Captcha, can't do any customizing of the look.
embedded i-frame html gives you the below form. This is just an example form because I need one with email and drop-down lists.
Free form from Response-O-matic. You get one free form, then it is $4 a month per form as of April, 2009. I really think they should make it much less expensive as you can get a great free php form on the web and free Google forms, or TypePad should integrate a form builder as should WordPress.
Today I am trying out free Thumbshots from their site, http://www.thumbshots.org
A bit ironic that there is no thumbshot of the thumbshot site. Or maybe it is because my account has not been verified.
Well, let's try another site, shall we? How about the Golden Gate Bridge website.
Interesting, here is the answer: http://www.thumbshots.org/Support/Forum/tabid/105/forumid/1/threadid/10/scope/posts/Default.aspx
"Depending on the popularity of your site, our robot will automatically index your site and generate the thumbshot for it. This process can take as little as a few minutes to a few weeks. Please be patient and it will eventually appear. Note the free thumbshots service runs at lower priority than paid one."
Wow, there is a forum administrator who knows the product and asks questions. Bravo
