Skip to content

Installation Instructions

Jump to bottom
Archmonger edited this page Feb 21, 2021 · 66 revisions

Outline


Standard Installation Method - For Organizr Tabs

Plex, Synclounge, Deluge, Jackett, Tautulli, Filebrowser, Sonarr, Radarr, qBittorrent, NZBHydra, Ombi

For services that don't allow native CSS themes you must use Nginx to run these services behind a reverse proxy, then use subfilter (http_sub_module) to inject CSS and Javascript.

Navigate through the themes directory and decide on a theme that is compatible with your web application. Look at the example block below and change https://archmonger.github.io/Blackberry-Themes/Themes/<THEME-NAME>/<SERVICE-NAME>_in_organizr.css to fit your selected theme.

Example: Blackberry Flat for Synclounge in Organizr
set $theme '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Flat/synclounge_in_organizr.css">';

proxy_set_header Accept-Encoding "";
sub_filter '</body>' '$theme </body>';
sub_filter_once on;
Example: Blackberry Abyss for Filebrowser in Organizr
set $theme '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Abyss/filebrowser_in_organizr.css">';

proxy_set_header Accept-Encoding "";
sub_filter '</body>' '$theme </body>';
sub_filter_once on;

If you wish to see a sample Nginx server block for reference, click here.

Looking for Organizr? Click here.





Blackberry Theme Installer Method - For Organizr Tabs

You can install themes, such as our In Organizr variants, on Organizr tabs through custom JavaScript. Utilizing this method allows for our In Organizr customization to only be applied while you are within Organizr.

This will only work with tabs that are hosted on the same domain as Organizr. Subdomains do not work. If using subdomains you must either switch to subdirectories, or install these themes using alternate methods. If you are already using subfilter to theme the webpage, use the theme replacer instead.

  1. Navigate to Settings > Customize > Appearance > Custom JavaScript
  2. Paste in a JavaScript getScript statement for your chosen theme.
Example: Blackberry Shadow for Filebrowser in Organizr and Blackberry Flat for Deluge in Organizr
$.getScript(
  "https://archmonger.github.io/Blackberry-Themes/Extras/theme_installer.js",
  function () {
    // First variable: Organizr tab name (case sensitive).
    // Second variable: Theme link or theme name (case insensitive).

    // Installation of Blackberry Amethyst Filebrowser in Organizr
    themeInstaller(
      "Filebrowser",
      "blackberry amethyst filebrowser in organizr"
    );

    // You can use one theme installer for multiple tabs at once!
    // Installation of Blackberry Dreamscape Deluge
    themeInstaller("Deluge", "blackberry dreamscape deluge");

    // Works with Theme Park!
    // Installation of ThemePark Dark Radarr
    themeInstaller("Radarr", "themepark dark radarr");

    // Also has the ability to install any theme from a URL!
    themeInstaller(
      "Sonarr",
      "https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css"
    );
  }
);




Standard Installation Method - For Standalone Services

Plex, Synclounge, Deluge, Jackett, Tautulli, Filebrowser, Sonarr, Radarr, qBittorrent, NZBHydra, Ombi

For services that don't allow native CSS themes you must use Nginx to run these services behind a reverse proxy, then use subfilter (http_sub_module) to inject CSS.

Navigate through the themes directory and decide on a theme that is compatible with your web application. Look at the example block below and change https://archmonger.github.io/Blackberry-Themes/Themes/<THEME-NAME>/<SERVICE-NAME>.css to fit your selected theme.

Example: Blackberry Flat for Ombi Standalone
set $theme '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Flat/ombi.css">';

proxy_set_header Accept-Encoding "";
sub_filter '</body>' '$theme </body>';
sub_filter_once on;
Example: Blackberry Abyss for Filebrowser Standalone
set theme '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Abyss/filebrowser.css">';

proxy_set_header Accept-Encoding "";
sub_filter '</body>' '$theme </body>';
sub_filter_once on;

If you wish to see a sample Nginx server block for reference, click here.

Organizr V2

  1. It is recommended to follow the Nginx subfilter instructions for installing the Organizr theme. However, an alternative method is available to users (within step 2 and 3).
  2. If skipped step 1: Navigate to Settings > Customize > Custom CSS.
  3. If skipped step 1: Paste in a stylesheet import statement for your chosen theme at the top of the text box. For example:
    • @import "https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Shadow/organizr_minimal_edition.css";
    • @import "https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Royal/organizr.css";
  4. Navigate to Settings > Customize > Colors and Themes.
  5. Ensure Theme is set to Organizr and Style is set to Dark.
  6. Navigate to Settings > Customize > Notifications.
  7. Change type to lzi.

Note: Organizr Minimal Edition performs various enhancements to appeal to a minimalistic aesthetic. It is recommended to use this alongside all available Minimal Edition Extras

Optional: Suggestions for Better Visual Styling

  • Enable Minimal Login Screen (Settings > Customize > Login Page).
  • Enable Alternate Homepage Titles (Settings > Customize > Options).
  • Consider using some extras, such as Organizr custom icons!
  • Consider following the Organizr Suggested Configuration.




Extras

DISCLAIMER: Many of these extras use JavaScript directly from this repository. If you do not feel comfortable trusting this repository to not contain malicious changes, you have several options. For example, you can fork this repository, enable Github Pages, and change the subfilter links to your fork. Alternatively, you can self host our files on your webserver.

Organizr Minimal Edition Tooltips

