wheresrhys

I’ve just spent a  little time adding some useful sounding plug-ins (initially prompted by wanting an effective backlinking plug-in), one of which was the Wordpress Automatic Upgrade plug-in. So, with that installed I finally got around to upgrading wordpress and, to both my delight and dismay, wordpress has changed its admin screens layout since the last version I had (2.3 I think). It’s a much better design, but it does break toolbarize. In fact, it renders it unneccessary as the layout is much more user friendly and screen-space efficient, with scrolling not being no nearly so disruptive to the postying process.

However, it has inspired me to write a plug-in which makes perfect use of screen space by hiding things I very rarely use… or putting them in the footer. I could even make it so users can customise which screen elements are hidden.

Well – here it is. As promised earlier, my first ever software release into the open source world is an adaption of Eric Meyer’s MW adminize plug-in to give the wordpress admin interface a fixed toolbar along the top of the screen and so that the publish post box is always visible on the right. Scrolling up while posting to your blog can finally be consigned to the past.

The plug-in works on all modern browsers, (Safari, Opera, Firefox, Internet Explorer 7, and almost certainly all others with good CSS support). It will however leave everything unchanged in ie6 as it has poor support for position:fixed.

Here is the download: toolbarize.zip.

Simply unzip it into your plugins folder – no additional setup required.

