One plugin that I found particularly useful for this client was Event Calendar 3. On her previous website, the client had a list of upcoming events and wished to have a similar setup on all pages of her blog. There are several calendar plugins available for WP, and I chose this one for a couple of reasons (and due to some Apache permission problems on her host with some of the other calendar plugins). First of all, it’s really easy to use and customize. I was able to set up the sidebar to display just the dates and titles of the events. Second, the events are all posts, so there’s no limitation on what additional information can be posted with the event.

Where I ran into problems with it is that WP treats the posts like any other blog entry. When I click on the category “Upcoming Events” it displays all the posts and the date they were posted, not the date the event is happening. Working with the default WP theme, my work around involved editing styles.css and archive.php:

First, I put the date as the first line in the post for all “Upcoming Events” posts. After that, there were two dates displayed, the first line was the post date and the second line was the event date. To format the second date to match the first, I grabbed the first paragraph of my post (in category “Upcoming Events”) using the first-child pseudo-class:

.category-upcoming-events .entry p:first-child{
color:#666;
}

I didn’t want to get rid of the post date for all categories, so my next step was to change the way archive.php displayed posts with the category “Upcoming Events.” In the WP Loop (the section that spits out all the posts), I edited the following section:

<h3 id="post-<?php the_ID(); ?>"><a title="Permanent Link to <?php the_title_attribute(); ?>" rel="bookmark" href="<?php the_permalink() ?>"></a></h3>
<small></small>

The part between the <small> tags is the part that displays the time when the post was created. WP has a handy built in boolean function in_category() that returns true if the current post has the category indicated inside the parentheses. A trick I use all the time to save on code and headaches in PHP is using an IF statement and exiting PHP before my ‘if true’ statement so as to avoid having to use echo or print, and then going back into PHP and closing the if statement after the HTML, like so:

if(foo == bar){
?>

Hello World!

}
?>

Using this style in archive.php, I check the current post to see if it isn’t in the category “Upcoming Events,” and provided it’s not, I let php go ahead and echo the time the post was created. Otherwise, it just continues without echoing the time. Like so:

<h3 id="post-<?php the_ID(); ?>"><a title="Permanent Link to <?php the_title_attribute(); ?>" rel="bookmark" href="<?php the_permalink() ?>"></a></h3>
<small></small>

This is all great and dandy, but my next project in this is to display the events in chronological order, in case a last minute event is added to the schedule. Stay tuned.

previously, i was using MacJournal for updating this blog, and i really enjoyed using it. it’s really easy to use, i can keep all sort of notes in it and organize them well, and it’s so easy to publish to WordPress sites. but it’s not entirely necessary. and i did just drop a bunch of money.

i also had a bunch of fun software (like iStopMotion – a great program for doing just what the title says), but i’m hesitant to clog up my new machine. on the other hand, it’s got way more space and processing power, so maybe it’s no big deal.

anyway, i feel like i’m rambling. here’s something of more substance:

having just started working on such a huge screen, i was reminded this week of the importance of checking work on different browsers and screens. i just started work with another client where i was handed a site that was mostly completed, but in pieces. i went through and put it together and tweaked the css so that it actually worked – or so i thought.

i was using a standard centered container, with a footer attached to the bottom. i do this with the following css:

html, body{
height:100%;
}

* html #container {    /* for browsers that don't recognize min-height */
height:100%;
}

#container{
min-height:100%;
margin: 0 auto;
width:980px;
position:relative;
}

#footer{
height:30px;
width:980px;
position:absolute;
bottom:0px;
}

this normally does the trick just fine with html laid out like this:

<div id="container">
<div id="footer"></div>
</div>

and indeed, once i had it laid out that way, it looked great: centered content, footer attached to the bottom when the content didn’t fill the container… at least on my new large screen.

i should mention the first time i realized i had to do something to attach the footer to the bottom of my screen was when i looked at a project on a larger monitor and realized it wasn’t: on my smaller screen, it wasn’t very often that the content didn’t stretch to the bottom of the browser, so i normally didn’t notice.

turns out this goes both ways. when i emailed the site to the client, i was told that there was a problem with the content disappearing behind the footer. and it was. when i decreased the size of my browser window, everything inside the content section slid behind the footer. the problem was that the previous designer had needlessly put “float:left” on everything inside the container (except the footer), so it was floating behind the footer. but that’s not really the point.

the point is, having only viewed it on a large screen, i hadn’t even noticed something that would have been glaringly obvious on a smaller screen. so it goes both ways, and it’s still very important for me to check my work on multiple screens.