Trying to edit your Tumblr theme’s HTML was annoying enough previously but, since the latest update to the interface, it’s even more of a pain in the arse than ever. Now you have to have two tabs open and make at least three clicks back and forth between the “Customise” section and their annoying HTML editing screen, every time you want to make the slightest change.

Here’s a way in which you can set things up, so you can edit your theme’s CSS locally and then have the changes automagically applied to your Tumblr blog:

Assumptions:

• You’re using a custom theme.
• You have a Dropbox account.
• You’re using a mac. [Actually, the OS isn’t important, but the instructions & screenshots assume a mac, so if using sommit else, you’ll have to adapt accordingly]
• You know what the fuck I’m talking about.

1: Login to Tumblr and, in the Dashboard, click on the name of your blog:

2: Then click on “Customise Appearance”  in the sidebar.

3: Now click “Edit HTML” in the lefthand panel which opens:

4: When the HTML window opens, cut everything between this line…

and this one [inclusive]…

The line numbers shown here are what I see, using a customised theme based off the default. If you’ve added extra stuff into the header, or are customising another theme, you’ll likely have different line numbers, but the “style” tags should be the same.

5: Now switch your attention away from your browser and fire up your favourite Text Editor. In my case, TextMate. Create a new document and paste in all the code you cut previously.

6: Delete the first and last lines of the pasted code. ie. the beginning and end “style” tags:

Delete these two lines

7: Now save your new file to your Dropbox’s public folder, not forgetting to give it the “.css” extension:

8: Now login to your Dropbox account on the dropbox.com website and navigate to your Public folder and the CSS file you just created [I’m assuming here that your local Dropbox folder on your computer has by now sync’d with Dropbox in ‘the cloud’, which usually happens pretty instantaneously]:

9: When you’ve located your CSS file in your online Dropbox Public folder, click the disclosure triangle to the right of the filename and select “Copy public link” from the popup menu:

10: When the link popup window appears click “Copy to clipboard”. Your link will obviously be different from mine:

11: OK. We’re done with Dropbox now, so head back on over to Tumblr and the “Edit HTML” window again. If you correctly followed the instructions above, your theme’s HTML code should now look something like this [The highlighted line showing where all that CSS code was previously cut out]:

12: Now, instead of having the CSS code in the actual template itself, where going to import it directly from Dropbox. Into the highlighted area above, put the following, replacing my dropbox CSS url with your own:

13: Now click on Appearance, then Save, then Close, to commit your changes:

14: Visit your blog in your browser and make sure that everything looks OK. If there’s no formatting at all, then your external stylesheet is probably not being loaded. Looks like you’ve not followed these instructions exactly and I’m afraid you’ll have to start over again.

However, even if the external stylesheet is loading properly, you will probably find that there are a few visual glitches still to iron out. In my case this was most noticeable in that my page background defaulted to white and the sidebar got a bit messed up:

The reason for this is that a lot of themes [including the Default one that I’ve customised] use special “Tumblr variables” within the template and CSS, to allow users to change things like background colour, fonts, etc. via the web interface. These Tumblr variable codes look like this:

They look like this in the theme HTML

And like this in the CSS

These codes are not valid CSS, so when you extract the CSS from within your Tumblr theme to an external CSS stylesheet, they’re going to break and your template will just display defaults in their place.

In order to fix things, you’re going to have to do a Find/Replace on your new external CSS file, looking for these Tumblr variables and replacing them with ‘proper’ CSS definitions 

Here are the variables defined in my theme, which I’m going to have to ‘hardwire’ into the stylesheet:

15: Open up your CSS file and do the necessary Find/Replaces. For example:

…etc. etc.

16: I also found a few other bits of conditional code in my CSS, as well. For example to display the correct “Follow” image, depending on what language you’ve set your blog to display in:

Replace that with a single declaration for the appropriate language:

17: There was also some conditional code which would either set “display:none” or “display:block” on the “Ask me anything” or “Submit story” sidebar items, depending on whether or not they were enabled. I just hardwired them to “display:block” as, if they’re not enabled, they won’t display anyway, so why make a conditional rule? [unless I’m missing something here?].

