How To Change Tumblr Dashboard Layout

about me.

My name is Petra, I'm a 22-year-old full-time frontend web developer from Austria. In my free time I listen to music, draw, watch youtube/netflix, and code.

I started releasing themes in 2016. I've had an interest in creating websites since I was 11 years old, and now I'm a full-time web developer!

I like making diverse, responsive themes with good code quality. I'm not very active right now, but maybe again one day!

	petra
	she/her
	17.07.1999
	austria
	junior frontend web developer

my education.

I learned programming in high school for 5 years, but they never taught us web development, so I actually self-taught myself HTML/CSS (and later Javascript) by playing around with tumblr themes. I did not go to college.

Nowadays I learn a lot at my job, especially professional practices that I wouldn't know about if I wasn't working in the field.

In the future I want to improve my eye for good design.

my process.

I code in VSCode until I'm forced to switch to tumblr's editor. In VSCode I use SCSS, an autoprefixer, linters, and formatting plugins to make my life easier.

I test my themes in most modern browsers and on mobile devices.

I take good code quality very seriously, and always strive to make my themes as high-quality as possible.

send me a message.

↪︎ I am on hiatus and probably won't be answering! Sorry, life is crazy!

↪︎ Please read the f.a.q. and answered questions first.

↪︎ Having troubles with a theme? If the helper can't help you, include the name of the theme you are using, and the url of the blog you are using it on (like this: @yoururl).
If you want to send screenshots, you can use my submit page.

↪︎ I do not answer customization questions or help with themes that aren't my own.

f.a.q.

Do you do commissions? No, sorry! I have a full-time job, which unfortunately takes away a lot of my free time.

You didn't respond to my message! ~~Sorry! Try sending again (no, you're not annoying). Note that you can't send me links in the ask box, tumblr won't send it, so use the submit box for links!~~ I'm on hiatus!

A link is broken! Please tell me about it. Meanwhile, if you need a code, you can visit my github (or for old codes my pastebin) and search for the theme code you need.

Answered Questions All answers Answers to general questions To find answered questions for a particular theme, find the theme here and click the "q & a" link. If there is no link, there haven't been any questions yet.

troubleshooting helper.

If you are having problems with theme installation, you can use this widget. It will give you the answers to the most common theme-related questions. If it couldn't help you, feel free to message me!

plugins.

Check me if you're a coder

whitelist/blacklist tags

hide specific tags or
only show specific tags
(All tags will still work!)

Get it!

no text previews in post links

Removes text previews from post links
(All links will still work!)

Get it!

theme help assistant

gives instant help to the most common theme-related problems
simply put it on your faq page in an iframe!

Work in progress

pagii

detects current page type (home, post, tag, ...)
adds helpful classes to the body element
use page types in if statements in javascript!

Work in progress

all-around javascript helper

many functions to make coding easier

Work in progress

By using my themes you agree to my rules. Please like and/or reblog themes that you use. You can find the full credits here.

Dashboard Themes

Dashboard Themes change the way the tumblr dashboard looks to you in your browser. It works for Firefox, Chrome, and Opera, not any other browser, and not mobile! What they can do to your tumblr dashboard:

Change colors
Change font sizes
Hide certain elements
Make images (partly) grayscale
Change background images
… and more!

Click here to browse my dashboard themes!

How to install Stylus

Note: You might have heard about the browser extension "Stylish" to install dashboard themes. DO NOT USE "Stylish". It steals your browser history etc. More info here. If you are currently using Stylish, de-install it right now! Thankfully, there is an alternative that isn't evil: Stylus.

Make sure your browser is updated
Make sure that you do not have "Stylish" installed
Install Stylus for your browser [Chrome | Firefox | Opera]
You might have to close and re-open your browser
Make sure the icon for Stylus is in your browser toolbar or menu

How to install a theme

Make sure you have installed the browser extension "Stylus" (NOT "Stylish"!) - See tutorial above.
In the post of the dashboard theme you want to use, click on the link that will give you the code, and copy the whole code
Go to your tumblr dashboard
Click on the Stylus icon in your browser toolbar
You will find a text that says "Create style for:". Hover over the "tumblr.com" part (the middle part of the shown URL) and click it.
A new tab will open in which you can create your style. You can change they style's name to whatever you want - e.g. "dashboard theme 1". Make sure "activated" is checked so that you will see it.
In the big code field, paste the code you have copied before
Click "Save". You should now already see the changes on your dashboard. If you don't, try refreshing the dashboard.
While on the dashboard, click on the Stylus icon and make sure that only the styles you want are activated.

How to customize

Click on the Stylus icon while on the tumblr dashboard and click on the pen icon next to the theme you want to customize
Now you can change the code of the theme:
- Click the colored square next to colors to change them.
- You can also re-use previously defined variables on other variables. For example: if you set the accent color to red (–color-accent1: red;), you can re-use this color later (–something-else: var(–color-accent1);)
- For non-color variables, just follow the guide in the code to change them.
When you're done, click "Save"!

How to update (re-install) my themes

If the dashboard theme you're using is made by me and broken, you might have to update it. That's because tumblr sometimes changes their code, so the dashboard themes have to adapt.
First, find the post of the theme you are using, and click on the code link. Read the version number on the top of the code.
Then go to your dashboard, click the Stylus icon, and click the pen next to the theme to edit it. In the code that opens, read the version number again.
If the number is the same, there is no new version. But if you are using an old version, simply replace your old code with the new one, and "save"!

FAQ

Browse answered messages

The following problems are fixed already, please re-install the theme (see tutorial above):

Chat backgrounds are too white -> fixed in version 1.5
Avatars are weirdly big / double -> fixed in version 1.4
Font size changes affect the blog popup -> fixed in version 1.1

If you have any of these problems…

Posts don't have the background color they should have -> If you have the xkit extension "reblog display options" installed and activated, you have to untick the "Lightly highlight reblogs in alternating gray and new comments in blue" option!
Font is weirdly big sometimes -> read this please

Other problem?

Make sure that you have activated the theme. Go to your tumblr dashboard, click the Stylus icon, and make sure the checkmark next to the theme name is checked. Uncheck every theme you don't want to use.
Make sure your settings are correct. Below the code in the editor it should say: "URLs starting with https://www.tumblr.com/"
Make sure your browser is updated
Make sure all the colors you changed are in the right format. After the : it should always look like any of these (don't forget the ; at the end):
- var(–some-variable);
- #ffffff;
- rgb(0, 0, 0);
- rgba(0, 0, 0, 0);
Update the theme if there's a new version (see "How to update (re-install) my themes")

Trouble editing?

If there are no colored squares to press, make sure the option "show color picker for CSS colors" is activated (on the left side of the editor).
If there is a colored square missing where there should be one, just add a single space ( ) right before the color. (e.g. right before #ffffff)
Note that colored squares don't show next to variable values (e.g. var(–some-variable);)