Skip to content

Custom CSS for Routers running Tomato Firmware

Notifications You must be signed in to change notification settings

Generator/tomato-css-userstyle

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 

Repository files navigation


Logo

Tomato-css Userstyle

Table of Contents

Description

Tomato-css Userstyle is a fork from tsg2k2's custom css ported to userstyle.
Tomato-css Userstyle shares the same code of tsg2k2's custom css with the option for customization using Stylus browser extension

It's an attempt to re-implement AdvancedTomato's look and feel on vanilla Tomato firmware (i.e. css only). Includes

  • uniform panel-based UI
  • custom-drawn controls
  • svg-based icons in main menu, on all buttons, and some panel titles (embedded, no external dependencies)
  • uniform alignment and indents across all the pages.
  • uniform text styles
  • multi-column for wide monitors (WiP)
  • css-only animation for spinners
  • parametrized to make different accent color easy to apply, etc.

Getting Started

Prerequisites

  • Stylus
    • Firefox
    • Google Chrome

Installation

Install directly with Stylus

Dynamic Graphs

Tampermonkey (Chrome, Firefox) scripts provided:

Usage

Open Stylus manager, click on cog icon to customize it Screenshot

Screenshot

Differences between Usertyle and custom.css

Feature Usertyle custom.css
Custom Colors ✔️
Live Changes ✔️
Any Browser/Device [1] ✔️
Multi Router/Domain [2] ✔️

[1]: Only available on installed browser
[2]: custom.css needs to be manually installed on every router

Screenshots

Light Theme - Default - Overview

Screenshot

Light Theme - Blue - Basic

Screenshot

Light Theme - Red - Graphs

Screenshot