How to Add Custom CSS to Tweak your Tumblr Theme

Tumblr is like Myspace in the sense that you can customize your themes. These user hacks will allow you change the entire look of whatever layout you are using. Here, I show to how to analyze, tweak, and hack away at your Tumblr theme.

Make sure you watch this video as well; it adds additional depth in how to analyze your themes stylesheet.

Keep in mind if you figure out what each CSS element on your page refers to, you can essentially change the entire look of your Tumblr theme with just CSS. The reason we are able to add our own CSS and have it override the actual theme’s CSS is because of one of the key factors of Cascading Style Sheets–the cascade. Your user inputed styles will take precedence over the theme’s default styles.

1) View your Tumblr profile and click on Customize on the top right (If your using an odd theme, it might appear on other parts of the page)

tumblr customize

2) The customization toolbar will appear across the top of your page. Click Advanced

tumblr advanced customization

3) Under Add custom CSS is where you will input any CSS you want to change on the page. You type it in just like you would in a .css file. Be sure to use the proper format and refer to existing selectors and classes. If you try to set a style rule for something that doesn’t exist in the theme’s style, you will not see any changes. The video above describes in depth how to find the exact tags for a theme.

custom css tumblr

4) Just for examples sake, I defined style rules for 3 things on my page: body, header, and content.

theme examples

5) And once you have your custom CSS inputed, click “Save” on the Tumblr customization toolbar.

save tumblr

And my theme with its new custom CSS:

Editor’s note:
As Chris shows in the video, hacking css is made much easier with the firefox extension Firebug. Once it is installed, you can right click on whatever element you wish to edit and select Inspect Element. This will give you the correct navigation and description of the element. If you don’t know CSS yet, you may want to take a few lessons first.

 

About Chris Luongo

Chris is a self-taught web designer and developer out of Atlanta, GA. This geek enjoys coffee, cold brews, bike riding, and twisting any form of tech into submission.
View more articles by Chris Luongo

The Conversation

Follow the reactions below and share your own thoughts.

  • Business Growth

    Great post i have been perplexed by this for a while.

  • johnny

    hey chris, thanks for the great post… i am a noo-bee to the world of customising blogs and websites (so go easy on me please) i was wondering if you can use CSS from another tumblr users site… i.e beyonces… as her site looks really great

  • Joan

    If you are going for best contents like myself, simply pay a quick visit this website daily for the reason that it provides quality contents, thanks