ThatOneUnoriginal Project Pages

How to Install Stylus

To download the Stylus extension, go to the here (Chrome, Opera, Edge, etc..) or here (Firefox) to download the Stylus extension.


Note for Opera users you may need to follow this workaround for an outdated version of the Stylus extension in Opera addons gallery.


Stylus is not supported on Safari though an alternative extension Cascadea is available on the Mac App Store that works (exclusively) on Safari.

How to Install On Mobile

To install the Stylus extension on mobile, you will need a browser that supports the usage of web extensions. I'd recommend downloading Kiwi Browser (Android). Apart from that installing Stylus is the same as installing the extension on desktop/laptop.

How to Install Theme

On each of the listings, there will be a link to the UserStyles Listing and GitHub Repo (if it exists)

Through UserStyles

To install a style through the userstyles listing click the "UserStyle Listing" button to be brought to the UserStyles.world listing.


Once here scroll down untill you see the "Install" button. This'll open up a Stylus tab to where you can click the "Install style" button to intall the style (if the Style has any variables you can change them here before installing.)

Through GitHub

If applicable, to install a style through GitHub first click the "GitHub Repo" buttom to be brought to its GitHub Repo page. Once here find the "Releases" section and download the latest version of the style (the user.css file) or find the user.css file on the file list and download from there (it will also be the latest available version.)


Once you've downloaded the user.css file, open up the Stylus extension and go to the "Manage" section of the extension. Finally create a new stlye and Drag and Drop the File Over the Window or Open the File, Select Everything and Paste it In.

How to Update Theme

To update the Stylus theme, navigate to the "Manage" section of the Stylus extension, search for the style/theme in question, and press the magnifying glass with the two circular arrows icon. If there's an update available, press the download button (note this will overwrite any local edits.

How to Disable Theme

To disable the Stylus theme, navigate to the "Manage" section of the Stylus extension, search for the style/theme in question, and uncheck it to disable it. Alternatively navigate to the page that it effects, open the Stylus extension and uncheck the style/theme from there. To re-enable go through the same steps but make sure the style/theme is checked.

How to Uninstall Theme

To uninstall the Stylus theme, navigate to the "Manage" section of the Stylus extension, search for the style/theme in question, press the "x" button, then finally press "Delete." Alternatively navigate to the page that it effects, press the three dots, press "Delete" and press "Delete" once more to confirm the deletion.

How to Access Variables

If applicable, to change the variables of a style/theme navigate to the "Manage" section of the Stylus extension, search for the style/theme in question, press the gear icon (which indicates it has variables), then change the variables in the popup that appears. Alternatively navigate to the page that it effects and press the gear icon to change the variables from there (recommended as it can allow you to easily see what it does without having to change tabs.)

How to Change Fonts

On the DevForum Condensed, DevForum Modified and DevForum Modified Mobile styles, there is an option to change the font and header font types.


There are two options when changing the font option. Firstly, use your system fonts (fonts pre-installed or otherwise installed onto the system) or importing them from an external source.

How to Find System Fonts

Windows

MacOS

Linux

iOS/iPadOS

  1. Open Settings
  2. Select General
  3. Select Fonts

Android

How to Install System Fonts

Windows

  1. Download the font files. These often come in compressed .zip folders. In one .zip tolder, you might find several variations of the same font such as "light" and "heavy."
  2. If the fonts are zipped, unzip them by right-clicking the .zip folder and then clicking Extract. Now you'll see the available TrueType and/or OpenType font files. Don'y worry about choosing between the OTF or TFF files, the difference between the two are not consequential for regular daily computer use.
  3. Right click the fonts you want and click install. If the font comes in several variations, find the one that doesn't have and variations (usually denoted by the file that doesn't have a keyword like "Light" or "Heavy" after the name.)

Alternatively you can go to the Fonts folder and drag the font files into it. Windows will automatically install them once you do this.

MacOS

  1. Download the font files. If the fonts are zipped, double click on the zipped file to unzip it. You'll see the available font files.
  2. Install the font by;
    1. In the Font Book app, choose File > Add Fonts to Current User. In the window that appears, double-click the font file or;
    2. Drag the font file to the Font Book App icon in the Dock, then click Install in the dialouge box that appears or;
    3. Drag the font file on Font Book window or;
    4. Double Click the font file in the Finder, then click install in the dialouge box that appears

Linux

iOS/iPadOS

Use an application like Adobe Creative Cloud, Font Diner, AnyFont to install fonts onto your phone/tablet.

Android

Samsung

  1. Open the Galaxy Store
  2. Go to the Apps section, Find Popular Categories, then select Fonts
  3. Download a Font

Alternatively, you may need to download an app like #mono_ or zFont to download fonts onto Android. Most of these apps should provide a step by step guide on how to properly use them, so I'll leave it at that with how to use that method.

How to Import Fonts

The advantage of importing fonts is that you will not need to install the font onto your system (which is particularly good for Android and iOS/iPadOS where installing fonts is not as friendly and customizable. A disadvantage is that they will be overwritten whenever an update is made (updates will always overwrite Local Edits.) So you'll have to save the imports before updating the style. You'll also have to modify the source code yourself, albeit it shouldn't be too difficult.


Depending on the service you're using to get the fonts from, you'll have to fetch a different link. Below is an example of how the link should look like from a few vendors;


Google Fonts: https://fonts.googleapis.com/css?family=Font+Name (ex: https://fonts.googleapis.com/css?family=Open+Sans)

CDN Fonts: https://fonts.cdnfonts.com/css/font-name (ex: https://fonts.cdnfonts.com/css/chalet-newyork)

Font Library:https://fontlibrary.org//face/font-name (ex: https://fontlibrary.org//face/archivo-narrow)


Once you've grabbed this, open the extension and press the pencil icon, this'll open up a new Stylus tab with the code of the stylus theme. Once there scroll down until you find "@-moz-document". Make a line between this and the right of the stylus theme and type @import url(''); and insert the URL between the ' ' (ex: @import url('https://fonts.cdnfonts.com/css/open-dyslexic');)

Warning

Whenever you update, Stylus will overwrite any local edits made to the Stylus theme, so if you have installed/inserted fonts through this method, save the imports you added somewhere else and add them back in once you've updated! Otherwise they wont appear.

How to Change Fonts

Once you've chosen one of the above options when choosing the font you want to use, remember the font name then go to the variables section of the theme/stylus. You should find a variable with the name "Font Type" or "Heading Font Type" and replace the pre-selected font with the font of your choice

Social channels: