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:

// 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:

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 backround 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:

#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:

@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.

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….

Related posts:

1. 2657 Productions is going to get a facelift I’ve been trying to keep myself busy recently. As I...
2. Nested Lists and CSS I don’t use lists too often for my own stuff,...
3. DAMN It! I was just having some fun at work a couple...

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.

Related posts:

1. Font experiments Google just launched the Google Font Directory (beta, of course)...

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.

Related posts:

1. Font experiments, Part 2 My initial excitement about the Google Font Directory is a...

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….

Related posts:

1. The awesomeness that is WordPress and child themes After a long long long time, I decided to get...
2. CintaNotes and TiddlyWiki and Dropbox Fun Kiran just reminded me the other day of something I...
3. Nested Lists and CSS I don’t use lists too often for my own stuff,...

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….

Related posts:

1. 2657 Productions is going to get a facelift I’ve been trying to keep myself busy recently. As I...
2. The ODF Campaign Recently, there’s been a lot of talk about poop in...
3. More websites…. I’m on a roll…. Like I said in my last post, I’ve been trying...

I was recently converting an outline from a Word document to an HTML document, and I wanted different list levels to be different list-types—similar to the results you would get in MS Word when you increase the indent of a list item. However, simply nesting the lists ended up in a reverting to regular Arabic numerals, so you ended up with a list that looked something like:

1. First Level Item 1
2. First Level Item 2
    1. Second Level Item 1
    2. Second Level Item 2

while what I wanted was something like:

1. First Level Item 1
2. First Level Item 2
    I. Second Level Item 1
    II. Second Level Item 2

My first roundabout solution was to give the different lists a different class and then apply that class to each list item. But that seemed like it was not the correct way to do it, so I poked around on a few sites and checked out the stylesheets on a few WordPress themes to see if I could figure anything out.

And here’s the fun solution:

In your stylesheet, add definitions for your “ol” and “ul” tags, declaring what the list style type for the different levels would be. How might that look?

ol {list-style-type:decimal;}
ol ol {list-style-type:upper-roman;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:upper-alpha;}
... and so on

If your lists appear in a certain div, you may need to identify the div too. For this WordPress theme, for example, they are all within the “content” div, so my CSS includes the following:

#content ol {list-style-type:decimal;}
#content ol ol {list-style-type:upper-roman;}
#content ol ol ol {list-style-type:lower-roman;}
#content ol ol ol ol {list-style-type:upper-alpha;}

Here is an example list:

1. First Level Item 1
2. First Level Item 2
1. Second Level Item 1
2. Second Level Item 2
1. Third Level Item 1
2. Third Level Item 2
1. Fourth Level Item 1
3. First Level Item 3

Related posts:

1. Drop caps with OpenOffice.org Writer Tutorial Level: Elementary From time to time, I like some...
2. Making an A6 booklet in OpenOffice.org the easy way Tutorial level: Elementary I recently had to create an A6...
3. 2657 Productions is going to get a facelift I’ve been trying to keep myself busy recently. As I...

So, for the project of killing time at hand, I decided to re-do the “Las Historias de Ladera” site that I did some years back for Peoples’ Self-Help Housing. My main motivation for re-doing the site is that the site in its original form made extensive use of frames.

Why frames? I didn’t know better at the time. They seemed convenient, and got the job done.

Why not frames? A few reasons….

• First, they are pretty cumbersome in general. For each page of the Ladera website, I had the static frameset that included a header, footer, left, right, and center borders, and two areas in which to load the English and Spanish versions of each of the pages.
• Second, because we wanted the page title to show up for each of the pages properly and I didn’t know any better, I duplicated the frameset for each of the pages. Thus, while there were 10 stories and a total of about 7 other pages, there were actually some 50+ HTML pages in the end—not counting the photo gallery pages! Well, not only does that defeat the whole claimed advantage of using frames, but compare that to the sleek 17 pages total in the revised version!
• Third, I had to do funny things to make sure that people always got the full frameset and not just one of the frames that made up the page. In other words, if someone searched in Google and got a link to the Spanish version of a page, I needed to make sure that when they clicked on the indexed link, it would (1) pop the page back in the frameset and (2) make sure it stayed on the page the user wanted and not take them back to the home page. Fortunately, GoLive, which is what I used when I was originally designing that site, had some readymade JavaScripts to help me out with that….

Well, since I’ve explored more web-technologies in the time since I originally did the Ladera site, frames have become #1 on my list of least favorite web-design tools. Granted, part of this stems from the website for my current workplace, which includes a big-yet-ineffective navigation frame across the top, but in general, I haven’t found much use for them in recent months.

So, with that in mind, I decided to check out what I could do with CSS instead, and here’s what I did.

• First, I mapped out my page as logically as I could. Fortunately, since I already had a design that everyone was happy with, this step was easy. The top of the page would have basic site-specific navigation. The left and right borders would mirror each other. English would be on the left part of the screen, Spanish on the right, and a decorative border in-between. Finally, there would be a decorative border at the bottom of the page.
• Second, I sized my graphics as best as I could. All the graphics would be implemented using the CSS “background-image” property, repeat/no-repeat as necessary….
• Third, I created my basic div tags. Header, Left, English, Center, Spanish, Right, Footer. I decided on a fixed width of 795px and a fixed height for the text area of 500px (since this matched the size of the graphic I had for the left and right borders).
• Fourth, I went ahead in Dreamweaver and started making my template. I ran into a few problems when testing out my initial layout.
  • Things weren’t going in quite the right places. They were sort of stacking on each other instead of going side-by-side as they should. To solve this, I remembered that rather than positioning the middle row of div tags (Left, English, Center, Spanish, Right) I could have them just all float left and wrap them all in a div tag together.
  • Since I don’t like HTML tables too much and I wanted to use CSS as much as possible, I needed to find a way to center my page horizontally and vertically. I looked around a bit and came across two sets of CSS snippets that would help me. I don’t remember exactly what I did, but it ended up working for me.
  • When I first tried using the solutions mentioned at the above links, some stuff still wasn’t working out right. For example, the middle section, presumably because I was using the “float” CSS property, “floated” all the way to the left of the screen instead of being centered as I had hoped. So, I created divs to go around each horizontal section of the page (header section, content section, and footer section). Additionally, these three divs were themselves within another set of div tags.
  • For the centering horizontally and vertically, one thing that I noticed was that in Firefox at least, I was getting a scroll bar all the time when it wasn’t necessary. So, to solve that, instead of making the body and html height 100%, I changed it to 90%…. And no more scrollbar!

In the end, here’s what the basic skeleton for the HTML page was:

<body>
	<div id="mainwrap">
		<div id="contentarea-a">
			<div id="header"><!--navigation stuff went here--></div>
		</div>
		<div id="contentarea-b">
			<div id="left"><!--empty--had a background graphic--></div>
			<div id="english"><!--English section of the page--></div>
			<div id="center"><!--empty--had a background graphic--></div>
			<div id="spanish"><!--Spanish section of the page--></div>
			<div id="right"><!--empty--had a background graphic--></div>
		</div>
		<div id="contentarea-c">
			<div id="footer"><!--empty--had a background graphic--></div>
		</div>
	</div>
</body>

And here’s what the basic CSS for layout was:

body, html { height:90%; }
#mainwrap, #contentarea-a, #contentarea-b, #contentarea-c, #header, #footer { position:relative; }
#mainwrap {
	min-width:795px;
	max-width:795px;
	margin:auto;
	text-align:center;
}
#header {
	width:795px;
	height:20px;
	z-index:4;
	overflow: hidden;
	text-align: center;
	background-color: #FFFFCC;
}
#header, #header.a {padding-top:12px; }
#contentarea-b {
	height:500px;
	width:795px;
}
#left, #right, #english, #spanish, #center  {
	position:relative;
	height:500px;
	z-index:4;
	float:left;
}
#left, #right {
	width:80px;
	overflow: hidden;
}
#left {
	background:url(images/left_column.jpg) no-repeat;
}
#english, #spanish {
	width:300px;
	overflow: auto;
	text-align:left;
}
#center {
	width:35px;
	overflow: hidden;
	vertical-align:middle;
	background:url(images/center.jpg) repeat-y;
}
#right {
	background:url(images/right_column.jpg) no-repeat;
}
#footer {
	left:0;
	top:0;
	width:795px;
	height:36px;
	z-index:5;
	overflow: hidden;
	background:url(images/tile.jpg) repeat-x;
}

Now, with that out of the way, and with all the content transferred to my new, sleek 17 page site, I added some old tricks to add some new functionality. Since Spanish is of no use to me—and presumably, I’m not the only one in this case—and since the same can be said of English for some of the site’s viewers, I thought, why not give the users the option to view either one or the other rather than making them have to view both all the time.

Well, since I used CSS, that was a breeze to do. Two more stylesheets later and one of my favorite little JavaScripts, and a single language version was a click away.

Now, the last section of the site that needed to be addressed was the photo section. For this section, I created a div in which all the thumbnails would be located and a div in which the larger photos would be loaded. The thumbnail div was a fixed height and would scroll to accommodate the number of thumbnails I included and the main photo div filled the remaining screen real-estate…. I used a cool little JavaScript thing I found for the photos, and used some CSS to preload the thumbnails while viewers were reading different pages of the site, and overall, I’m pretty happy with the re-designed site!

No related posts.