I've been a long-time user of a browser extension called TamperMonkey (and before that used GreaseMonkey on Firefox).
If you haven't heard of it before, TamperMonkey is a powerful browser extension that allows users to customise and enhance their web browsing experience by running custom scripts on websites. These scripts, known as userscripts, can be used to add new features or modify existing ones on web pages. For example, you can use TamperMonkey to change the font properties of a website to improve readability, remove ads, declutter the interface, or add custom buttons and keyboard shortcuts.
It's available for popular browsers like Chrome, Firefox, Edge, Safari, and Opera.
Installing TamperMonkey
Before we start writing our custom script, we need to install TamperMonkey. Follow these steps to install TamperMonkey on your browser:
- For Chrome: Visit the Chrome Web Store and search for "TamperMonkey". Click "Add to Chrome" to install the extension.
- For Firefox: Go to Firefox Add-Ons and search for "TamperMonkey". Click "Add to Firefox" to install the extension.
- For other browsers: Visit the TamperMonkey homepage and follow the instructions for your specific browser.
Practical Example
Let's say you want to change the font style of a specific class on a website from a cursive style to a sans-serif style. Here’s how you can do it:
1. Identify the Class: Inspect the website's HTML to find the class of the element you want to change. For example, if the HTML is:
<div class="text">Ask more leading questions</div>
The class is "text".
2. Create the Script:
a. Open TamperMonkey Dashboard: Click on the TamperMonkey icon in your browser's toolbar and select "Dashboard".
b. Create a New Script: Click on the "+" button or "Create a new script" to open the script editor.
c. Edit the Script Metadata: Replace the default metadata with the following:
// ==UserScript==
// @name Change Font Style
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Change the font style of a specific class on a website
// @match https://example.com/*
// @grant GM_addStyle
// ==/UserScript==
Replace https://example.com/* with the URL of the website you want to customise.
d. Add Custom CSS: Below the metadata, add the following JavaScript code to inject custom CSS into the website:
(function() {
'use strict';
// Add custom CSS to change the font style of elements with class "text"
GM_addStyle(`
.text {
font-family: Helvetica, sans-serif !important;
}
`);
})();
This script uses the GM_addStyle function to add custom CSS that changes the font family of elements with the class "text" to Helvetica, sans-serif.
e. Save the Script: Click "File" and then "Save" to save your script.
3. Test the Script: Visit the website and check if the font style has changed. If everything is set up correctly, the text should now be displayed in Helvetica, sans-serif.
Customising element14 Community (Safely)
If you want to change how element14 Community displays content, then I'd recommend prefixing all your CSS rules with .content-fragment-content .content
This targets the content, and won't end up breaking the menus or anything critical to the functioning of the site. Even if you do break something, you can just turn the script off in TamperMonkey.
Here's an example script which will increase the font sizes for content;
// ==UserScript==
// @name element14 Community UI Changes
// @namespace http://tampermonkey.net/
// @version 2024-06-10
// @description Change the default Community font size
// @match https://community.element14.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=element14.com
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Custom CSS to change the font styles of body content.
// By prefixing rules with '.content-fragment-content .content' you can safely change the content CSS without accidently changing the rest of the website.
// Try a different font if you like, or delete those lines if you just want to adjust the sizes
GM_addStyle(`
.content-fragment-content .content p {
font-family: Helvetica,Arial,'Segoe UI',sans-serif;
font-size: 1.1em !important;
}
.content-fragment-content .content h2 {
font-family: Helvetica,Arial,'Segoe UI',sans-serif;
font-size: 24px;
font-weight: bold;
}
.content-fragment-content .content ol li {
font-family: Helvetica,Arial,'Segoe UI',sans-serif;
font-size: 1.1em;
}
`);
})();
I've left placeholders for the font-family, so you can specify a different font if you want to.