Customize Your tumblr Dashboard - tumblr Logo

How to display your own tumblr logo

This installment for customizing your tumblr dashboard focuses on the tumblr logo. The tutorial contains information regarding the creation of your own tumblr dashboard logo and will also cover a basic understanding of the logo structure. Additional information will be provided to allow you to use the new tumblr logo from either an internet storage location or your own personal storage device.

The requirements for creating your own tumblr logo: Firefox or Chrome for a browser then go to this site and install Stylish and the tumblr - Clean Slate style. Some knowledge of graphics and a fair to decent graphic manipulation application are highly recommended.

The style code for replacing the tumblr logo is very simple. The code consists of only five lines. The first two lines change the default tumblr logo to zero width and height, which causes the logo to disappear. The next line designates the URL for the replacement logo. The last two lines are used to set the bounding box for the new logo.

Layout and Dimensions of the default tumblr logo
The default tumblr logo dimensions are 196px width × 44px height. The image is the word ‘“tumblr” set on a transparent background.
The replacement logo is also on a transparent background, but was purposely created with different dimensions of 153px width x 50px height.

Default tumblr logo, New replacement logo


A green outline has been placed around the screenshot images to provide additional clarity.

Default tumblr logo with outline - 196px width x 44px height


Step 1 - Create or find your desired image for a new tumblr logo and copy the URL. Paste the URL between the quotation marks in the section marked LOGO. It should look like this:

background:url(“<PASTE HERE>”) !important;

New replacement logo after pasting URL


Step 2 - Edit the line for “width” to read “padding-left” instead:

padding-left: 196px !important;

Without getting too technical, the default logo is positioned in a container with margins set to the dimensions of the image. Space is created to place the new logo by padding the margin on the left, basically pushing the default logo container to the right. If this declaration were to remain width, the default tumblr logo would display on top of the new logo.

New replacement logo inside padding-left area


Step 3 - Edit the dimensions. Padding-left is equal to width, and height for the new tumblr logo equals height. For this example:

padding-left: 153px !important;
height: 50px !important;

padding-left: 153px

height: 53px. Final with / without outline


Step 4 - Save and enable your new style. Other settings in the Clean Slate style will be applied automatically.

New replacement logo applied to Pufflr theme

Storing the style graphic data
If a new logo graphic was created, there are three basic options for applying the graphic data to the style:

Option 1 - Upload the new tumblr logo to an internet storage site. Copy the URL for the image and paste it between the quotes in the third of the section marked LOGO:

background:url(“<PASTE HERE>”) !important;

Option 2 - Save the tumblr logo to a personal storage device such as a hard drive, but exercise caution. This type of storage will only allow access to the tumblr logo from the computer which it is stored and will not be available to others if you chose to publish on the internet. The difference between an internet data URL is pathname syntax. The path to an internet URL begins with “http://”, then the internet address, and finally the file name. An image stored on a personal storage device has the same structure, but is written differently. Assuming the C drive is the designated drive for storage, the prefix is “file:///C:”, then the path to the file, and finally the file name.

For example, a PNG file named “mynewlogo.png” is stored on drive C, in directory Users/Ohne. Please take note of the following, paying particular attention to the colons and forward slash transition from backslashes:

file:///C:/Users/Ohne/mynewlogo.png

The information above would be pasted, as written, between the quotes in the same manner as an internet URL. The final code for the personal storage device in this example, would be edited to read:

background: url(“file:///C:/Users/Ohne/mynewlogo.png”) !important;

Option 3 - Insert the graphic information into your style as URI data. URI encoding embeds the new tumblr logo data into the style. This eliminates the necessity of having to retirieve the data from a remote location, speeding up the process of loading the graphic. It also eliminates the possibility of the style not being available because the information is, for whatever reason, unavailable from the storage server. Converting an image to URI data is a more complicated process which will not be covered in this tutorial. It is, however, my personal choice because of speed, portability and “permanance”. I encourage all to research this option to see if it is right for them.

If you are feeling really adventurous, there are also places to change the following within this style:

BIG BACKGROUND
ICON BAR
ICON BAR BACKGROUND
AVATAR ARROW
CONTENT
POST BACKGROUND
SELECTION ARROW
GREEN BUTTONS
RADAR
NEW CONTENT

As always, please feel free to ask if you have questions or need help.

Welcome to my CSS Toy Box

This is where I test CSS toys. You are currently looking at a variant of Steven Bradley's 3 Column CSS Layout.

This Simple Auto-Playing Slideshow might move a bit fast, but each slide either contains a link or actually is a link. There is a wee bit of jquery in use for the slideshow to function.

The Title is a good example of a CSS Toy. Blurred text changing to 3D Text with a CSS timed transition.

Initially all I wanted was to create Post Drop-Shadows without using images. This rapidly grew into something else.

I've seen a lot of fancy tricks for links, but most of them required javascript or some variant. I wanted a pure CSS Slider menu, hopefully one that allowed images.

Please take a look around. There are lots of little things I have toyed with, from the rounded inner corners of the avatar frame to the linear gradient background with a semi-opaque "noise" filter overlay.

I'm trying to utilize what I have learned, not just post links to what you might be able to do with CSS. Enjoy!