Step-by-Step Guide: Install and Manage Stylus in FirefoxStylus is a popular userstyles manager that lets you apply custom CSS to websites, changing their appearance, layout, and behavior without altering server-side code. This guide walks you through installing Stylus in Firefox, finding and installing userstyles, creating and editing your own styles, organizing and syncing styles, and troubleshooting common issues.
What is Stylus and why use it?
Stylus is a browser extension that injects custom CSS into webpages based on URL matching rules. With Stylus you can:
- Change site appearance (dark themes, simplified layouts).
- Fix annoying styles (hide comments, enlarge fonts, remove auto-playing videos).
- Improve accessibility (increase contrast, adjust spacing).
- Experiment with design and layout without coding changes on the site itself.
Before you begin
- This guide targets Firefox (desktop). Mobile versions of Firefox may have limited extension support.
- Have a basic familiarity with CSS helpful but not required — many ready-made styles exist.
- All steps below reflect the current experience in Firefox as of 2025; minor UI details can change with updates.
1. Install Stylus in Firefox
- Open Firefox.
- Go to the Firefox Add-ons page by visiting about:addons or navigating to addons.mozilla.org.
- In the search box, type “Stylus” and press Enter.
- Locate the Stylus extension (author typically listed as “stylus”) and click it.
- Click “Add to Firefox” then confirm any permission prompts.
- After installation, you’ll see the Stylus icon (a leaf or similar) in the toolbar or overflow menu. You can pin it to the toolbar by right-clicking the icon and choosing “Pin to Toolbar” for quick access.
Quick checklist after installation
- Stylus icon visible in toolbar.
- Browser restarted if prompted.
- Permissions accepted.
2. Find and install ready-made userstyles
The easiest way to start is with community-made styles from userstyles.org (or similar repositories) and browser-specific marketplaces.
- Visit a userstyles repository such as userstyles.org, GitHub repositories, or dedicated style lists.
- Search for the site you want to style (example: YouTube, Gmail, Reddit).
- On the style page, click the “Install Style” or “Install with Stylus” button. Stylus will open a confirmation editor window showing the CSS and the sites it will apply to.
- Click “Save” or “Install” to enable the style.
- Visit the target website to see the style applied. You may need to refresh the page.
3. Create a new style from scratch
- Click the Stylus icon in the toolbar.
- Click “Write new style” (or “Manage” → “Write new style”).
- Give your style a descriptive name in the top field.
- In the “Applies to” section choose the scope:
- “URLs starting with” for exact site paths,
- “URLs on the domain” for entire sites,
- “URLs matching the regexp” for advanced rules,
- or use “Everything” to apply globally (use cautiously).
- Write your CSS in the editor. Example to hide a site header:
/* Example: hide header */ #header, .site-header { display: none !important; } - Click “Save”. Reload the target site to test.
Tips for selectors and rules
- Use the browser’s Developer Tools (Inspect Element) to find element IDs/classes.
- Add !important sparingly when site styles override yours.
- Test changes incrementally to avoid breaking site functionality.
4. Edit, enable/disable, and manage styles
Open Stylus’s management interface via the toolbar icon → “Manage” to see all installed styles.
- Enable/disable: Use the toggle next to each style. Disabled styles remain saved but inactive.
- Edit: Click the style name to open the editor, modify CSS or matching rules, then save.
- Duplicate: Use duplicate as a starting point for variations.
- Delete: Remove styles you no longer need.
- Order and specificity: Stylus applies styles per matching rules; more specific matches or the presence of !important can influence which rules take effect.
5. Organize with folders and tags
Stylus supports folders (or folders-like organization depending on version). In Manage view:
- Create folders to group related styles (e.g., “Social”, “Productivity”, “Accessibility”).
- Drag-and-drop styles into folders or use the style menu to move them.
- Use descriptive names and tags in the style description for easier searching.
6. Import, export, and sync styles
- Export: In the Manage page, use the export option to save individual styles or the entire style list as JSON. This is useful for backups.
- Import: Use the import option to add styles from JSON files.
- Sync: Stylus doesn’t provide a built-in cloud sync across browsers by default. You can:
- Manually export/import JSON between devices.
- Use third-party sync via a GitHub repo: keep styles in a repo and import updates.
- Some forked or fork-compatible builds may offer additional sync features—review their privacy and security before use.
7. Advanced: Using regular expressions and domains
- Regex matching: Use “URLs matching the regexp” for granular control (e.g., multiple subdomains or path patterns). Example to match both example.com and sub.example.com:
^https?://([a-z0-9-]+.)?example.com/ - Subdomain wildcard: Use domain-wide rules to cover all subdomains without regex when possible.
8. Debugging common issues
- Style not applying: Ensure the “Applies to” rule matches the current URL and the style is enabled.
- Conflicting styles: Disable other styles for the site to find conflicts.
- Browser caching: Hard-refresh (Ctrl+F5 / Cmd+Shift+R) to bypass cache.
- JavaScript-driven UIs: Some sites modify DOM after load—use CSS that targets dynamic classes or add rules for !important. For more complex changes, use user scripts (Greasemonkey/Tampermonkey) instead.
- Permissions blocked: Check Firefox extension permissions and any content-blocking extensions that might interfere.
9. Security and privacy considerations
- Review CSS before installing styles from unknown sources; malicious CSS can’t execute code but can change visible content in misleading ways.
- Avoid installing scripts masquerading as styles. Stylus handles only CSS, while user scripts need dedicated extensions.
- Keep your browser and Stylus extension updated.
10. Example: Simple dark theme for example.com
Open a new style and paste:
@-moz-document domain("example.com") { body { background: #0b0b0b !important; color: #e6e6e6 !important; } a { color: #4ea3ff !important; } header, footer { background: #0f0f0f !important; } } Save and reload example.com.
11. Resources and next steps
- Explore popular style repositories for inspiration.
- Learn CSS fundamentals (selectors, specificity, box model) to write better styles.
- Combine Stylus with browser dev tools for live testing and iteration.
If you want, I can: provide a ready-made dark style for a specific site, help write CSS for a problem you’re seeing, or create a folder structure and example export JSON for your styles.
Leave a Reply