Typogriph is a two-columns theme, with a liquid layout and support for all the features introduced with WordPress 2.7. Its design elements are solely typographic, and its main purpose is to value your content.
The genesis
I know it isn’t quite usual for theme authors to tell stories about how they made a theme, but I really believe that the most important moment in the development is the vision they had before even write a line of code. So here I go.
Typogriph screenshot
Typogriph is originated in a fragment by the French philosopher Jacques Derrida. While reading, I visualized a typographic discourse acting and looking like a riddle.
The name “typogriph” is an allusion to “logogriph”, which literally means “riddle”. A riddle is a discourse saying something else; but it also says something significant. The message of a riddle is hidden, but it’s also obvious; and it is hidden by the mere words revealing it.
Basically, what I did is to put these things together in a visual form. The text-box in the header, for instance, is a hint; the dashed borders separating the content from the header and footer suggests the inextricable connection between what is saying and what is said. And so on.
Typogriph’s Features
- Strict XHTML 1.0 valid code;CSS 2.1 valid;
- Fast loading;
- No javascript;
- No images (i.e. less HTML requests);
- Search Engine friendly (title tag, optimized use of headings, no duplicate content for paginated comments);
- Totally fluid (it fits any screen resolution and any window size;
- Based on a fluid grid using percents (mobile friendly and allowing you to create micro-layouts for any area – single posts, sidebar, modular page templates);
- Custom 404 and archive templates;
- Widgetized right sidebar;
- Special style for sticky posts and support for styling the categories and tags, paginated posts;
- Styles for WordPress generated classes;
- Gravatars, paginated and threaded comments (5 levels deep, 3D);
- Social bookmarks for single posts, so you wouldn’t need to use a plugin that stuffs your code with javascript;
- A text-box allowing you to introduce yourself, your blog or your business to your readers (see the readme.txt file in the theme’s directory);
- Three modules in the footer, displayed like a second sidebar (if you have a basic knowledge of WordPress and php, you can turn them into widgetized areas);
- Minimal design (leaving room for customizations);
- A simple color scheme, focusing on contrast (white, dark gray, shades of gray, khaki and burnt red – for mouseover events);
- Structured and easily editable style sheet;
- Readability (font sizes, line heights, indent, eye-catching first lines, white space on the left side, to ease the eye’s transition from one line to another.
Important note
Please, be aware that Typogriph can be used only on WordPress 2.7 (and above) installations. (Anyway, for security reasons, it’s recommended to update to the last stable version.)
Usage
- Download and extract the zip file containing the theme’s directory;
- Edit the intro.php file, to launch your message to the world (see the readme.txt file for instructions);
- Upload the theme’s folder on the server (in the wp-content/themes directory);
- Enable it, in the Appearance > Themes tab of your blog.
Performance Improvement and Customization
Please follow these pieces of advice only if you’re familiar with CSS / XHTML and PHP.
Basically, Typogriph is flexible enough to allow pretty much any appearance customization (basic changes, like colours and fonts, as well as structural changes, regarding the layout). The grid Typogriph is built upon can be easily transformed into a layout generator.
For better performance, i.e. for the theme to load even faster, you can replace quite a few PHP calls with plain HTML (the links to the style sheet and feeds, your blog’s url, name and description, etc.)
Licence
Typogriph is released under a GNU/GPL v.2 licence, which means you’re allowed to freely use, modify and distribute it, as long as you preserve this licence and the attribution.
Screenshots
Typogriph homepage
Typogriph footer
Typogriph bookmarks and comments
800x600 window resolution
Demo and download
Demo blog (if you want to see other themes on the demo blog, just use the theme switcher in the sidebar).
Download Typogriph (zip file, 55 kb, version 0.3)
Later edit
If you downloaded the theme before seeing this lines, please download a fresh copy; in version 0.1 there was an error (an undefined call to a plugin’s function I use on a test blog); at the time of the first release, I didn’t noticed it, but thankfully I just got an email from the WordPress Theme Directory Team. I hope you’ll accept my apologies for all the inconvenients.
Changelog
Version 0.3
Al the changes in thi version regard IE6.
Fixed the content jumping problem produced by the percent margin bug in IE6.
Fixed the height of the searchbox.
Fixed the comments and navigation positioning.
Version 0.2
Corrected sidebar.php file (removed the lines 12-14)
<?php wp_theme_switcher(‘dropdown’); ?>
</li>
Published on the 6th of April, 2009, in free themes · Print
very nice theme. i just love the clean lines and the color scheme.
Congratulations… a really great theme.
Best,
Daniel
Hi there, I am using your new theme Typogriph on my website and I can’t seem to find an answer to something I’d like to change about the theme. I like how the first line of each post is in uppercase, but I prefer not to have the first line of blockquotes capitalized; also after inserting a photo gallery or after ending a blockquote, the first line is again in uppercase. I only want just the first line of the post in uppercase. Do you know what I mean?, and is there a way to do that? Thank you for your time and help!
Hi, Jamieanne, first of all, let me tell you I’m very glad to hear you’re using Typogriph.
Yes, I know what you mean. You’ll have to edit the style.css file and look for this line (in the post styles section):
.text p:first-line{font-variant:small-caps;font-size:15px;}Then replace
.text p:first-linewith.text p:first-child.Now the first lines after images and blockquotes should be displayed in normal text.
To fix the blockquote issue, just add this line in the stylesheet:
blockquote p:first-child{font-variant:normal;}.Hi there. I was looking at the demo of this great theme and had almost decided to download it to replace my current theme.
However, a small problem arose. I noticed that with IE6 all the links on the homepage jump to the left, re-positioning all the text for the post, when you move the mouse over them. I realise that the solution is just to upgrade to a decent browser, unfortunately I cannot do this on my work machine yet. If you can fix this minor bug then I would love to use the theme. Many thanks for offering it!
Thanks, Collin. Problem fixed. It was produced by the IE6 percentage margin bug. I’ll prepare a new version containing the fixes.
Good theme
Dear Andy (nyrocker.com)
The easiest way to retreive the original sidebar code is to download a fresh copy of the theme (I strongly recommend it for everyone who’s using Typogriph, because version 0.3 fixes the IE6 percentage margin bug).
Please note. When you edit the sidebar.php file, make sure you won’t delete the line containing the expression
php endif(at the end of the document). You also must leave thedivsin place, or the theme will break. Long story short, just don’t touch the last 4 lines of the code (as well as the first 3). Everything else can be changed at will.Best regards
Delicia
Thanks for your help. I did figure out that I just needed to upload the sidebar theme again and all was well.
Now for my next conundrum.
I want to make a static intro page. preferably this would be the home page. I know how to use the reading settings to choose a static page, but the present home page doesnt show up as a choice for the static page. SO I created a new page (welcome) When I set it as the static page, the home page became a duplicate of that.
Ideally I would like a Home page that is static, and a Music Notes page that displays the latest posts. Any guidance on this?
thanks so much for helping a newbie along…
Hi, Andy, sorry for this late answer. I guess the most elegant way to do that is to dump the wp inbuilt static homepage feature and create a home.php file, with some static content and a (few) loops(s). I’ve already began to write a tutorial on this question and hope I’ll finish it by tomorrow. No need to thank me
Hi
Just to say that I have set up a WordPress blog using your theme with a couple of very small tweaks. You can see it here: http://www.thesoutherntip.net.
Thanks
Tony
This theme is great! I really like this style. It looks really professional. I just Download theme and will be use for many blog.
Thank you so much.
I searched for weeks for a clean, professional template until I stumbled upon typogriph. LOVE IT! I set it up for my new freelance writing site. I changed a few things around so it “looks” more like a website and not a blog. You can see it here: http://www.angiephipps.com
Thanks for your beautiful work!
Hey, I really like your theme and am setting up for my blog right now. I was wondering why it is diplaying differently in Internet Explorer though? It displays correctly in Mozilla but when I open my site in Internet Explorer some of the formatting is not correct. Do you know why this would happen?
Thanks,
Colin
Hi, Colin,
I’m afraid there’s nothing you can do about it, because IE6 doesn’t support some pseudo-classes and pseudo-elements used for the text formatting.
If you want to get the same look in all browsers, you can delete those lines in the stylesheet and stick to the defaults.
pretty nice…
Hi..I really like this template and I’m comfortable working with PHP and CSS. I would like to change the “About” page layout so that it does not include the sidebar. How do I go about doing that?
Kind regards,
Marlee
I’ve probably spent two years searching for a theme that would work for my writing site. Yours is about as perfect as they come. I’ve had the same problem as an earlier poster, Delicia, concerning the first line being uppercase. I tried the suggested correction but everything went to uppercase. I’ll experiment more with the CSS but I ‘m so happy with the theme, I may learn to live with that small distraction. Thanks again.
Dean
http://www.deanwest.org