The spice rack

CSS is a language to describe the design of elements on a website. It can change the position, colors, fonts, etc. of every element on the page.

Install CSS in your own soup

Soup allows you to personalize your base soup theme with custom CSS.

To do this, open the admin panel in your soup:

Once there, click on the Design heading, and click the EDIT CSS button.

You will see a large text input where you can add your own css.

To add new CSS rules to an existing stylesheet, simply append the new text to the existing one. (NOTE: this may lead to conflicts)

How to apply CSS in your view of other peoples soups

Of cause you cannot modify the soup of someone else, but you can adjust how your own browser displays it.

To do this, you typically need an extension that allows you to install userstyles. One that is available on most browsers is stylish.

• Chrome - Stylish
• Firefox - Stylish
• Safari - Stylish

Userscripts are pieces of JavaScript that are injected into a page, typically by a browser extension.

How to install userscripts

To use userscripts, you first need to install a browser extension to support them. One of those is Tampermonkey. It is available for chrome, firefox, opera, edge and safari

Most pages hosting userscripts offer a button to install the script.

How to create a userscript

Userscript are just JavaScript code with a metadata block at the start.

There are several pages that host userscripts. E.g. greasyfork.org or openuserjs.org.

Extensions are modifications to a web browser using its extension API. They can work without being explicitly triggered and can force extensive modification of the site behavior, your browsing experience, and the UI of your browser.

How to install extensions

You can typically only install that are build specifically for your browser.

Most browsers have a currated site by the company that made the browser, that lists available extensions (The store)

An extension post on the spice rack will contain a link to either to the store, or an extension file to install manually. (See "How to install extensions manually")

How to install extensions manually

WARNING: Do not install extensions manually if you do not trust the author of the extension. A rogue extension can steal data and cause damages.

Chrome

Navigate to "chrome://extensions/", check the "Developer mode" toggle, click "Load unpacked extension..." and select the unpacked extension folder.

Firefox

Navigate to "about:addons" and drag&drop the extension file into the browser window.

How to create an extension

Most browsers can use use extensions written using the the WebExtensions system.

How to post an extension

To post an extension on the spice rack soup, create a new text post containing links for all supported browsers, a description, and preferably a link to the source code.

Bookmarklets are small programs written in JavaScript. When called, they can manipulate the page in a varity of ways, add or remove content, change the pages behavior, send web requests, and generally do whatever any website can do. However, they need to be explicitly triggered by the user.

WARNING: because of their wide reaching access, you shouldn't execute untrusted bookmarklets.

How to install bookmarklets

Chrome / Chromium / Firefox / Internet Explorer

Press CTRL+SHIFT+B to open the bookmark bar if it is not already open. Then drag and drop the link in the bookmarklet post into the bookmark bar.

Edge

Currently, Edge does not support the manual URL manipulation of Bookmarklets. Installing bookmarklets is made stupidly long winded. The next big Windows 10 update is supposed to fix that.

Here are some instructions work around this limitation

How to use a bookmarklet

You only need to click on the bookmark to execute the bookmarklet on the current page.

How to create bookmarklets

Bookmarklets run normal JavaScript code. You need to prefix it with "javascript:" (without the quotes). Now the code can be used like link on any page.

Note: In order to get your bookmarklet to run in older versions of Opera, which are still commonly used, you may not use double quotes.

How to post bookmarklets

To post a bookmarklet on soup, just create a link post with the bookmarklet as a url and a text describing the function of the bookmarklet

Note: Posts of bookmarklets in the spicerack soup need to contain a link to the full source code, and instructions to replicate any obfuscation, so the integrity of the code and its safety can be validated.