Skip to content

Installation Instructions

Jump to bottom
Archmonger edited this page Oct 2, 2019 · 66 revisions

Outline


Standard Installation Method - For Organizr Tabs

Plex, Synclounge, Deluge, Jackett, Tautulli, Filebrowser, Sonarr, Radarr

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 Ombi in Organizr
proxy_set_header Accept-Encoding "";
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Flat/ombi_in_organizr.css"> </head>';
sub_filter '</body>' '<script language="javascript" src="https://archmonger.github.io/Blackberry-Themes/Extras/in_organizr_background_fix.js"></script></body>';
sub_filter_once on;
Example: Blackberry Quicksilver for Filebrowser in Organizr
proxy_set_header Accept-Encoding "";
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Quicksilver/filebrowser_in_organizr.css"> </head>';
sub_filter '</body>' '<script language="javascript" src="https://archmonger.github.io/Blackberry-Themes/Extras/in_organizr_background_fix.js"></script></body>';
sub_filter_once on;

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

Ombi

  1. Navigate to Settings > Configuration > Customization > Custom CSS.
  2. 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-Hearth/ombi_in_organizr.css";
    • @import "https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Vanta/ombi_in_organizr.css";
  3. Edit your Nginx configuration to use the background fixer.
Example: Background Fixer for Ombi
proxy_set_header Accept-Encoding "";
sub_filter '</body>' '<script language="javascript" src="https://archmonger.github.io/Blackberry-Themes/Extras/in_organizr_background_fix.js"></script></body>';
sub_filter_once on;

Note: Make sure to have Settings > Configuration > Customization > Preset Themes set to Please Select (disabled).





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.

  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 (abbreviated).
    themeInstaller("Filebrowser","bbs filebrowser in organizr");

    // You can also use this for unlimited themes at once by simply calling themeInstaller again!
    themeInstaller("Deluge","bbq deluge in organizr");

    // 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

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
proxy_set_header Accept-Encoding "";
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Flat/ombi.css"> </head>';
sub_filter_once on;
Example: Blackberry Quicksilver for Filebrowser
proxy_set_header Accept-Encoding "";
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Quicksilver/filebrowser.css"> </head>';
sub_filter_once on;

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

Ombi

  1. Navigate to Settings > Configuration > Customization > Custom CSS.
  2. 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-Hearth/ombi.css";
    • @import "https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Vanta/ombi.css";

Note: Make sure to have Settings > Configuration > Customization > Preset Themes set to Please Select (disabled).

Organizr V2

  1. Navigate to Settings > Customize > Custom CSS.
  2. 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-Royal/organizr.css";
    • @import "https://archmonger.github.io/Blackberry-Themes/Themes/Blackberry-Shadow/organizr_minimal_edition.css";
  3. Navigate to Settings > Customize > Colors and Themes.
  4. Ensure Theme is set to Organizr and Style is set to Dark.
  5. Navigate to Settings > Customize > Notifications.
  6. 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

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 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

Organizr Stylized Sidenav Logout Button

This changes the sidenav logout button to follow your theme's icon pack. By default, BBF Organizr Minimal Edition 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/bbf_organizr_logout_button.css";
    • @import "https://archmonger.github.io/Blackberry-Themes/Extras/bbs_organizr_logout_button.css";

In Organizr Background Fixer

This background fixer will automatically re-enable the background image when you open your tab outside of Organizr. In Organizr themes remove the background image in order to create a more consistent aesthetic when inside of Organizr. This becomes an issue when you also periodically view your tabs outside of Organizr. See the in Organizr installation instructions to see how it's used.

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

You no longer have to modify your Nginx subfilter in order to disable a theme then test a Blackberry Theme. Replace themes on to Organizr tabs with ease! Simple to use and works with any theme, even if they are not hosted by Blackberry Themes.

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 (abbreviated) of theme to be installed.
	// Third variable: CSS file link or file name of theme to be removed.

	// Here we remove the currently existing Blackberry standalone filebrowser theme to install an In Organizr version
	themeReplacer("Filebrowser", "bbf 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.

Clone this wiki locally