Thursday, May 16, 2024
HomeInternetHow to Add Custom CSS to Tweak your Tumblr Theme

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.

Chris Luongo
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.


Please enter your comment!
Please enter your name here

Most Popular


Recent Comments

error: Content is protected !!