userstyles

3

TUMBLRTALE

An Undertale inspired custom Tumblr header bar. Complete with a custom logo, menu buttons and 8 different Soul Heart cursors to choose from! Also has suport for the New Xkit extention.

(Note: as of right now, the cursor only shows up when you hover over the header area due to a few troubles getting it to work all over. Plus its a little hard to be accurate, but if y’all want I can see if I can fix it later)

I’m also thinking of possibly trying to wrangle up a basic style to cover the rest of the page body, but for now I’ve been using it along side Tumblr Dark by Aeropia and it looks quite nice.

EDIT:  @bethesdads has made a totally awesome dashboard theme to go with my header, go Check it Out!


You can Download Tumblrtale Here

Font used in graphics is “Determination Sans” by @japanyoshi

4

HEY! LOOK!
It’s my brand new Ultimate Whovian dashboard style!

Now you can add all the Doctor Who awesomeness to your boring dashboard and make your tumbling experience FANTASTIC!

BUT WAIT, THERE’S MORE!

Since I know most of you are like me (and by that I mean INTP), I broke down the theme into seven separate modules, so you may mix and match anyway you want, with any other styles you want! These fuckers are totally compatible with everything! I swear!

If you want to be awesome, but don’t know how, download Stylish extension for Chrome and make your life better.

Have fun, and please, leave me your impressions and suggestions.
(But mostly tell me how awesome I am, please)

So yeah, I couldn’t stop just at the “A” with the pen thingy. So I decided to do a all-Castle Tumblr icon script.
For those who don’t know Stylish, just install it on Chrome or Firefox, then go here and install this script. That easy. ;)

[UPDATED: The “Always” logo is slightly smaller now, because it was causing problems when you went to the “settings” page. It should all be working properly now. ;) ]

[EDIT: if anyone is having trouble with installing the script, I wrote a little tutorial here.]

DOCTOR WHO TUMBLR THEME: INSTALL TODAY!

CLICK HERE TO INSTALL
Introducing Nathanthenerd’s Doctor Who Tumblr Theme. Including a ‘BADWOLF.’ Tumblr Logo, Gallifreyan Icons and Tardis Background.
(compatible with Google Chrome and Firefox. Please ensure you have the 'Userstyles’ script/add-on installed before installing this theme) 
All credited sources for images can be found on the theme’s page. 

The World Ends With You Tumblr Icons!

They look quite lovely and fancy, no? Do you want them? Then you can have them!

First, install Stylish for Google Chrome or Firefox. Then, go here and click on the green ’+Install with Stylish’ button. Then, you will get a window asking you if you want to install the style into stylish. Click on ‘Install’ if you’re in Firefox. Click on OK if you’re in Chrome. Now look at your dashboard and enjoy your pretty icons!

Style made by HayGurlHay.

Customize your Tumblr dash - Stylish fonts tutorial!

karabellatrix asked if I knew of any tutorials for customizing the font on your Tumblr dash. Unfortunately I don’t, so why not make one!

(Looking for help with your layout? Try WTFIXES!)

I’m going to show you how to make a new Stylish theme first, then how to update any existing Stylish theme you’re using. (Want to take the easy way out? Grab my Fontloader style here! You pick a color and font and it does all the work for you.)

Deciding what to update

All right, the very first thing you need to do is to identify the different elements that Tumblr uses so that you can change as many as you want. Or just one! There doesn’t seem to be a resource for this, so I’ve posted a partial list here. (If you know of any that aren’t listed, let me know and I’ll update. The doc will automatically refresh.)

For this tutorial, we’re going to change all the text on the page at once by using and then just one text element: new post labels with new_post_labels. (If all you want to change is the text inside each individual Tumblr post [ie the photo captions, quotes, etc], then you’ll want to change the body font with, oddly enough, body.)

Choosing your font

You have two options when making your own userstyle:

  1. System fonts: these fonts are installed on each user’s computer. Since you’re making a dashboard style just for yourself, you don’t need to worry about using backup fonts in case someone doesn’t have the exact one you want.

  2. Web fonts: these fonts are loaded from a web server under someone else’s control, which gives you better flexibility when designing sites that other people will see too (ie, you don’t have to worry about whether they have the font you want. They’ll see exactly what you do no matter what they have installed.). The main limitations to web fonts for Tumblr dashboards are that you can’t use them in styles you publish at userstyles.org and they slow down loading time for any site that uses them. If you’re interested in learning more, check out Google’s Font API.

We’re going to use a system font for this tutorial: Palatino Linotype.

You’ll also want to think about how else you want to style your text: italics, bold, colors, whether links have a different look, uppercase or lowercase, size, kerning, and tracking. If you’re not familiar with CSS elements and properties, W3Schools has a ton of great information.

In order to make the font changes more visible, I’m going to make the new stuff hot pink. The hex code for that is #F660AB or #hotpink. How great is that? (Want something other than blisteringly pink? W3Schools to the rescue again, with this fantastic guide to HTML colors!)

Putting the style together

Once you’ve decided which elements you want to update and you’ve decided on a font and style, open or create a new style by clicking on the Stylish icon in your toolbar (Chrome) or add-on bar (Firefox). Choose Options in Chrome or Manage styles in Firefox.

In Chrome, your new tab will look like this:

(I use Chrome, so if you’re using Firefox your dialogs are going to look substantially different. If you’re having trouble following along, let me know. Or switch to Chrome! No, you should stick with Firefox if you like it. Unless you really want to switch! But only if you want to, obviously.)

Since we’re starting a new style, click the ‘Add style’ button to get the next screen in Chrome. Firefox users, click the ‘Write new style’ button.

Name your style something distinctive! (When you get addicted to making userstyles for literally every site you visit, you’ll be able to find it easily among the hundreds of things you stupidly called some variation of Yay Fancy Font! Uh, not that anyone does that. Ahem.)

In Chrome, as seen above, you’ll also want to tick the ‘Enabled’ tickybox. This will make your new style automatically load for any open tabs, so you can see in real time how your changes work. Just remember to hit save before you go to look or it won’t populate your new changes. (Firefox, we’ll get to you in just a minute!)

Coding time! 

Okay. This is so easy to do you’re going to vomit. (Probably not.) (Unless you’re having some issues, in which case, you should try drinking some water maybe?) (I’m sorry you’re not feeling well :( )

Right, so. Let’s start with updating all the text on the page!

  1. In the box conveniently marked Code in Chrome and just a box in Firefox, paste or type the following:

    *{ font-family: Palatino Linotype !important; color: hotpink !important; }

    (You need to include the !important as that’s what allows your code to overwrite everything else, giving you the font style you want and not what Tumblr wants you to have.)

  2. IF YOU’RE USING FIREFOX, skip to step 4.
    IF YOU’RE USING CHROME, under the code box you’ll see something called Applies to:

  3. Click the Specify button and you’ll get a new dialog that looks like this:

    In the dropdown, choose URLs starting with then enter http://www.tumblr.com/ and click add. This will make your style work only on the dashboard and user pages of Tumblr, so you won’t mess with the styles of any individual Tumblrs you visit.

    All right, Chrome! You’re almost done so you can skip right over step 4.

  4. Welcome back, Firefoxers! Since you don’t have an Applies to: section, so what you need to do is copy and paste the following to the very beginning of your code, before you start talking about any elements: 
    @namespace url(http://www.w3.org/1999/xhtml);@-moz-document url-prefix('http://www.tumblr.com/’) { 

    It can go all on one line with no breaks. Then, after the very last character you have in your code box, add a closing curly bracket }

    And that’s it! 

Okay, now, you’re just about set! Click Save and go see what your Tumblr tab looks like. It hopefully looks something like this, with so much pink everywhere your eyes hurt a little bit:

Does it? Yay! If not, boo! Try starting again from the beginning with a new style and double-checking that you haven’t dropped any semicolons or curly brackets. They’re pretty pesky.

Now, if you just want to change a specific item, like the new post labels that show up under the new post icons, then you’ll do exactly what’s listed above, except instead of using that * at the beginning of your code, you’re going to use .new_post_label 

So, your code box will look like this:

And your Tumblr dash should look like this, with everything back to default except those icons:

Editing an existing style

Oh gosh, this is so easy you’re going to think Billy Mays was telling you about it on the teevee.

Open up your Stylish Options or Manage styles page again and click ‘Edit’ for whatever style you’re using that you want to update. (I’m going to use my Vintage icons style, which you’ve already seen in some of the screenshots in this tutorial.)

Now, you’ll have to go through the existing code to find where the original author has included custom font options. Or, and this is how I prefer to do it because I am the l a z i e s t, in Chrome you can click on ‘Add new section’. Once you have the new code box open, follow the Coding time! directions above.

In Firefox, I’m afraid, you’re still going to have to go through the existing code and replace the font names you find.

The end!

If you’re having any trouble with this, feel free to hit me up on askbox (but beware the dreaded character limit and period restrictions) or by submitting a text post (in which you can ramble as much as you want and even … use URLs, oh my god. What is that nonsense!).

If you just don’t feel like doing this at all (it really is easier than it looks, I swear), you can install my Fontloader style from userstyles.org. It has a limited number of options, but you don’t have to do any more work than choosing a few buttons. Plus, once you have it installed, you might want to try doing your own customization? Kinda maybe sorta?

Oh, wait, one more thing…

So, remember when I said that if you wanted to, you could use a web font like those Google makes available? Well, if not, scroll back up the page and then catch the rest of us up.

The great part about the Google Font API is how incredibly easy it is to use in a Tumblr dash style. All you need to do is stick in one line at the beginning of your code, and then use the font name in place of whatever system font you’re using. Here, watch:

  1. In Firefox or Chrome, open up your Stylish tab and then edit an existing theme you have loaded.
  2. In Chrome, you’re going to paste this line in at the very beginning of your code, before anything else.

    In Firefox, you’re going to paste this line in after the opening curly bracket { that you have at the end of your first line. So it’ll go @namespace blah blah {, and then on the next line you’ll copypasta the following:

    @import url(http://fonts.googleapis.com/css?family=FONT+NAME);
     
  3. Now, go to the Google Font API page and click on the Quick Use link. You’ll see a line of code that looks just like what we have above, with something else in the place of FONT+NAME, like Maven+Pro. Paste that name into your line of code, then use the same name wherever you have a font-family named in the rest of your style. (Everywhere but in the @import line, you’ll want to change the plus signs to spaces in the font name. So Maven+Pro would become Maven Pro.)
  4. Save and test, and you should see your new web loaded font! It might take a few seconds to load, though.