Before

After

After doing all of the above, I’d got rid of all the broken conditional code from the CSS and was left with a nice clean stylesheet. I did give it the once over, just to make sure and spotted a few double “;;” which needed cleaning up. Then, finally, I ran the whole thing through the W3C’s CSS validator, just to make sure nothing else had sneaked through.

Eventually, after all that cleaning up, I’ve ended up with my site displaying as it did before, but now with the CSS loaded externally from Dropbox:

So, what was the point of all that hard work? –you ask

Well, now whenever I want to edit my Tumblr blog’s theme, I can just open the local copy of my CSS file and work on that, with my favourite text editor, instead of having to wrestle with Tumblr’s fuckwitted editing interface. Because the local file is saved in my Dropbox folder, any changes I make to it are automatically sync’d to the version saved on my Dropbox in the cloud, which is then imported by Tumblr into my custom theme. So, in otherwords, tweaking my Tumblr theme is now as easy as; editing a local file, hitting CMD+S, waiting a second [for Dropbox to sync] and then refreshing my browser window.

[In practice I’ve found that Dropbox sync’ing usually takes place within about a second. It’s certainly faster, and involves a lot less annoying and unnecessary button clicking, than using the Tumblr interface.]

Pretty damned cool, eh?

last thursday, NMD & animation students & staff went for a pint or six after college. 

being the nerdy geeks we are, the subject of  backing up your computer came up in conversation and i said i’d write something about it on the blog. so here it is:

first off, if you’re not backing up your work, you’re an eejit.  with so much of our lives stored in digital format these days, it’s madness to not have it backed up somewhere in case you fry your hard drive or have your computer stolen.

the most straightforward method is to use an external hard drive as a backup or to burn backups to DVD.  i used to do this myself; i have about half a dozen old hard drives and a drawer full of CDs and DVDs at home, with work backed up from the last decade or more. the trouble with backing up in this way tho’ is that, as time goes by, the size of the ‘stuff’ we want to backup gets bigger and bigger and –if you’ve bought an actual hard drive for backing up on– your storage capacity gets, relatively speaking, smaller and smaller.

a small fraction of my old backups:

to illustrate this; the reason i have [as mentioned above] half a dozen hard drives and a drawer full of discs backed up is that –way back in the black & white days, when i bought my first mac– it came with a whopping 2GB hard drive. this i supplemented at the time with a similarly gargantuan 250MB external hard drive.

also, back in those days, rewriteable DVDs were yet to be invented so, when burning stuff to disc, we were limited to 640MB CDROMs.  hence the proliferation of archived discs and drives that i’ve accumulated over the years. even backing up that miniscule 2GB hard drive took 4 CDROMS.  bulk-wise these old backup discs and drives take up several square feet of storage space in my flat. capacity-wise, most of that stuff would probably fit on an average sized hard drive, by today’s standards.

i also remember about four or five years ago, buying an 80GB external firewire hard drive to use as a backup. at that time my laptop’s hard drive was 20GB, so 80GB seemed like copious amounts of extra storage. however, 80GB nowadays would start to feel pretty cramped, merely after installing the system software and a handful of applications.

apart from the built-in redundancy of buying actual hardware for your backups, there is the added problem of avoiding keeping your backup in the same place as the computer you are backing up.  for example; if you keep your external hard drive at home, along with your computer and suffer a fire, flood or robbery then chances are your backup will be lost, along with your original data.  the recommended thing to do is keep your backup hard drive in a separate location eg. at work, college or at a friend’s house. however this is a major pain in the arse as, having to physically shunt your backup drive from place to place each time you want to use it, is likely to mean you’ll not bother to backup as often as you should, in the first place.

so, what’s the answer?

well, contra-intuitive as it may seem, i recommend using the intarwebs to backup your data [or more specifically that region of the intarwebs known as ‘the cloud’].

even a couple of years ago, i’d have laughed at the idea of storing my backup data somewhere that needed an internet connection to access it and that would obviously involve paying someone to store it.  however, i’ve changed my mind of late and am now using ‘the cloud’ exclusively as my main backup.  here are the reasons why i think it now makes sense to do so:

