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.

As I mentioned in my earlier post about the DAMN It! website, one of the reasons I did it was to experiment with some layout stuff. This then translated into me exploring WordPress Themes, using the Sandbox theme as my foundation.

There is still a bit of tweaking that needs to be done before I redirect the home domain to the new folder, but you can check out the new site while I start transfering the information and fiddling with the theme’s files….

UPDATE: July 12, 2008

ACEDRR has its own site now! I guess my pressuring paid off somewhat. We still need to filter through pictures and work on some more user-friendly functions (for example in navigation and finding information) but I think it is off to a decent start.

This wasn’t the first design I submitted. The first design can be found hosted at mrdwab.com’s TDA sandbox pages and helped us at least enter some discussions about how to lead the design process.

There’s some temptation for me to remove my DAMN It! site (especially because it actually appears on search engines when you type in ACEDRR), but I’m emotionally attached to it and it did help me to figure out how to redesign the 2657 Productions website. (You can even see the similarity in layout.) I guess what I’m saying is that it’s here to stay for archival purposes and hopefully the official ACEDRR site starts to get picked up on search engines soon enough….