26-Aug-2012

Default template

I wanted my first Telegram blog to have a rather simple design. That way it would be easier for me to understand and control the details. So I decided to have a default.html file in my templates-hidden folder. I started with a copy of the default.html at github and stripped away the fancy stuff that I didn't need. I kept the search form, but I'm not sure if I'll ever use it, so I hid it by putting "display: none" into its style attribute. I also kept the right_side div, in case I'll want to use it later.

One little detail I wanted to adjust early on, was the title of my pages. The default behavior in Telegram is that what you specify with the title keyword in your blog documents, is what ends up in the title element of your HTML pages. Instead of just "Home", "About" and so on, I wanted "QuickStuff Blog - Home", "QuickStuff Blog - About", etc. I could of course have typed this in explicitly, in every one of my blog documents, but I was looking for a smarter solution. David helped me with the solution; he said:

Put the following someplace in your template:

<div data-lift="xform?kids=true" data-css="title *">
<lift:site.name>sn</lift:site.name> - <lift:menu.title></lift:menu.title>
</div>

The code does the following:
The xform snippet creates a transformation that takes place after the page is initially rendered. The transform puts the DOM node inside the <title> tag, but because of the kids=true attribute, the outer <div> is stripped off.
The <lift:site.name> snippet invocation syntax is an alternative syntax that is more verbose, not HTML5 friendly, but avoids having the tags left around after the rendering (so you don't get <div>My Site</div>, but just My Site).

This worked fine, but instead of having it in my default.html file, I put it into my include.html.

Style sheet

The default.html at github had some basic inline CSS, and I copied a few things from there, but I soon discoverd that keeping CSS inline in my own default.html had one big disadvantage: Every time I wanted to see the results of some changes to my CSS, I would have to click Refresh Site and wait for Telegram to have my new stuff ready. It represents an extra load on the Telegram server(s), and in the end it could cost me a few cents also. Having the CSS in a separate file had the advantage that I could preview the results locally without having to do a Refresh of my site. To do this previewing, I save a static HTML copy of a page I want to preview in a folder "_dev" at the top level of my blog site Dropbox folder, and I insert two dots at the beginning of the link href attribute, like this

<link href="../main.css" type="text/css" rel="stylesheet">

in this static HTML file. Then I can preview it in a browser, or directly in my Mac editor of choice, which is BBEdit.

Whether this kind of previewing can be done this easy if your site is based on GitHub instead of Dropbox, that I don't know.

Displaying on smartphones

For the blog pages to look better on small screens, one has to provide some dedicated CSS to make better use of the reduced screen width. I may still have a lot to learn about this kind of CSS coding, but this far it seems my small-screen CSS works quite OK. One of the things I wanted to adjust, was the margins on the Archive page, but the default HTML code on this page didn't make it very easy to write elegant CSS selectors for the margins I wanted to change. David gave me the obvious solution: Put a class attribute on the "year-block" div in archive.md. I ended up with <div class="year_block" name="year-block">. Now my CSS got more readable.

Since "clicking" on a smartphone screen normally means tapping with your finger, it is convenient to have some extra space between clickable links, at least vertically. That's why I have specified the margin-bottom for div.year_block li to be 10px.

You can see my current CCS here: main.css
Copy what you like, except the background ribbon.png.

Showing blog post dates

When you write a new blog post, you may (and should) supply the file with Extra Info that tells the date of the post. This date will normally be shown on the Archive page, and on the Home page if the _extra_info.md file has "hasblog: true". However, this date will not show on the blog post page itself, and I wanted to change that. David helped me with the solution again ... I now put <div class="page_info" data-lift="page-info?name=date">the very date</div> on a separate line under the "##" heading of each blog post, and with some CSS I've made it so that this pageinfo shows up in a little box in the rightmost part of the page_header div.

If you use the "hasblog: true" that I mentioned above, to have your posts listed on the Home page, these *pageinfo* divs will not show the intended dates there, so they have to be hidden. I fixed that with the following CSS: ul.posts .page_info { display: none; }

Previewing Markdown files

As my BBEdit editor currently (v9.6.3) has no way to preview Markdown files, I have been using the Chrome browser with an extension called "Markdown Preview" (v0.5). It works, but not 100%. One Mac editor that does Markdown previewing, is Mou, but I haven't tried it yet. (It requires OS X 10.7.)

I just noticed there's an embeddable JavaScript Markdown editor called EpicEditor that looks quite promising. I'll give it a try one of these days.