Skip to content

Custom CSS for routers running FreshTomato Firmware

Notifications You must be signed in to change notification settings

tsg2k2/tomato-css

 
 

Repository files navigation

A deep rework of brandonongzy's custom css. It's an attempt to re-implement AdvancedTomato's look and feel on vanilla FreshTomato firmware (i.e. css only).

Includes

  • (new) built-in light/dark theme support - uses system's preference automatically
  • uniform panel-based UI
  • custom-drawn controls
  • svg-based icons in main menu, on all buttons, and some panel titles (embedded, no external dependencies)
  • (new) fully self-contained, including fonts
  • uniform alignment and indents across all the pages.
  • uniform text styles
  • multi-column for wide monitors (needs script below )
  • collapsible menu for low-res screens
  • css-only vector animations for spinners
  • parametrized to make different accent color easy to apply, etc.

Optional Tampermonkey (Chrome, Firefox) scripts are provided:

Screenshots

Dark Theme - Default - Overview

Screenshot

Light Theme - Default - Overview

Screenshot

Light Theme - Blue - Basic

Screenshot

Light Theme - Red - Graphs

Screenshot

Installation

Using init script

1. Upload script

  1. Navigate to Administration > Scripts
  2. Choose WAN Up
  3. Paste the contents of tomato_wanup_light
  4. Save changes

2. Enable Custom CSS

  1. Navigate to Administration > Admin Access
  2. Change color scheme to custom.css
  3. Save changes and reboot router
  4. You may need to erase your brower's cache before the new UI appears.

Using SSH

1. Upload Custom CSS over SSH

  1. Enable SSH deamon in Administration > Admin Access
  2. Connect to router over SSH
  3. Create folder wwwext in /var/
  4. Upload custom.css file into /var/wwwext/

2. Enable Custom CSS

  1. Navigate to Administration > Admin Access
  2. Change color scheme to custom.css
  3. Save changes and reboot router
  4. You may need to erase your brower's cache before the new UI appears.

After every reboot, this needs to be performed again. Router will automatically remove custom.css file after reboot

About

Custom CSS for routers running FreshTomato Firmware

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 95.5%
  • JavaScript 4.5%