In this post I’m going to be talking about box styling – any CSS effects that can be implemented on all 4 sides of an element. This can include:

• padding
• margins
• borders

There are 4 different ways of ways of applying styles to the sides of an element. The most conventional is the longest version which styles the sides clockwise from top, right, bottom and left. You can remember this as TrouBLe. This method allows you to set a different style on all 4 sides.

element{padding: [top] [right] [bottom] [left]}

Using 3 figures allows you to style the top, with left and right at the same time, followed by the bottom. This is useful if you require the same size on the left and right, but a different size for top and bottom.

element{padding: [top] [left/right] [bottom]}

Styling both the top and bottom, and the left and right sides can be done using 2 figures. This can be used when the top and bottom sizes are the same and the left and right sizes are the same.

element{padding: [top/bottom] [left/right]}

The last possibility is where all sides have the same size declaration. This can be achieved by using just one value.

element{padding: [top/bottom/left/right]}

Bonus Tip

When using 0 as a value, it doesn’t matter whether it is a pixel, em or any other measure so whenever using 0, just declare it on its own.

Having used tumblr for the first time, I didn’t know of any way to track this, and although I could use a URL shortening service like bit.ly, i’ve never been a huge fan, as they mask the location you are being directed to.

So what I came up with was an amalgamation of two pieces of JavaScript, that seems to have done the trick:


function recordOutboundLink(link, category, action) {
try{
var pageTracker = _gat._getTracker("UA-XXXXXXXX-X");
pageTracker._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100)
} catch(err) {}
}

$(document).ready(function() {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
recordOutboundLink(this, 'Outbound Links', this.text);
return false;
});
}
});
});


So in short, this code checks through the webpage for any outbound links (you could narrow this down to particular items simply by altering the jQuery selector) and posts an event to Google Analytics, before then forwarding the user on.

My two code sources came from an analytics help article How do I manually track clicks on outbound links? and Open External Links In New Window.

Now, I know that these can be optimised, but to be honest, it seems to work, and I didn’t want to spend too much time developing the code for this tumblr site.

These events then appear in analytics under events, and are marked as ‘Outbound Links’ as that what it was called in the JS.

I’ve certainly found it useful, and I hope that you might too.

Quote anecdotally misattributed to Charles H. Duell, Commisioner, US Patent Office, 1899

Apparantly a misquote, sometimes the web can feel like this at times. You work on a idea you have just thought of, only to find it already exists.

Whilst working on something for http://10k.aneventapart.com/ – an event where you can submit a little web app which is no larger than 10k, I did a bit of googling to find the exact same thing has already been built.

Colour Palette Creator

After seeing Andy Clarke’s post ages ago about creating colour palettes, I thought it would be a great little tool to have – and the 10k event was the perfect opportunity to make it. But I was beaten to it: http://slayeroffice.com/tools/color_palette/

And again…

A while ago I had the idea of a neverending book idea, where everyone can add a sentence to continue the book. Yep, already been done.

The same goes for website designs. I saw a blog design with the identical look to one of the rejected mockups for this blog. I couldn’t believe it. I didn’t take mine further than the PSD stage; good job too.

Why am complaining?

Most of my ‘ideas’ are just that – they never get past a quick doodle in the Moleskine. I should be grateful these people are building my ideas!

Back to the drawing board

So once again, I am thinking of things to make for the event. Lets build it quick before anyone else does!

Chances are, if you are good at jQuery you will be pretty good at MooTools (after learning the new declarations etc). The same goes for in a larger extent SQL/MySQL/Oracle or ASP/PHP/Ruby etc.

This stems from when I was at college and we would write psuedo-code, programming without any actually code. Something like this:


if number is greater than or equal to 10 then
write "congratulations, you are a winner!"


Now this very basic bit of programming isn’t very complex, but when building up larger bits of code, the skill comes in how you construct your code, not what language you write it in.

note: I am still a huge fan of jQuery, but MooTools does look pretty awesome as well. Perhaps I’ll write my own little comparison once I’ve used it a bit more.

So I decided to create a ‘Kitchen Sink’ of markup and basic styling, using some content from the great HTML-Ipsum.com plus a few extra bits.

If you don’t currently use something like this already, I do urge to add it to your next new website, because even if you don’t include a table, or list at the moment, you (or your client via WYSIWYG) may do in the future.

The document is actually HTML5 and UTF-8, but you can copy and paste the HTML/CSS however you like. I also tend to add a reset style inside a global stylesheet to save downloading two documents. I’d love hear how you layout or comment your CSS and whether you split them into different files such as layout and typography too.

Open kitchensink.htm

Note: If you have any additional code or CSS which you think should go into the document, add a comment below. Thanks.