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.

Labels

Popular posts from this blog

It's here, it's great and it's Not Over Yet!

A funky organ, a funky brass section, a steaming rhythm section, easily the best guitar player this part of the western hemisphere (okay, not counting Jan Akkerman) and the most soulful smokey singer you have ever heard. All of that and gorgeously crafted songs, a lot of soul and passion. That's the new album Not Over Yet by fusion veterans Back to Basic. It was released yesterday, June 25th. For me this is no doubt the best album Back to Basic has ever released. And that's saying a lot. I suggest you install Equalizer APO , plug in your earphones and have a listen: The album is available on many music platforms, including YouTube (see above) and Spotify and can be purchased via Amazon , among others. For me this is no doubt the best album Back to Basic has ever released. And that's saying a lot. Review Honestly, what's not to like? Admittedly, to some young folks out there the band's members may look like old rockers. And I guess they are that too...
Post a Comment
Read more

Listen to Jumbo from Monterrey, Mexico

I'm sure you recognize the joy of discovering fantastic music that you've never heard before. At least I hope you do! And if not, you will... let me explain. There's a fair chance you have heard of Jumbo: there's Jumbo as in the elephant, Jumbo as in the chain of grocery shops, Jumbo the famous games creator, it's a single by the Dizzy Man's Band, it's even the name of a guitar shape. ...language is irrelevant... I bet you didn't know though that Jumbo is also the name of an alternative rock band from Monterrey, Mexico that was founded in May of 1997. Why Jumbo the band never reached even the smallest form of fame outside of Latin America is beyond me. I just discovered them today, when all I wanted to do was to see if Jumbo the supermarket sells a certain beer brand that was recommended to me by a friend. True story. The result in the side bar that Qwant (my default search engine) showed was a Wikipedia page, ' Jumbo (band) '. Never...
Post a Comment
Read more

Food Colour Graph for Food Bloggers

In a side project I have been working on a WordPress website for a health and food blogger. There is a huge amount of food themes available for WordPress. Although this may seem like a big advantage, this large choice of themes also gives me stress. Another source of stress is me being picky about the choice of fonts and colours. Although I was given free reign, which I like, the responsibility to make the correct choices weighs heavily. Choosing colours How do you choose colours for a website? Often a client has a logo or house style, which makes the choice a little easier. Sometimes even there is no choice at all, but preconceived ideas and designs. Color circle by Ellywa at Dutch Wikipedia - downsized from 600 x 600 to 400 x 400 However, more often than not a client has not really given any serious thought to design elements. So, where to start when choosing colours? In this case I came up with the idea to work with colours linked to different food i...
Post a Comment
Read more