Visually, I’d like to rehash how the publish box appears – it doesn’t sit well either where it is now or lower down, so a redesign may be in order. Also, I need to work out how to add some javascript to better resize the upload media screen (at present the close button is hidden, but you can just click off the screen to make it disappear.

Please let me know if you have any suggested improvements

Further to my post about the usefulness of position:fixed, in particular with regard to the .submitbox in the wordpress admin interface, I’ve continued to refine it all.

I came across Eric Meyer’s MW Adminize Wordpress plugin (via the latest Sitepoint list of useful CSS links). Essentially what it does is compress the navigation and header of the admin screens into a smaller area by including an extra stylesheet.

“Hang on, ” think I. “Now that looks pretty much like a toolbar – why not use position:fixed on it”. Which is what I’ve done, and the effect is most satisfactory. There’s was a bit of ironing out to do as various page elements (which presumably have position: relative/absolute) overlaid it, but z-index:2000; soon sorted that out.

At present I’ve had to edit not just Eric Meyer’s CSS file, but also a couple of the php pages in order to insert a div with id=”toolbar”, but in a future iteration I will painstakingly go through each page element that needs position fixed and then remove the containing div, thus making it a candidate to be a branch of the original plug-in.

Watch this space.

A thought just struck me that it really doesn’t matter very much. If you use firebug (which I think most front-end developers should), then you can easily find out which lines in which stylesheets affect which page elements.

I still do order my stylesheets (roughly) in the order elements appear on the web page, but I don’t think I’ll ever agonise about whether there is a better way to do it any more.

The funniest thing just happened:

I was adding this as my facebook status in one of the study pods at the library:
“Rhys is wondering why the amsterdam library has lots of signs up saying “2,000+ dicks”. 2,000 people and some dicks? More than 2,000 dicks?”

Just then a middle-aged man with his elderly father poked his head in to the pod and said in dutch something which must have been along the lines of “And look, father, in this modern library there are plenty of places where people such as this young genius can study hard”

Could there be a  better illustration of how the internet lowers our level of thought. From now on I will only have studious facebook messages.

On another note, I’m trying to choose a php framework to learn to use (akelos is the frontrunner), and used the website -www.phpframeworks.com to help me. Two interesting aspects of it are:

1. The site is wider than my screen. I guess it’s really as wide asmy screen, but they forgot to account for scroll bars. A rare example of a website aimed at the programming community that takes advantage of the fact that most of us (though alas not I) have massive screens.
2. It uses tables for its layout. After working for a day converting a site made with Frontpage to standards compliant, semantic xHTML, and revelling in the difference between the sites when I turn CSS off, it saddens me that everyone isn’t doing it. I mean, it’s actually quite good fun.

Happy valentine’s day

Yes I know it’s not finished, but I’m quite happy I’ve managed to create a menu with angular areas just with css… no Flash required!

I always found it annoying when websites got an element (normally an advert) to stay on the screen even when you scrolled up and down athe page. But recently, with the advent of web applications, position:fixed could start to be more commonly used. Facebook’s messaging/notifications bar is the best (and only, if I’m honest) example I can think of; it’s discreet and contains features that it’s quite resaonable to expect you will always want to have to hand.

Along similar lines, I’ve edited my worpress template. Adding .submitbox{position:fixed;top:100px;} to your wp-admin.css means you never have to scroll around to publish a post.

Every now and then I come across and article where some CSS guru outlines how they structure their stylesheets (main layout elements at the top, all headings together etc.), but I don’t think I’ve ever read any discussion on how to layout the individual elements.

Recently at work somebody, probably thinking they were being helpful, put all my stylesheet selectors in this sort of format

h1
{
   font-size: 2em;
   color: #000088;
}

whereas I much prefer it like this:

h1 {font-size: 2em; color: #000088;}

The reason being that when I’m scanning through a css file I’m generally looking for elements, classes and other selectors, not individual rules. Having each line begining with a selector aids easy scanning. Breaking each selectors rules up into individual lines increases the amount of scrolling you need to do by probaly at least a factor of 5, and decreases the number opf selectors you can see at once – both leading to a lot of time wasted searching for the selector you need to edit.

But everybody apart from me seems to default to the split up style. As far as I can see it’s because in programming a ‘{‘ generally means the potential of nested loops and conditionals, so you need to emphasise the curly bravcket’s depth in the stack. But CSS hardly ever (except for some hacks… which I don’t use) goes beyond one level of curly brackets. So why insist on laying it out that way?

I can make a ball bounce up and down in flash, and that’s about it. And my javascript is rapidly improving, but still leaves a lot to be desired, but simple animation effects using flash or javascript can really enhance a design.

For example, one of my favourite site-designs, http://www.futurelab.org.uk/ (I love the classy, formal look, aimed at senior teachers, but also with splashes of colour and animation to suggest innovation and fun), uses flash to create a subtle bouncing navigation effect.

So what’s a boy to do?

A week or so ago Sitepoint published a cute little tutorial on how to make surprising animations react to browser resizing… and the magic of it was that it only used a gif and a jpeg to achieve this. Inspired by this, I decided to make the futurelab navigation using just animated gifs, and the results are pretty good I reckon. And it only needs a couple of 1 pixel wide gifs per navigation item – less than 1kb in total. (I also only learned how to make animated gifs in photoshop this afternoon, using this tutorial).

A note of caution: my navigation items are all the same colour, so you’d think I could use the same gifs for each item… but not so. Something to do with how firefox renders animated gifs means it doesn’t animate the hover-off image if it’s used on another navigation item too. The solution is simple: make a few copies of the hover-off gif with different names.

Based on a design developed by snook.ca (a great web design site), which creates a 2-column layout with the page elements in a sensible, semantic order in the source, I’ve come up with this variant, which is pretty much the same, but allows for more flexibility in header design. Seems to work ok in safari, firefox and ie all the way back to v5.01. See it in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Page</title>
<html>
<title>Efficient 2 column layout</title>

<style>

.wrapper {width:600px; height: 50em;background:lime;position:relative;}
.main {width:500px; float:right;height: 40em;background:red;}
.header{width:600px;position:absolute;height:5em;background:teal;top:0; left:0;}
.content {width:500px;height:40em;background:green;position:absolute; top:5em;}
.nav {width:100px; float:left; height: 40em; background:black; margin-top:5em;}
.footer {width:600px; clear:both;height:5em;background:cyan;}
</style>
</head>
<body>
<div class="wrapper">
	<div class="main">
		<div class="header">
		</div>
		<div class="content">
		</div>
	</div>
	<div class="nav">
	</div>
	<div class="footer">
	</div>
</div>

</body>
</html>