I had posted a little while ago about my excitement and my disappointment over the Google Font Directory and that had inspired me to look into other ways to get some custom fonts online. Font Squirrel offered a great free @font-face generator, so I loaded up my Mr. Grumpy fonts and decided to see what I could do with it.

With my fonts ready, I decided to get back into my own theme design. This time, rather than designing the theme from scratch, I decided to create a child theme for one of the better theme frameworks I found: Thematic.

For those of you who don’t know what a child theme is, think about it this way. WordPress periodically needs to be updated (to fix bugs, add new features, enhance security, and so on). When you host your own WordPress installation, you’re also tempted (at least nerdy people like me are tempted) to customize the themes they use, and in the past, that often meant making edits to the original theme files. But just as WordPress needs to be periodically updated, so to does its themes (for example, when WordPress added widget support or post thumbnail support, theme modifications were required). When you updated your theme, however, all of your customizations would them be lost.

Child themes solve this problem by letting you use a well-structured theme that is up-to-date with all the WordPress features you need, creating a new folder in your WordPress themes directory for your child theme, and creating a new theme by doing as little as creating a new stylesheet that imports the styles from your chosen template. If you need to make more significant changes to the parent theme, instead of modifying the actual theme files, you create a “functions.php” file in your child theme directory. So, for instance, if you’ve decided that you don’t want the “access” div that’s present in the Thematic framework, you can remove it by adding the following to your functions.php file:

1
2
3
4
5

// Remove Thematic access
function remove_access() {
  remove_action('thematic_header','thematic_access',9);
}
  add_action('init','remove_access');

Or, if you want to add something to the head of your page (like some extra JavaScript or something) you can add something like the following:

1
2
3
4
5
6

function yourfunctionname() { ?>
  <script type="text/javascript">
    Your Fancy javascript
  </script>
<?php }
add_action('wp_head', 'yourfunctionname');

In the above snippet, the first line starts with naming our function, and ends with { ?> which switches us out of PHP so we can add normal HTML. The last line is where we make the call to the function that we just defined. There are some good instructions at the Thematic Theme Framework Guide for how to use the different Thematic hooks and filters to create a truly customized site.

As I was making these changes, A List Apart published a great article about full-screen backgrounds and, of course, I had to try it out. But, I wanted to take it a little bit further: make the background change with each page. So, for that, I used Matt’s random image script and put that into my stylesheet. This is something I might change though. It seems like referencing the PHP file in the CSS works as I expected with Opera and Firefox (a different background image for each page) but with Chrome, it loads a different background image only once each session (which is also OK, but not what I was looking for). (From A List Apart, I also borrowed ideas for using CSS transparency and rounded corners, as well as their ideas for applying different CSS rules for different window sizes.)

Here are a few snippets of the CSS customization.

For the transparency and rounded corners for the header area and the main text area:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#branding {
  margin-top: 20px;
}
#main, #branding {
  background-color: #F8F8F8;
  border-radius: 12px;
  margin-bottom: 20px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  filter: alpha(opacity=90);
  -khtml-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}

For centering the page if the screen is small and floating the content to the right if the page is wider than 1280 pixels:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@media all and (min-width: 1280px)
  {
    #branding, #main
      {
        float: right;
        margin-right: 20px;
      }
  }
@media only all and (max-width: 1024px) and (max-height: 768px)
  {
    body
      {
        background-size: 1024px 768px;
        -moz-background-size: 1024px 768px;
      }
  }

For getting a random image each time the page is rotated. Instead of mentioning an image URL like you normally would, you instead mention the rotate image script I referenced earlier.

1
2
3
4
5
6
7
8

body {
  background: #fff url(rotatebg.php) left bottom fixed no-repeat;
  background-size: cover;
  color: #000;
  margin: 0;
  -moz-background-size: cover;
  padding: 0;
}

Maybe eventually, when I get around to tweaking this a bit more and testing it in some other browsers (I’m not even going to bother being nice to Internet Explorer) I’ll package up the child theme and share it….

According to the Google Code Blog:

The Google Font API hides a lot of complexity behind the scenes. Google’s serving infrastructure takes care of converting the font into a format compatible with any modern browser (including Internet Explorer 6 and up), sends just the styles and weights you select, and the font files and CSS are tuned and optimized for web serving.

But here are a few screencaps of my site in different browsers:

I guess this has inspired me to explore using the @font-face option though, so there might be some more font experiments on the way.

The font list seems a bit limited at the moment, but to experiment with the feature, I’ve changed all of the post headings at this site to be displayed in IM Fell English SC and the body text to Molengo. It would be great to see fonts like Gentium and Linux Libertine on there too.

Read on to find:

• Do Indians have a sense of humor AKA “Irony over the stinky river….”
• Marina Beach AKA “The sweet smelling ocean spray on Chennai’s shores….”
• Wetwo Brand AKA “Population Control, Indian Style….”
• Submission AKA “Quick, shhh! The Big-boss has just entered….”

Browsing through my file manager, I found that all the albums were still there, but the way that Gallery2 dealt out photos hid their actual album location and gave some sort of “fake” link. I tried to reinstall Gallery2, but in the process got a whole bunch of errors, so I thought I would explore the Gallery3.

So, now, all of the photos have been migrated over to Gallery3 (which I think I already like a bit more than Gallery2), and when I have some time to do some boring link-fixing, I guess I will get around to fixing my broken links. In the meantime, if you find any references to photos which show a broken photo placeholder, you can head over to photos.mrdwab.com and see if you can find them there.