The interwebz aren't the easiest to navigate at times. So here's a few useful tutorials to help you out. If you're using a operating system other than Mac OS X, please replace all instances of with Ctrl.

I've removed several tutorials as Tumblr has since updated and the tutorials are no longer needed.

Windows 7 Geeklet

This tutorial was created on a Macbook Pro running OS X Snow Leopard (10.6.8). You will need a Gmail account to use the mail icon.

I use the Segoe UI font on this tutorial, which is not normally available for use on a Mac. You can find this font on your own or use an alternative such as Open Sans.

Basic commands → + A (Select All), + C (Copy), + V (Paste).

This is not compatible with any operating system other than Mac OS X.

  1. You will need to download GeekTool and install it on your computer. I also recommend that you bookmark TextEdit by dragging it from the Applications folder into your dock.

  2. Download the zip file from the resources page. Unzip the file and move it to a permanent place on your computer, somewhere you won't move it from for as long as you have this geeklet. For the purpose of this tutorial, I have left it on the desktop.

  3. Open your System Preferences and click on the GeekTool icon in the bottom section labelled Other. This should take you to the GeekTool preferences panel. See the Manage Groups section in the upper right corner? You're going to need to add five groups. Click on the + icon and add Time, Weather, Email, Calendar, and Photobooth, in that order.

  4. Be sure to check off all the boxes next to the groups you just created and uncheck Default. In the end, your groups should look like this:

  5. Now open that glets folder and find time-bg.glet. This is the background for your time geeklet and the very first part of the entire widget. Double-click to open - a dialogue box should pop up. This will happen for every geeklet you open. Click YES.

    The background should show up in the top left corner!

  6. Now open time-block.glet. See how the font is too small?

    Select the geeklet by clicking on it. Click here to set font & color on the geeklet menu and set the font to light 72pt Segoe UI.

  7. Now go back to glets and find weather-info.glet. This geeklet is your weather background and also contains the information to display your weather icon and temperature. On the geeklet menu, copy the entire string and paste it into a TextEdit document.

  8. See how there's a URL that leads to a city's Yahoo weather page? You will need to select that entire URL and copy it.

    Open your browser and paste that into your address bar and hit Enter. Now look for the search bar for different cities and search your city. Click on the city name once it pops up, let the page load, and copy the new URL. Leave this page open.

    Paste it where the old URL was in the TextEdit document, then copy the entire string.

    Paste it where the old string was on the geeklet menu, and hit Enter. Also, under Groups on the geeklet menu, check the box for Weather and uncheck the box for Time. This puts your weather geeklet in a separate group. Be sure to check the box for Weather FIRST before unchecking the box for Time, or else your geeklet will disappear!. You will need to repeat this for the rest of your geeklets.

  9. Open weather-label.glet, select the geeklet by clicking on it, and change the font to normal 13pt Segoe UI. Open weather-icon.glet. Remember to change each geeklet's group to Weather after opening it.

  10. Open weather-temp.glet and set the group to Weather. The font should already be set to normal 18pt Segoe UI. Copy the string from the Command section and paste it into a TextEdit file.

    Go back to the weather page and copy just the numerical part of the URL - it is called the WOEID and should be seven or eight numbers.

    The current URL is http://weather.yahooapis.com/forecastrss?p=USCA0791&u=f

    Change the last part from p=USCA0791&u=f to w=WOEID&u=f where WOEID is the URL part that you copied. For example, for LA, I would change to w=12795619&u=f, and my entire new URL would be http://weather.yahooapis.com/forecastrss?w=12795619&u=f.

    Copy the new URL and paste it back into the Command section, then hit Enter.

  11. If you would like to switch from Fahrenheit to Celsius, you must change all instances of F into C - the f at the end of the URL and two F's in the string.

    curl --silent "http://weather.yahooapis.com/forecastrss?w=12795619&u=f" | grep -E '(Current Conditions:|F//' -e 's/\(.*\), \(.*\) F$/\2˚/'

    should change to this:

    curl --silent "http://weather.yahooapis.com/forecastrss?w=12795619&u=c" | grep -E '(Current Conditions:|C//' -e 's/\(.*\), \(.*\) C$/\2˚/'
  12. Open mail-bg.glet and mail-label.glet. Set the font to normal 13pt Segoe UI. Set each geeklet's group to Mail. Now open mail-icon.glet and Set local path to the location of mail.png, inside your glets folder.

  13. If you have never saved your Gmail username and password, log out of your Gmail account and log in again. When it prompts you, save your password.

  14. Open mail-count.glet and click inside the Command section. Press once and then replace username with your Gmail username, then hit Enter.

  15. Go back to glets and open:

    • ical-bg.glet
    • ical-date.glet (font should be set at normal 36pt Segoe UI)
    • ical-day.glet (set the font to normal 13pt Segoe UI)
    • ical-label.glet (set the font to normal 13pt Segoe UI)

    Make sure to set each geeklet's group to Calendar after opening.

  16. Download iCalBuddy, unzip the file, and move it into your glets folder. Open the iCalBuddy folder and follow the instructions to install it.

  17. This step is optional but is recommended to check your iCal tile.

    Open iCal and create a new event that is either happening now or will happen within the next couple of hours.

  18. Go back to your glets folder and open ical-event.glet. Click on the geeklet and set the font to normal 13pt Segoe UI. Set the group to Calendar.

  19. Open photo.glet and set the group to Photobooth. Set local path to whatever photo you would like to have up. You will need to change the dimensions of this geeklet to fit your image perfectly. The entire column is exactly 310px wide, you will need to do some math. Height / (Width / 310) = New height. So if you have a 640 x 480px image, 480 / (640 / 310) ≈ 233.

    If you would like another image underneath, click the image icon on the GeekTool preference panel and drag it onto your desktop. Figure out how far below your image needs to be - the first image's position was at 15 x 250px, my image was 233px tall, and the spacing between each geeklet is 5px. So, 250 + 233 + 5 = 488. The second image's position should be 15 x 488px. Calculate the new height the same way as the previous step.

  20. You're finished! Enjoy your new Windows 7 geeklet. I hope you enjoyed this tutorial, and if you have any questions, please direct them to my contact page.

