Some of you might be familiar with Stylish – an extension for Firefox that lets you create your own styles (or download someone else’s shared styles) to be used to override any website’s style. If you weren’t familiar with it, well, you are now! Firefox users use Stylish. Opera users can add custom styles with userscripts. But what can you do if you’re using Safari? This tutorial will guide you to using most styles designed for Stylish to be used in Safari 4. So let’s begin!

Safari 4 has the feature to use a custom stylesheet. Yes, a, as in, one. So, in order to extend that further, you’ll have to either put all the styles in one stylesheet, or, better, just link to them externally.

Dunno anything about styles? Don’t worry, you don’t need to know that much, and it’s simple.
So here’s what you do.

1. Set Safari up to use your style. Here’s how to do it:
   1. You’ll need to make a stylesheet to load. Just open your favorite text editor, and save the blank file (for now) wherever you want. Make sure the extension is “.css” and other than that there’s no naming convention. For the sake of the article we’ll refer to the file as “stylesheet.css”.
   2. Now, open the preferences (Settings button on the top right > “Preferences…”, or just Ctrl+,)
      Then, go to the “Advanced” section on the top right. This is the window that you should see:
      
      See where it says “None Selected”? Click that, and from the dropdown, pick “Other…”. Pick the file that we created earlier. That’s it for setting Safari up! Next, we’ll edit the style.
2. Open your favorite text editor again. Now, here’s the tricky part. You can style your own stuff, or refer to external files. I’ll use a simple style found at userstyles.org to show you how to do it. Here’s a simple style I found that I’ll use to demonstrate. All we need to do is tell our stylesheet to import this style into it. So, we’ll type this down:
   @import url(”http://userstyles.org/styles/raw/570″)
   I’ll explain how this works. @import tells the style to import. url() tells it that what I want to import is external and is referred to by a url. The link I used is the link to this specific style’s raw form. What this means, is this link links to the style, and that style only (no fancy HTML around it).
3. Now, here’s a problem. Some styles are designed to work only for a specific site, and not for everything like this one. This usually means that the creator added lines similar to @-moz-document domain(”domain.com”) and they wrap the style. If that’s the case, you’ll have to hope you don’t have to do anything but remove that line (and the matching brackets that it uses, { and }), and if that’s true, just copy/paste the style itself into our stylesheet.css and remove the lines similar to that. Be careful though, sometimes styles that aim at specific websites can cause trouble when we remove their aim, because the elements it changes might appear on different sites.

That’s it! Hopefully you’ve done it and hopefully you’ve found styles that work right. If you know CSS, you might wanna try editing styles that don’t work to make them work, and maybe make your own styles too. So let’s recap…

• Make a stylesheet (remember to end it with .css!)
• Tell Safari to use it through the preferences window
• @import url(”link-to-style-from-website”)
• When all else fails, remove @-moz-document url/url-prefix/domain and pray to god it works

Don’t forget to subscribe via RSS or Email if you liked this post.

• Blender Lesson 27 – SnapTo and Deform