Skip to main content

Tutorial: write your own user style - pt. 1

Topics:

Do not read beyond this line if you don't like puzzles and think you are not creative. You have been warned! And just to be on the safe side: you may hate me for writing this tutorial at first, but you will probably be happy I did if you make it to the end!

Do not read beyond this line if you don't like puzzles and if (you think) you're not creative...

Still here? Good, let's get on with it then...

What is a user style?

User styles let you change the way your browser displays web pages. Or better put: with user styles you can change the design of the elements of a web page.
This is done by finding existing elements - selectors, IDs, classes - in the HTML code of a web page, defining your own properties and values for these elements in new CSS rules, and applying these rules to the page with an external style sheet using a browser extension like Stylus.

With a user style you can enhance a page, accentuate certain parts of a page or even completely darken a page to reduce the strain on your eyes while working at night.
Have a look at how an existing page can be changed with a user style:

Tutorial on how to write your own user style - part oneScreenshot of Google Calendar with default view

before: Screenshot of Google Calendar with the default week view

Screenshot of Google Calendar with a user style applied

after: Screenshot of the same Google Calendar week view with a user style applied

I do like Google's Material Design. However, in the case of Google Calendar I really think it looks kind of boring. Its default view could use some visual enhancements to accentuate working days (light blue), weekend days (shaded) and the today column (yellow). This is why I wrote my personal user style for Google Calendar as seen in the 'after' screenshot above.

Prerequisites

This tutorial applies to Windows, Linux and macOS and to the web browsers Google Chrome, Mozilla Firefox and Opera. It assumes that you have a good working knowledge of computers.
You don't need any knowledge of programming languages. However, it does require some knowledge of HTML (HyperText Markup Language) and CSS (Cascading Style Sheets).

Online resources

If you need to brush up on your HTML and CSS knowledge, there are some excellent resources online that you can look up:

  • Free online HTML course on sololearn.com: HTML Fundamentals,
  • Free online CSS course on sololearn.com: CSS Fundamentals,
  • css-tricks.com is an excellent resource on CSS, HTML, JavaScript and WordPress development and a beautiful site to boot,
  • w3schools.com is one of the oldest resources on the web on HTML and CSS. Besides an extensive HTML Tutorial and a CSS Tutorial, you can find information on a wide variety of languages used on the web today.

Tools you need

  • Your browser's built-in developers tools,
  • The Stylish or Stylus browser extension. I work with Stylus. Links to the extension for each browser can be found in the sidebar of this blog,
  • A good dose of concentration,
  • An equally good dose of patience,
  • A healthy interest in puzzles,
  • A little creativity.
... you need developers tools, Stylus, concentration, patience, a 'puzzling' mind and creativity ...

What is Stylus?

Stylus is an extension that you install into your browser. An extension is a small program that extends the possibilities of your browser.
With Stylus, you can write CSS code (a 'user style') for any website and make it look different. It does this by 'injecting' the code into the site.
Of course, the CSS code you write is only added to the site in your browser. It is not a permanent change to the site. Styles can be disabled or enabled whenever you wish.

Why not Stylish? Stylish is the original extension used to write styles. From the Stylus website: "Stylus is a fork of Stylish that is based on the source code of version 1.5.2, which was the most up-to-date version before the original developer stopped working on the project. The objective in creating Stylus was to remove any and all analytics, and return to a more user-friendly UI." (add0n.com/stylus.html)

How to start writing your own user style

We will dive into the details of this in part 2. I'll give you some time to view the online courses and to install Stylus first. The second part of this tutorial will be published within a week. So come back for more later. We'll make a web designer out of you yet! ;o)

Let me know how you get on. Have you already played around with user styles? Or maybe you like Stylish better than Stylus? And if so, why? Please leave a comment below.

I will try my best to answer any questions you may have.

Comments

Post a Comment

Popular posts from this blog

Band Back to Basic

Back to Basic is a band originally from Rotterdam, The Netherlands, who play groovy soulful rock-inspired music. They've been around since 1993, which is also when I first saw them play. The last time I saw them play was in 2008 at their fifteenth anniversary reunion, also in Rotterdam. Since then, it has been quiet around the band. Too quiet. Yesterday I sort of stumbled over them at a local festival in their original home town. And again, sparks were splashing. The band were obviously having fun and the music was still top notch. New album 'Not Over Yet' I was happy to learn they recently finished recording a new album, aptly titled 'Not Over Yet', which will be released on Tuesday, June 25th * . It can be heard live on Sunday, June 30 2019 at the Facet Jazz Festival Hillegersberg , where the band will be playing on Stage 1 at 3pm. 'Not Over Yet' is the title of the new album by fusion veterans Back to Basic. Album launch: June 25th 2019 * EDI...
2 comments
Read more

Tutorial: how to display icons for external links using CSS only

In this tutorial you will learn a neat trick that allows you to display an icon after each external link with CSS only. Use case In this blog every external link is followed by an icon that indicates that it is an external link . In WordPress this is often accomplished by installing a plugin. In Blogger or other platforms admins don't get spoiled with plugins so much as in WordPress. While getting spoiled with plugins sounds nice, it has some distinct disadvantages: you tend to just search for an appropriate plugin and not consider other possibilities that may be better or faster, the more plugins you install, the more maintenance you will need to do (install security updates and check if the plugin is still maintained and does not conflict with other plugins), the more plugins you install, the slower your website will eventually get, you make your website or blog dependent on code that you have no control over other than disabling it. Don't get me wrong: plugins are a...
Post a Comment
Read more

Blogger Tutorial: the best SEO title tag, Addendum

SEO and XML go hand in hand on the Blogger platform. So do XML and learning, for me at least. After my first post on Blogger and search engine optimization, Blogger Tutorial: the best SEO title tag , I wasn't quite satisfied with the results. On search results, label pages and archive pages, the title still showed ' O'Cor | O'Cor '. I realized that these have their own objects that could be used to display a relevant title. Now, I know that these kinds of pages are not indexed by search robots, so why bother? Well, first I like to challenge myself and to learn new things. Second, it felt like there were some loose ends to tie. I don't like loose ends. Third, I don't really need a reason: it's my personal blog and I can do as I like (and it feels GOOD!). So, I set about learning on how to optimize the title tag even more. After a sleep deprived night (almost), I think I came up with a satisfying result. If you wish to jump to the code and don't...
Post a Comment
Read more