tronax
Know what you're doing yet?
- Joined
- Nov 16, 2019
- Messages
- 248
- Likes received
- 1,201
It is entirely possible to use a browser extension or a user script to style everything in whatever way a particular user desires. However, it takes time and effort to set up, so most don't and won't. Which means they don't get the best possible experience. All the while, it would be so easy to enhance it. Just a single button added, a bit of messing with styles, and that's all it'd take. Please, consider that.
To show a practical example of how it could be implemented, I'll post the script I'm using for my own "Reader Mode". To test it, you can either paste&enter it into the browser console (Ctrl+Shift+J in Chrome, which will only work on the specific page where you did that) or install through Greasemonkey/Violentmonkey browser add-on to make it persistent. It adds a button to the right of "Search" at the top panel. Click it once - it'll convert the page. Click it again - it'll revert everything (in reader mode, the top panel is unsticked, so to disable it you'll have to scroll to the top). If used as a user script, it will remember the current on/off state between pages.
To show a practical example of how it could be implemented, I'll post the script I'm using for my own "Reader Mode". To test it, you can either paste&enter it into the browser console (Ctrl+Shift+J in Chrome, which will only work on the specific page where you did that) or install through Greasemonkey/Violentmonkey browser add-on to make it persistent. It adds a button to the right of "Search" at the top panel. Click it once - it'll convert the page. Click it again - it'll revert everything (in reader mode, the top panel is unsticked, so to disable it you'll have to scroll to the top). If used as a user script, it will remember the current on/off state between pages.
JavaScript:
// ==UserScript==
// @name QQ_ReaderMode
// @namespace tronax
// @match https://forum.questionablequesting.com/threads/*
// @grant none
// @version 1.0
// @author tronax
// @description Reader mode for QQ
// ==/UserScript==
(function() {
'use strict';
// --- 1. DEFINE THE STYLES ---
// The first two rules are to preserve existing values in case of future design alterations, rather than to change anything
const readableCss = `
body.readable-mode-active .p-body {
background-color: #f1f3f6!important;
}
body.readable-mode-active article.message {
border: 1px solid #c0c0c0 !important;
border-radius: 4px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
body.readable-mode-active .p-body-inner {
max-width: 860px !important;
}
body.readable-mode-active .message-userContent > article > div:nth-child(1) > div {
width: 680px !important;
margin: auto !important;
text-align: justify !important;
line-height: 1.5 !important;
font-family: Arial !important;
font-size: 28px !important;
}
body.readable-mode-active .message-inner > .message-cell--user {
display: none !important;
}
body.readable-mode-active .message-inner > .message-cell--main {
background-color: white !important;
color: #222 !important;
}
body.readable-mode-active .message-body span[style*="font-size"] {
font-size: inherit !important;
color: inherit !important;
}
body.readable-mode-active .p-navSticky.is-sticky {
position: relative !important;
}
`;
// --- 2. INJECT THE STYLESHEET INTO THE PAGE ---
const styleElement = document.createElement('style');
styleElement.id = 'readable-mode-styles';
styleElement.textContent = readableCss;
document.head.appendChild(styleElement);
// --- 3. LOCATE THE NAV BAR AND PREPARE IT FOR POSITIONING ---
const navBar = document.querySelector('nav.p-nav');
if (!navBar) {
console.log('Readable Mode Script: Could not find the <nav class="p-nav"> element.');
return;
}
// Set the nav bar's position to 'relative'.
// This is essential for placing a child element absolutely within it.
navBar.style.position = 'relative';
// --- 4. CREATE THE TOGGLE BUTTON ---
const readableButton = document.createElement('button');
readableButton.id = 'readable-mode-toggle';
readableButton.title = 'Toggle Readable Mode';
// Button styles for absolute positioning.
readableButton.style.cssText = `
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
background: transparent;
border: none;
color: white;
cursor: pointer;
padding: 5px;
border-radius: 5px;
line-height: 0;
`;
// --- 5. CREATE THE SVG ICON ---
const bookIconSvg = `
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
</svg>
`;
readableButton.innerHTML = bookIconSvg;
// --- 6. APPEND THE BUTTON DIRECTLY TO THE NAV BAR ---
navBar.appendChild(readableButton);
// --- 7. ADD CLICK EVENT AND PERSISTENCE ---
const toggleFunction = () => {
const isActive = document.body.classList.toggle('readable-mode-active');
localStorage.setItem('readableMode', isActive ? 'enabled' : 'disabled');
};
readableButton.addEventListener('click', toggleFunction);
// --- 8. APPLY ON PAGE LOAD IF IT WAS PREVIOUSLY ENABLED ---
if (localStorage.getItem('readableMode') === 'enabled') {
document.body.classList.add('readable-mode-active');
}
})();