Back to top

Making animated GIFs

Here is the quick way I do GIFs. Note that I'm using Photoshop CS5, but you can do pretty much the same thing in any Photoshop program.

  1. Open Photoshop.

    Menubar action:
    FileScriptsLoad Files into Stack

    Select all the images you wish to put in your GIF and hit Okay. The images should start flashing like mad, but let Photoshop finish the process before you continue.

  2. Menubar action:
    WindowAnimation

    The animation palette should open at the bottom of your workspace. Make sure the palette title is Animation (Frames) and not Animation (Timeline). If you need to change it, click on the icon in the bottom right corner of the palette.

  3. Beneath the thumbnail of your top image in the animation palette should be two editable options. Time Frame Delay should be 0 sec. and Looping Options should be set to Forever.

  4. Click on the little arrow with lines icon in the top right corner of the animation palette. Select Make Frames from Layers.

  5. While pressing Shift, click on the last slide that should now have shown up on your animation palette. This should select all of your slides. click the top right corner icon again and select Reverse Frames.

  6. Play through your animation using the controls on the animation palette and perfect your slides. You can add editing to the layers now if you like.

  7. Once you're satisfied, press + Shift + Alt + S. You can use the following options for saving or tweak your own. GIFs must be 500px wide or smaller and under 500k to upload properly on Tumblr. Reduce the amount of colors to shrink file size.

Back to top

Text above your ask box

  1. Access your Customize page. You can get there either from your blog page or your Tumblr itself. Click on Edit HTML.

  2. Scroll down to the very bottom of your theme, and right before </body>, paste this:

    <div id="ask_hide">
    <div id="ask">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus auctor odio a venenatis. Ut at nibh quis augue rhoncus condimentum. Duis ut urna nec orci egestas mollis. 
    </div>
    </div> 

    Replace the filler text with whatever you wish to put there. If you would like a list of items:

    <div id="ask_hide">
    <div id="ask">
    <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    </ul>
    </div>
    </div> 

    If you would like a numbered list:

    <div id="ask_hide">
    <div id="ask">
    <ol>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    </ol>
    </div>
    </div>
  3. Right below that, paste this code:

    <script type="text/javascript">$('#ask_form').before($('#ask'));</script>
  4. Now scroll back up and look for </style>. Paste this right above it:

    #ask_hide #ask { display: none; }
  5. Click Update Preview, then Save.

If you find this tutorial useful, you can reblog it to your own Tumblr blog.

Back to top

High-res images in text posts

Tumblr automagically shrinks any images you upload in text posts to 500px and replaces images from other websites with an ugly grey icon, but here’s a workaround that will let you post images of any size!

  1. Go to your dashboard and open a new photo post.

  2. Select the photo you would like to post.

  3. Upload the photo as a private post.

  4. Click on the photo once the post finishes uploading and then right-click and copy the image URL.

  5. Open a new text post or reblog a post and switch from rich text formatting to HTML (the far right button on your format bar). Use the following HTML code wherever you need your image:

    <img src="PASTE IMAGE URL HERE"/>

  6. Click Post and you’re finished! The images should show up as native Tumblr image thumbnails.

    You can always delete the original photo posts once you’ve finished with them.

If you find this tutorial useful, you can reblog it to your own Tumblr blog.

Back to top