Organizr Theme Customization - Archmonger/Blackberry-Themes GitHub Wiki

All Blackberry themes have several primary variables that can be modified from within Organizr. These variables relate to the navbar, sidebar, and webpage background.

Insert a CSS variable block below your everything in your custom CSS tab. You can copy, paste, and modify one of the sample blocks in this article to get you started!

Webpage Background

Example: Using a custom image as a background.

:root {
  --bg-light: url("https://images.unsplash.com/photo-1542080255-e564af7ae266?ixlib=rb-1.2.1");
  --bg-dark: var(--bg-light);
}

Example: Using a custom image as a background and dimming the image by 50%.

:root {
  --bg-light: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url("https://images.unsplash.com/photo-1542080255-e564af7ae266?ixlib=rb-1.2.1");
  --bg-dark: var(--bg-light);
}

Example: Using a custom image as a background and dimming the image by 50% only in the Organizr settings menu.

:root {
  --bg-light: url("https://images.unsplash.com/photo-1542080255-e564af7ae266?ixlib=rb-1.2.1");
  --bg-dark: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), var(--bg-light);
}

Organizr Login Screen Background

Example: Changing the login screen background to an image

:root {
    --login-bg: url("https://archmonger.github.io/Blackberry-Themes/Resources/blur-noise.png");
}

Example: Changing the login screen background to a gradient

:root {
    --login-bg: linear-gradient(red, yellow);
}

Sidebar Background

Example: Changing the sidebar background to pink

:root {
  --sidenav-bg: pink;
}

Example: Changing the sidebar background to an image, then adding a red to black tint on top

:root {
  --sidenav-bg: url(https://images.unsplash.com/photo-1542080255-e564af7ae266?ixlib=rb-1.2.1);
  --sidenav-layer-2-bg: linear-gradient( rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );
}

Navbar Background

Changing the navbar color to orange

:root {
  --navbar-color: orange;
}

Multiple Variables

Example: Changing the sidebar background to black and the webpage background to red.

:root {
  --bg-light: red;
  --bg-dark: var(--bg-light);
  --sidenav-bg: black;
}

Example: Blackberry Shadow Variables

Note: Fallback variables are used in the event that the browser was unable to render the original image.

:root {
  --bg-light: linear-gradient(135deg, #252b2f, #090c0e);
  --bg-dark: var(--bg-light);
  --navbar-color: linear-gradient(90deg, #121719, rgba(18, 23, 25, 0.5), rgba(0, 0, 0, 0));
  --sidenav-bg: linear-gradient(180deg, #121719, #121719, rgba(18, 23, 25, 0.75), rgba(18, 23, 25, 0.25), rgba(18, 23, 25, 0.15), rgba(0, 0, 0, 0.0));
  --sidenav-layer-2-bg: transparent;
  --sidenav-bg-fallback: linear-gradient(180deg, rgb(18, 23, 25), rgb(22, 28, 29), rgb(27, 33, 36), rgb(26, 33, 35), rgb(30, 35, 39));
  --sidenav-layer-2-bg-fallback: transparent;
}