Customising tumblr

I decided it is time for a new theme on tumblr. I found a nice one called “Lightweight”. The tags and dates are much nicer integrated, it features a mobile version, and I like the little icons on the left indicating what type of a post it is.

Nevertheless I need to do some customisations. Unfortunately tumblr doesn’t allow you to create a child theme so I’m just messing around with the main theme. To not get confused here are my changes:

Theme Options:

  • Changed link color to #006633
  • Set Background and border color to white


  • branding h1
    • changed color to #006633
    • changed font to Optima, PT Sans, Arial, Sans-Serif;
  • branding h1 a: added font-weight: bold;
  • h4
    • deleted h4 from heading list (now it reads h1, h2, h3, h5, h6)
    • added h4 below that list: h4 {color:#888888; font-weight:bold; font-family:Optima, PT Sans, Arial, Sans-Serif; font-size:18px; clear:both;}
  • edited .post-content h3: {font: 22px/1.6 Optima, PT Sans, Arial, Sans-Serif; font-weight: bold;
  • edited #about img: added display: none;
  • edited #about p: changed font to: Palatino, PT Serif, Georgia, Serif;
  • edited p, ul, ol, dd, pre: added font-family: Palatino, PT Serif, Georgia, Serif;
  • edited .post-content img: deleted margin, padding: 10px, added float: left;
  • added class .imagecap {float: left; text-align: center; margin: 10px 15px 0px 0px; font-style: italic; margin-bottom: 10px;}
  • edited .post-type-text .post-content ol li: changed “Upper-latin” to “decimal”

– Always include class=”imagecap” when posting images
– Quotes might need a make-over


Finding the Right Colour

When designing a website choosing the right colours is one of the most important and most difficult parts. It’s good to remember that black, white, and grey are neutral colours which means they go well with everything. Complimentary colours are opposite to one another and create the highest contrast (think IKEA). If you’re just looking for a specific CSS colour code, I find these links helpful:

Matching Colours

For getting an idea about colour harmonies, this article explains it quite straight forward: (for matching clothes).

This article is a little more in-depth:

And another one:

The colour wheel:


Creating a Colour Palette

Once you understand the basic rules of how to match colours, creating a colour palette for your website becomes a little easier. There are also some great tools on the internet that help creating a nice color palette:

  • The nicest one might be that of Adobe Color CC. Based on your choice of colour and colour rule it spits out 5 different colours from the colour wheel.
  • Color Blender provides you with up to 10 colours based on 2 individually chosen colours.
  • Color Wizard works similar to Adobe Color CC but makes it a bit more fun to play with different colours

This article from Creative Blog provides more tools.

Finding a Colour Based on a Photo or Website

But what would you do when you find a website and you would like to know exactly which colour they are using? I had to translate a blog article and tried to semi-recreate the layout of their blog, so knowing exactly what kind of colours they were using was very important. Luckily, I found two tools that were extremely useful:

  • My mac books in-built Digital Color Meter
  • Color Hex

The Digital Color meter follows your mouse and shows the RGB colour it is hovering over on a pixel basis.


Once you figured out the right RGB, you can go to Color Hex, type in the RGB (RGB followed by the number, so e.g. RGB 102 47 88) and the tool will provide you with in-depth information about the colour, including it’s CSS colour code.

Based on this I created a mock-up that looked similar to their original blog:


My Copy

Their original

Their original

The Code

The CSS code for colours is extremely simple:

  • {color: #XY;} will change the color of the text
  • {background-color: #XY} will change the background colour of the item

Background colours can also be gradient. It’s a bit tricky, but these articles have some pretty nice code examples:

This was the code I used, and it seems to work fine on the latest versions of Firefox, Chrome, and Safari:

  • style=”background:linear-gradient(#23689f,#54a8e5);”
  • style=”background:linear-gradient(#83939c,#ca9891 5%,#8e271b 45%);”

The percentage numbers mark colour stops. I haven’t quite figured out how they work and it is based more on trial and error than anything else.