Adds tooltips on hover to the Organizr sidenav. Organizr Minimal Edition themes automatically prevents the sidenav from expanding on hover. In order to see tab names, it is recommended you follow these steps. This must be used with an Organizr Minimal Edition theme.

  1. Navigate to Settings > Customize > Custom Javascript.
  2. Paste in $.getScript('https://archmonger.github.io/Blackberry-Themes/Extras/organizr_minimal_edition_tooltips.js');

Organizr Minimal Edition Remove Top Navbar

Removes the Organizr top navbar and pushes the refresh button and profile icon into the sidenav. This must be used with an Organizr Minimal Edition theme.

  1. Navigate to Settings > Customize > Custom Javascript.
  2. Paste in $.getScript('https://archmonger.github.io/Blackberry-Themes/Extras/organizr_minimal_edition_remove_topnav.js');

Organizr Minimal Edition Mobile Sidenav Button

Replaces the "hamburger" style sidenav button with a 4-cube grid. When using Organizr Minimal Edition, this will only be displayed on mobile.

  1. Navigate to Settings > Customize > Custom Javascript.
  2. Paste in $.getScript('https://archmonger.github.io/Blackberry-Themes/Extras/organizr_minimal_edition_sidenav_button.js');

Organizr Stylized Sidenav Logout Button

Within our standard themes, this changes the sidenav logout button to follow your theme's icon pack.

Minimal Edition themes automatically deletes the sidenav logout button. This is due to the fact that a logout button is already present in the user dropdown menu. However, the sidenav logout button will be automatically re-enabled when following the instructions below.

  1. Navigate to Settings > Customize > Custom CSS.
  2. Paste in a style sheet import statement for your chosen theme at the top of the text box. For example:
    • @import "https://archmonger.github.io/Blackberry-Themes/Extras/Logout/flat.css";
    • @import "https://archmonger.github.io/Blackberry-Themes/Extras/Logout/shadow.css";

Organizr Custom Icons

Custom icon packs for you to use as your tab image within Organizr.

  1. Navigate to Settings > Tab Editor > Tabs.
  2. On each individual tab, click Edit.
  3. For Tab Image, paste in a link to the theme and icon you choose. A list of icons is available within each theme's individual Icons folder. For example:
    • https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Royal/Icons/tautulli.png
    • https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Flat/Icons/ombi.png

In Organizr Background Fixer

In Organizr themes remove the background image in order to create a more consistent aesthetic when inside of Organizr. This background fixer will automatically re-enable the background image when you open your tab outside of Organizr.

Example: Adding the Background Fixer to Blackberry Flat Tautulli in Organizr
set $in_organizr_background_fix '<script language="javascript" src="https://archmonger.github.io/Blackberry-Themes/Extras/in_organizr_background_fix.js"></script>';
set $theme '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Flat/tautulli_in_organizr.css">';

proxy_set_header Accept-Encoding "";
sub_filter '</body>' '$theme $in_organizr_background_fix </body>';
sub_filter_once on;

Blackberry Theme Installer

Install themes on to Organizr tabs with ease! Simple to use and works with any theme, even if they are not hosted by Blackberry Themes. View our instructions here.

Note: Does not work with subdomains, only with subdirectories.

Blackberry Theme Replacer

Replaces existing themes on to Organizr tabs with ease. You no longer have to modify your Nginx subfilter to test a Blackberry Theme! Works with any theme, even if they are not hosted by Blackberry Themes. Makes it easier to test new themes without having to edit Nginx configuration files.

Example: Removing Blackberry Shadow for Filebrowser and Installing Blackberry Vanta in Organizr
$.getScript(
  "https://archmonger.github.io/Blackberry-Themes/Extras/theme_replacer.js",
  function () {
    // First variable: Organizr tab name (case sensitive).
    // Second variable: Theme link or theme name to install (case insensitive).
    // Third variable: CSS file link or file name of theme to be removed (case sensitive).

    // Here we remove the currently existing Blackberry standalone filebrowser theme to install an In Organizr version
    themeReplacer(
      "Filebrowser",
      "blackberry filebrowser in organizr",
      "filebrowser.css"
    );

    // Second example using a link on either categories.
    themeReplacer(
      "Sonarr",
      "https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Royal/sonarr.css",
      "https://gilbn.github.io/theme.park/CSS/themes/sonarr/plex.css"
    );
  }
);

Note: Does not work with subdomains, only with subdirectories.

Blackberry Organizr Icon Replacer

For use in testing out different icon packs. Replace existing icons with ease!

Example: Swapping Vanta icons with Hearth icons
$.getScript(
  "https://archmonger.github.io/Blackberry-Themes/Extras/icon_replacer.js",
  function () {
    // First variable: Name of the icon theme you are currently using
    // Second variable: Name of the theme you want to test out
    iconReplacer("Vanta", "Hearth");
  }
);

Improved Plex Mobile

Improves the site for better plex mobile use. All Plex themes within our repository already contain the pre-requisite CSS needed for Plex mobile. However, you'll need to add a META tag to your nginx subfilter to see those results.

Example: Improved Plex Mobile with Blackberry Flat Plex
set $mobile_fix '<meta name="viewport" content="width=device-width, initial-scale=1"></meta>';
set $in_organizr_background_fix '<script language="javascript" src="https://archmonger.github.io/Blackberry-Themes/Extras/in_organizr_background_fix.js"></script>';
set $theme '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Abyss/plex_in_organizr.css">';

proxy_set_header Accept-Encoding "";
sub_filter '</head>' '$mobile_fix </head>';
sub_filter '</body>' '$theme  $in_organizr_background_fix </body>';
sub_filter_once on;
Clone this wiki locally