1. cost:  internet storage is getting cheaper year-on-year as hard drive capacities get bigger and more and more companies are making cloud storage available. i currently use amazon S3 for my backup storage and usually end up paying somewhere between $10 - $15 [about £6 - £10 in real money] a month to store over 80GB of files.  twice in the past couple of years since i started using S3, the cost per GB for this online storage has actually gone down and i can only see it continuing to do so as the years go by.
2. accessibility: almost everyone has access to high speed internet connections these days. whether at home, work or in your local wifi enabled café or pub. so the fact that your data resides on ‘the cloud’ disnae make it as inaccessible as it might have been a couple of years ago. in fact in some ways it makes it more accessible, because you can get to it anywhere and using any device which can connect to the internet, rather than needing to physically attach a backup device to your computer.
3. reliability: if you choose one of the ‘big boys’ for your cloud backup, you can be pretty confident that your data is going to be safe and be around for the forseeable future. that’s one of the reasons i use S3.  amazon guarantee 99,99% reliability for your data storage and, last time i looked, they didnae seem to be in any danger of going out of business any time soon.

OK. presuming you’ve stuck with me thus far, how do you jump upon the great cloud storage bandwaggon? 

well, i have two recommendations for you. one is a bit more user friendly, the other is fiddlier to setup, but cheaper.  i use both these services:

DROPBOX

dropbox is probably the most elegant and most mac-friendly cloud backup system out there. in essence, you setup a ‘dropbox’ folder on your computer and anything you save into that folder gets automagically synced to your dropbox in the cloud, whenever there’s an intarwebs connection available.

your dropbox appears like a regular folder in the finder:

if you’ve got more than one computer, you can install dropbox on both and anything saved into your dropbox folder will be available on both computers and also backed up on the cloud. 

add to that the fact that there’s also a dropbox mobile app for iphone, android or blackberry and you can even get access to your ‘stuff’ when you’re not near any of your computers.

dropbox offer 50GB storage for $99/year [£64] or 100GB for $199 [£128]. however you can also get a 2GB dropbox for free which, whilst it willnae be big enough to backup all your stuff, at least allows you to try dropbox out and keep your most important data safe. signup link below:

signup linky for free 2GB dropbox

[disclaimer: if you sign up for a free 2GB dropbox using my link above , i receive an extra 250MB storage for referring you. however, you will also receive an extra 250MB storage for having been referred by me. so everyone’s a winner!]

AMAZON S3

the big advantage of amazon S3 storage is in the cost. i cannae give you an exact figure for how much S3 storage will cost you because the pricing structure is quite complex, depending on how much you’re storing, how much uploading and downloading you’ve done that month and even where on the planet you’ve chosen to store your S3 data. that said however, convoluted pricing aside, S3 is much cheaper than other cloud storage offerings. [check out the pricing structure here].

in fact companies like dropbox actually build their service on top of S3, by providing a friendlier interface at the cost of adding a bit of a markup on top of the original S3 pricing.

and it’s the ‘friendly interface’ [or lack thereof] that’s the main problem with amazon S3; basically the service offers you dirt cheap storage on amazon’s servers and that’s about it. there’s a pretty basic web-based interface that allows you to manually upload files to S3 from your browser, but for any kind of automated backup, you’re going to have to look at one of the 3rd party applications which allow you to access your amazon S3 storage in a much more user-friendly way. 

there are several such apps about.  i’ve tried a few of them in my time but the one i’m currently using and which i’d recommend as the most mac-friendly is arq. arq is not free.  it costs $29 [£19] [30 day free trial available] but, in the long run, i’d say it’s the wiser option as you’ll make that amount back soon enough by using arq as a frontend to your own S3 storage –as opposed to using a service like dropbox, where you’re paying a premium to use their interface on top of their S3 storage account. 

NOTE: my opinions on using arq have changed. see this post for the latest.

at the end of the day it comes down to a question of whether you’d rather pay slightly more for an out-of-the-box backup system [dropbox], or pay less but have a bit more setting up to do for yourself [S3+arq].

of course, i’m always available to advise and/or help you set things up –whichever method you decide to go for.