This installment for creating your own tumblr dashboard will cover adjustments to the background image, positioning and background color. Here is a downsized version of the image chosen for this tutorial.
The image is available from a website as wallpaper. The name of the website has been pasted onto the image in the upper right corner, which is a small price to pay for a very nice photo. But I don’t want to see it every time I start up tumblr. Liv is also sitting too far to the left, so she will probably end up under the post content where I wouldn’t be able to see her. Let’s fix that!
The requirements are still the same: Firefox or Chrome for a browser, go to this site and install Stylish and the tumblr - Clean Slate theme.
Step 1 - Find a picture you want for a background and copy the url. Paste the url between the quotation marks in the section marked BIG BACKGROUND. It should look like this:
background:url(“<PASTE HERE>”) no-repeat fixed !important;
Step 2 - Go to the section marked CONTENT and set the background opacity for the content pane. Minimum 0.0 = clear / Maximum 1.0 = solid. Any number in between will be semi-transparent. The number to change is the last one of the four. The first three are for the color (tumblr blue).
0.0 was used in this example.
background-color: rgba(255, 255, 255, 0.0) !important;
Liv is looking sort of squished and as was suspected, she’s hanging out under the post content. It’s time to make some more adjustments to the BIG BACKGROUND. The two adjustments address the image position on the screen and a size adjustment so the image doesn’t appear stretched.
Step 3 - Adjust the image size to match the original dimensions of 1024 x 768 pixels. The letters in pixels are in bold to reflect the css shorthand used for sizing. Dimensions for sizing are set, in order, as width and height, and can be expressed as percentages or pixels.
background-size: 1024px 768px !important;
Step 4 - Adjust the image position on screen. Coordinates for positioning are set, in order, as left and top, and can be expressed as percentages or pixels. Percentages will flex position when resizing the window. The upper left corner of the screen and the upper left corner are both considered to have coordinates of 0, 0.
165% 0% was used in this example.
background-position: 165% 0% !important;
Step 5 - Yikes! That blue field on the left needs to go away. Colors can be expressed in hexadecimal, rgb or hsl values, and there is even a list of over 140 names which can be used in the declaration.
175,171,162 - a greyish color, was used in this example. Opacity was set to 1.0 - solid.
background-color: rgba(175,171,162, 1.0) !important;
Step 6 - Save and enable your new style. Other settings in the style will be applied automatically.
You may question why the image wasn’t downloaded and manipulated using a graphic editing application. Here is a condensed list of steps involved for that process: download, save, open, crop, save and then decide.
Do you increase the image canvas size and flood fill the grey? If so, begin the five step process of setting the background from my first tutorial. Do you just edit the picture so the website’s name is no longer visible? If so, begin the six step process covered in this tutorial. It should be clear that all of the extra work editing the image lands you right back where you should have started.
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
Please feel free to ask if you have questions or need help.
