This installment for customizing your tumblr dashboard focuses on the icon bar. The tutorial contains information regarding the creation of your own tumblr dashboard icons and will also cover a basic understanding of the icon bar structure. Additional information will also be provided to allow you to use the new icon bar set from either an internet storage location or your own personal storage device.
The requirements for creating your own icon bar: Firefox or Chrome for a browser, go to this site and install Stylish and the tumblr - Clean Slate Icons style. Some knowledge of graphics and a fair to decent graphic manipulation application are highly recommended.
The style code for replacing the icon bar is very simple. The code is divided into three sections, only one of which needs to be edited. The first section with the “@” symbols is for identifying the xml namespace and the designation for having the code only apply to tumblr. The next section instructs tumblr to make the current icon bar “invisible” but to keep the coordinates for the imagemap in place. The imagemap contains the same information for the text link as the associated link for the icon graphic.
Once you have created an icon bar, simply paste the URL location between the quotes, replacing the current icon bar information. Save the style, select enable, and admire your latest work of art!
background: rgba(255,255,255, 1.0) url(“http://assets.tumblr.com/images/new_post_icons_no_labels.png”) center center no-repeat !important;
NOTE: Text to replace is in BOLD font.
The default icon bar for tumblr is a strip of seven icons with dimensions of 513px width × 95px height. The icons vary in width, having a one pixel spacer bar between every adjacent icon, as shown:
Layout and Dimensions of default icon bar
The grey/light grey patterned background represents the transparency of the background for the icon bar. The green line represents the text overlay location on the icon bar graphic. This can be a source of initial grief if the icon graphics fill the open area down to the bottom edge.
The spacer bars also aren’t actually one pixel wide, but three, with pixels fading on the sides, top and bottom. The spacers should serve as the boundary from one icon selection field to the next. Armed with this information and your own abilities, you should have all you need to know to create your own icon bar.
Icon bar graphic placement on dashboard
Once your new set of icons is completed, there are three basic options for applying the graphic data to the style:
Option 1 - Upload the icon bar to an internet storage site. Copy the URL for the image and paste it between the quotes in the last section of the style’s code, replacing the string for the default icon bar:
background: rgba(255,255,255, 1.0) url(“http://assets.tumblr.com/images/new_post_icons_no_labels.png”) center center no-repeat !important;
NOTE: Text to replace is in BOLD font.
Option 2 - Save the icon bar to a personal storage device such as a hard drive, but exercise caution. This type of storage will only allow access to the icon bar 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 “mynewiconbar.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/mynewiconbar.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: rgba(255,255,255, 1.0) url(“file:///C:/Users/Ohne/mynewiconbar.png”) center center no-repeat !important;
Option 3 - Insert the graphic information into your style as URI data. URI encoding embeds the icon bar 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.
Icon bar graphics created for use with this style
If further editing of your dashboard is of interest to you, I would encourage you to visit any of the links on this blog related to customizing your tumblr dashboard.
As always, please feel free to ask if you have questions or need help.
