Preffered method to install is now using the plugin system in Stash head over to CommunityScripts
The new version no longer requires custom served folders to load CSS from. All CSS is side loaded through an additional Javascript file.
I am going to create this as a branch of the CommunityScripts repo and pull request it in, so it might be preferrable to wait to see if it gets accepted there.
Adds a button that shows a menu, allowing you to change CSS Themes and apply various CSS snippets for Stash App. The CSS isn't made by myself and in the CSS files authors where known are referenced.
Only the CSS of one theme can be applied at a time, and any amount of snippets can be applied.
Clicking on any radio/checkbox to apply the CSS, saves the CSS content of the Stylesheet in the browsers local storage, with an applied flag, eitehr true or false which allows the script upon page navigation and refresh to apply previously selected stylesheets
Under Change Order of Menu Bar, you can drag the elements to reorder the main menu and upon dropping it will generate the required CSS. It should work on touchscreens also, tested on Chrome IOS.
- Copy repository into Stash plugins folder.
- Reload plugins from settings and enable
The CSS code used is provided by Stash Community Themes and Stash Community Custom CSS Snippets.
To add your own CSS open the themeSwitchCSS.js file. CSS is defined in const variables. They are ordered in categories. You can make your own categories too. Just define a variable to hold your css and put the css inbetween backticks ``.
Then look for the variable themeSwitchCSS at the bottom of the file. If adding to an existing category to just add a new number at the end. Or if you are reordering the CSS or themes. Be sure to update the numbering and there is no duplicate numbers within a theme or some won't render. It's stuctured like but can be seen better within the file itself.
const themeSwitchCSS = { Theme: { 1: { displayName: "Default", styles: null, key: "themeSwitchPlugin-theme-default", version: null, }, 2: { displayName: "Black Hole", styles: blackHole, key: "themeSwitchPlugin-theme-blackHole", version: "2.0", } YourCategoryHere: { 1: { displayName: "Your CSS Name Here", styles: Your-CSS-Variable-Name-Here, key: "themeSwitchPlugin-YourCategoryHere-AnIDforYourCSS", version: VersionNumberOrNull, } } } }