Customizing Organizr

0

Header

Custom CSS with layer#ūüéā

In this guide I will show you how I customized my Organizr theme and added custom buttons and logos to my homepage with the awesome layer#Cake tool by Leram84!

This guide is somewhat outdated. Check out the layer#Cake update post

First go to

https://github.com/leram84/layer.Cake/

and figure out which of the three install paths you want to with. You can choose between basic, advanced and super duper advanced. I’m going to do super duper advanced because I’m trying to create a “plex” theme and for that I need more control.

If you’re not sure which colors to choose check out¬†coolors.co

It will take some trail and error so I have tried to explain what the different layers on the homepage block changes below.

I will also add my custom static CSS below. Remember to backup your old custom CSS and HTML if you have any.

What changes what

/ This block is for the Homepage /

--color-layerOne: #COLORCODE;
  • This changes your homepage background
--color-layerTwo: #COLORCODE;

This changes:

  • Your homepage notice border background color.
  • The button background color.
  • The active speed test box backgrounds.
  • The media search bar background.
  • The download tile color.
  • The download tile background and border color.
  • The now playing tile background and border.
  • The recently added tile background.
  • The view all button color.
  • The Calendar Top Bar, Calendar header background, the calendar body header row outside border.
--color-layerThree: #COLORCODE;

This changes:

  • The homepage notice background color.
  • The media search bar color.
  • The download tile header background, download tile tab backround and download client row background.
  • Recently added left right buttons and recently added filter button.
  • Calendar body header row, calender body inside border lines, calender current day higlight.
--color-layerFour: #COLORCODE;

This changes:

  • The media search body active bacground color.
  • Download tile inactive tab hover background.
  • Download tile odd rows border and background.
  • Recently added filter button active hover background color.
  • Calendar body background.
--color-layerFive: #COLORCODE;

This changes:

  • The active speed test background color.
  • The media search bar input color.
  • The media search body active content icons color.
  • The download tile down arrow color
  • The download tile refresh icon color.
  • The downloading items progress bra background color.
  • The now playing content progress bar color.
  • The calendar left and right buttons.
  • The calendar navigation text buttons.
--color-tLayerOne: #COLORCODE;

This changes text color on:

  • The homepage notice jumbotron text color.
  • The button text color.
  • The download tile header text.
  • The now playing text
  • The now playing header text.
  • The recently added text.
  • The playlist header text.
  • The calendar top bar text.
--color-tLayerTwo: #COLORCODE;

This changes text color on:

  • The elegant notice header text color.
  • The media search bar text color.
  • The download tile text color.
  • The download tile tab text color.
  • The download client row text color.
  • The downloading items progress bar text color.
  • The now playing content text color, the small text color, content icon color and the pause color.
  • The recently added arrow colors.
  • The recently added filter button text color.
  • The recently added content text color.
  • The recently added view all button text and hover color.
  • The calendar weekday/date text color.
  • Most of the settings menu text color.

Comment:

This controls the recently added and the media search background color!

/* Recently Added Tile Background */
.box-shadow.content-box {
background: var(--color-layerOne);
}

This also controls the “Unauthorized box color”

/* Download Tile Border Radius */
.content-box {
background: var(--color-layerThree);
}

Should be just “border” not “border-color

/* Now Playing Tile Background */
.thumbnail.ultra-widget {
background-color: var(--color-layerThree);
border: var(--color-layerOne);
}

Custom buttons for Plex/Ombi/Chat

This is added in the custom¬†HTML¬†tab in “Edit Homepage”

I have 3 custom buttons, as seen below.

These buttons will navigate to other tabs INSIDE Organizr

Just follow the instructions in the code.

For more button options go to https://github.com/leram84/layer.Cake/tree/master/Add-Ons

!Note, that if your plex button takes you to plexpy change the plexpy tab name to something like stats, or move it below the plex tab.¬†#Justjquerythings¬†This has been fixed by causefx ūüôā

<!-- /////////////////////// Three Button \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Custom Module /////////////////////// -->
<!-- /////////////////////// Button One \\\\\\\\\\\\\\\\\\\\\\\ -->
<div class="row">
<!-- **User Edit** Replace bLayerOne with the LOWERCASE name of the tab you wish this button to go to **User Edit** -->
<div tab="plex" class="hp-link col-sm-4 col-lg-4">
<div class="content-box green-bg" style="cursor: pointer;">
<!-- **Edit** Replace btLayerOne with the Text you wish to display on this button **User Edit** -->
<h1 style="margin: 10px" class="text-uppercase text-center">Plex</h1>
<div class="clearfix"></div>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Button One /////////////////////// -->
<!-- /////////////////////// Button Two \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- **User Edit** Replace bLayerTwo with the LOWERCASE name of the tab you wish this button to go to **User Edit** -->
<div tab="ombi" class="hp-link col-sm-4 col-lg-4">
<div class="content-box green-bg" style="cursor: pointer;">
<!-- **User Edit** Replace btLayerTwo with the Text you wish to display on this button **User Edit** -->
<h1 style="margin: 10px" class="text-uppercase text-center">Request Show/Movie</h1>
<div class="clearfix"></div>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Button Two /////////////////////// -->
<!-- /////////////////////// Button Three \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- **User Edit** Replace bLayerThree with the LOWERCASE name of the tab you wish this button to go to **User Edit** -->
<div tab="chat" class="hp-link col-sm-4 col-lg-4">
<div class="content-box green-bg" style="cursor: pointer;">
<!-- **User Edit** Replace btLayerThree with the Text you wish to display on this button **User Edit** -->
<h1 style="margin: 10px" class="text-uppercase text-center">Chat</h1>
<div class="clearfix"></div>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Button Three /////////////////////// -->
</div>
<script>
$('.hp-link').click(function(e){
window.parent.$("li[name^='"+$(this).attr('tab')+"']").click();
e.preventDefault();
});
</script>
<!-- /////////////////////// Three Button \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Custom Module /////////////////////// -->

Custom logo and favicon

You can add your own loading and header logo in the Advanced settings menu.

Just add your own images in the /images folder inside Organizr and edit the names.

The Settings menu logo is called¬†“organizr-logo-h.png”¬†and is also located in the /images folder. Just replace that with your own logo. (Remember to make it read only so that any new update wont replace it with the original logo)

The favicons are located in /images/favicon. Create your own favicons here: http://www.favicon-generator.org/ Replace the Organizer favicons with the ones you have created, you also need to place the favicons in the root folder. (/Dashboard)

Extra adjustments

I have also removed the notice border with this code:

/* Changes the notice box */
.panel-warning{
background: #282A2D !important;
border-color: transparent !important;
color: #282A2D !important;
}
.panel.panel-warning > .panel-heading{
background: #282A2D !important;
border-color: transparent !important;
color: #E5A00D
}

Add this if you want to change the color of the remember me button on the login page. (This also changes the color on the “Active” button in the “Edit Tabs” menu)

This is added in your custom CSS

/* Remember Me Knob when selected */
input.switcher-success:checked + label:after {
background-color: var(--color-layerTwo);
}
/* Remember Me slider when selected */
input.switcher-success:checked + label:before {
background-color: var(--color-layerTwo);
}

And if you want to add a background image to the homepage, add this at the bottom of your custom HTML

<!-- ///////////////////////// Home Page \\\\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\ Background Image ///////////////////////// -->
<style>
.container-fluid {
/* <<User Edit>> Replace the url with your own image url <<User Edit>> */
background: url(http://i2.kym-cdn.com/entries/icons/original/000/021/807/4d7.png);
}
</style>
<!-- ///////////////////////// Home Page \\\\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\\\ Background Image ///////////////////////// -->

Add this to change the input text color in the login box, and other input boxes in settings. (!This may cause a color conflict if you are using the basic or advanced modules!)

/* Input text color */
.form-control.material {
color: var(--color-loginTLayerTwo) !important;
}

My static theme [Dark Orange]

I focused mainly to get the homepage and the login page to my liking, so the settings menus are somewhat “messed” up.

If you want to change the orange accents to a color of your preference, just change #E5A00D to the color you like.


Disclaimer! This is a STATIC custom CSS. It will NOT update itself like the basic and advanced modules!


 This was last updated 31.07.2017

/* ///////////////////////// Custom \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ User Settings ///////////////////////// */
/* ///////////////////////// Begin Edit \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ ///////////////////////// */
:root {
/* This block is for the Homepage */
--color-layerOne: #282A2D;
--color-layerTwo: #E5A00D;
--color-layerThree: #3F4245;
--color-layerFour: #777777;
--color-layerFive: #282A2D;
--color-tLayerOne: #282A2D;
--color-tLayerTwo: #E5A00D;
/* This block is for the Login Page */
--color-loginLayerOne: #282A2D;
--color-loginLayerTwo: #E5A00D;
--color-loginLayerThree: #3F4245;
--color-loginLayerFour: #ab0000;
--color-loginLayerFive: #282A2D;
--color-loginTLayerOne: #282A2D;
--color-loginTLayerTwo: #E5A00D;
--color-loginTLayerThree: #FFFFFF;
/* This block is for the Chat Page */
--color-chatLayerOne: #282A2D;
--color-chatLayerTwo: #3F4245;
--color-chatLayerThree: #E5A00D;
--color-chatLayerFour: #676767;
--color-chatLayerFive: #E5A00D;
--color-chatTLayerOne: #E5A00D;
--color-chatTLayerTwo: #ffffff;
/* This block is for all the Settings and popup windows */
--color-extraLayerOne: #282A2D;
--color-extraLayerTwo: #282A2D;
--color-extraLayerThree: #E5A00D;
--color-extraLayerFour: #282A2D;
--color-extraLayerFive: #676767;
--color-extraTLayerOne: #676767;
--color-extraTLayerTwo: #282A2D;
/* This block is for the Calendar Color Codes */
--color-calAvailable: #E5A00D;
--color-calUnavailable: #ab0000;
--color-calUnreleased: #676767;
--color-calPremier: #295f48;
}
/* ///////////////////////// Custom \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ User Settings ///////////////////////// */
/* ///////////////////////// End Edit \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ ///////////////////////// */

/* ///////////////////////// Homepage \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */
/* Homepage Background */
body {
background-color: var(--color-layerOne);
}
/* Home Page Notices */
.jumbotron {
color: var(--color-tLayerOne);
background: var(--color-layerTwo);
}
.panel-success {
color: var(--color-tLayerTwo) !important;
Background: var(--color-layerOne) !important;
border-color: var(--color-layerTwo)!important;
}
.panel-title {
color: var(--color-tLayerOne);
}
.panel-success .panel-heading {
background: var(--color-layerTwo)!important;
border-color: var(--color-layerTwo)!important;
}
#homepageNotice > div > div > div.panel-body {
background: var(--color-layerOne);
border-radius: 3px;
}
/* Button Text */
h1.text-uppercase.text-center {
color: var(--color-tLayerOne);
}
/* Button Background */
.content-box.green-bg {
background: var(--color-layerTwo) !important;
}
/* Active Speed Test Box Backgrounds */
.content-box.red-bg {
background: var(--color-layerTwo) !important;
}
.content-box.blue-bg {
background: var(--color-layerTwo) !important;
}
.content-box.yellow-bg {
background: var(--color-layerTwo) !important;
}
/* Active Speed Test Active */
.ultra-widget.green-bg .w-used {
background-color: var(--color-layerFive) !important;
}
.ultra-widget.red-bg .w-used {
background-color: var(--color-layerFive) !important;
}
.ultra-widget.blue-bg .w-used {
background-color: var(--color-layerFive) !important;
}
.ultra-widget.yellow-bg .w-used {
background-color: var(--color-layerFive) !important;
}
/* Media Search Search Bar */
div.input-group-addon {
color: var(--color-layerFive)!important;
background: var(--color-layerThree) !important;
}
.input-group-addon {
color: var(--color-tLayerTwo)!important;
background: var(--color-layerThree) !important;
}
/* Media Search Body Header Bar Active */
.table-stripped thead th {
background: var(--color-layerThree);
border-bottom: 2px solid var(--color-layerOne)!important;
}
/* Media Search Body Active */
table.table.table-hover.table-stripped {
background: var(--color-layerFour);
}
/* Media Search Body Active Text and Border */
tr.openTab{
color: var(--color-tLayerTwo);
border-top: 2px solid var(--color-layerThree);
}
/* Media Search Body Active Content Count */
.badge {
background: var(--color-layerThree) !important;
}
/* Media Search Body Active Content Count Icons */
.fa-film.white {
color: var(--color-layerFive);
}
.fa-tv.white {
color: var(--color-layerFive);
}
.fa-music.white {
color: var(--color-layerFive);
}
/* Media Search Body Active Content Hover */
.table-hover>tbody>tr:hover {
background-color: var(--color-layerThree);
}
/* Download Tile */
.tabbable.panel.with-nav-tabs.panel-default, .panel-default>.panel-heading, .panel-default>.panel-heading, .table-responsive, .content-tools a {
color: var(--color-tLayerTwo);
background: var(--color-layerT) !important;
border-color: var(--color-layerTwo);
}
/* Download Tile Border Radius */
.content-box {
background: var(--color-layerThree);
}
/* Download Tile Header Text */
.panel-default>.panel-heading {
color: var(--color-tLayerOne);
}
/* Download Tile Header Background */
.progress-widget.table-striped > thead {
background-color: var(--color-layerThree);
}
/* Download Tile Tabs */
.panel.with-nav-tabs .panel-heading .nav-tabs > li.active a {
color: var(--color-tLayerTwo) !important;
background: var(--color-layerThree) !important;
border: 1px solid transparent !important;
}
/* Download Tile Inactive Tab Hover */
.panel.with-nav-tabs .panel-heading .nav-tabs > li a:hover {
background: var(--color-layerFour);
}
#downloadClientRow ul > li a {
background: var(--color-layerThree);
color: var(--color-tLayerTwo);
}
/* Download Tile Down Arrow */
.fa-chevron-down {
color: var(--color-layerFive);
}
/* Download Tile Refresh Icon */
.repeat-btn {
color: var(--color-layerFive) !important;
}
/* Download Tile Header Line Upper Border */
.table>thead>tr>th {
vertical-align: top;
border-top: 1px solid var(--color-layerTwo) !important;
}
/* Download Tile Header Line Lower Border */
.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 0px;
}
/* Download Tile Even Rows */
.progress-widget.table-striped > tbody > tr:nth-of-type(even) {
vertical-align: top;
border-top: 2px solid var(--color-layerThree) !important;
background-color: var(--color-layerThree);
}
/* Download Tile Odd Rows */
.progress-widget.table-striped > tbody > tr:nth-of-type(odd) {
vertical-align: top;
border-top: 2px solid var(--color-layerFour) !important;
background-color: var(--color-layerFour);
}
/* Downloading Items Progress Bar Background */
.progress-widget .progress {
background-color: var(--color-tLayerTwo);
}
/* Downloading Items Progress Bar Active */
.progress-bar-success {
background-color: var(--color-layerFive);
}
/* Now Playing Text (1.4-)*/
#streamz > .text-center {
font-size: 18px;
font-weight: 500;
color: var(--color-layerTwo) !important;
}
/* Now Playing Header Text (1.41+) */
#streamz > h5 > strong {
color: var(--color-layerTwo) !important;
font-size: 18px;
font-weight: 500;
}
/* Now Playing Tile Background */
.thumbnail.ultra-widget {
background-color: var(--color-layerThree);
border: var(--color-layerOne);
}
/* Now Playing Content Title */
h5.text-center.zero-m.elip {
color: var(--color-tLayerTwo);
}
/* Now Playing Content Small Text */
small.zero-m {
color: var(--color-tLayerTwo);
}
/* Now Playing Play Content Icon */
i.fa.fa-play {
color: var(--color-tLayerTwo);
}
/* Now Playing Content Pause Icon */
i.fa.fa-pause {
color: var(--color-tLayerTwo);
}
/* Now Playing Content Progress Bar */
.progress.progress-bar-sm.zero-m > .progress-bar.progress-bar-success {
background-color: var(--color-layerTwo) !important;
}
/* Now Playing Bottom Margin */
#plexRowNowPlaying {
margin-bottom: 5px;
}
/* Recently Added Tile Background */
.box-shadow.content-box {
background: var(--color-layerOne);
}
/* Recently Added Text */
#recentMedia .text-center {
font-size: 18px;
font-weight: 500;
color: var(--color-tLayerOne);
}
/* Recently Added Left Right Buttons */
a.pull-left.next-mail.btn.btn-default.waves.waves-button.btn-sm.waves-effect.waves-float.slick-arrow {
color: var(--color-tLayerTwo);
background-color: var(--color-layerThree);
}
a.zero-m.pull-left.prev-mail.btn.btn-default.waves.waves-button.btn-sm.waves-effect.waves-float.slick-arrow {
color: var(--color-tLayerTwo);
background-color: var(--color-layerThree);
}
/* Recently Added Filter Button */
button.btn.waves.btn-default.btn-sm.dropdown-toggle.waves-effect.waves-float {
color: var(--color-tLayerTwo);
background-color: var(--color-layerThree);
}
/* Recently Added Filter Button Active */
.dropdown-menu>li>a {
color: var(--color-tLayerTwo) ;
background: var(--color-layerThree); 
margin-left: 0px !important; 
}
.dropdown-menu {
background-color: var(--color-layerThree) !important;
}
/* Recently Added Filter Button Active Hover */
.dropdown-menu>li>a:hover {
color: var(--color-tLayerTwo);
background-color: var(--color-layerFour);
}
/* Recently Added Content Text */
.slick-active {
color: var(--color-tLayerTwo);
}
/* Playlist Headers */
#plexPlaylists h5.text-center {
font-size: 18px;
font-weight: 500;
color: var(--color-tLayerOne); 
}
/* Media List Hover Animations */
.slick-slide img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: .8 !important;
}
.slick-slide:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(.9);
z-index: 10000000;
border-radius: 10px;
opacity: 1 !important;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* View All Button */
.form-control, .form-control:focus {
color: var(--color-layerOne);
background-color: var(--color-layerThree);
border-color: var(--color-layerThree);
}
/* Calendar Top Bar */
.fc-calendar .fc-toolbar {
background: var(--color-layerOne);
color: var(--color-tLayerTwo);
}
/* Calendar Left Right Buttons */
.fc-calendar .fc-toolbar .fc-prev-button, .fc-calendar .fc-toolbar .fc-next-button {
color: var(--color-layerTwo);
}
/* Calendar Navigation Text Buttons */
.fc-calendar .fc-toolbar .fc-right button {
color: var(--color-layerTwo);
}
/* Calendar Header Background */
.fc-calendar {
background-color: var(--color-layerTwo);
}
/* Calendar Body Header Row */
.fc-calendar .fc-day-header {
color: var(--color-tLayerTwo);
background-color: var(--color-layerThree);
border-color: var(--color-layerOne) !important;
}
/* Calendar Body Header Row Outside Border */
.fc-head-container {
border-color: var(--color-layerOne)!important;
}
/* Calendar Month View Day Numbers */
.fc-basic-view .fc-day-number {
color: var(--color-tLayerTwo);
}
/* Calendar Body Background */
.fc-day-grid {
background: var(--color-layerOne);
}
/* Calendar Body Outside Border */
.fc-body > tr > .fc-widget-content {
border-color: var(--color-layerOne);
}
/* Calendar Body Inside Border Lines */
.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-popover {
border-color: var(--color-layerOne);
}
/* Calendar Current Day Highlight */
.fc-unthemed .fc-today{
color: var(--color-tLayerTwo);
background: var(--color-layerThree) !important;
}
/* Calendar Legend */
#calendarLegendRow > div > div > span.label.label-primary.well-sm {
background: var(--color-calAvailable) !important;
}
.label.label-danger.well-sm {
background: var(--color-calUnavailable) !important;
}
.label.indigo-bg.well-sm {
background: var(--color-calUnreleased) !important;
}
.label.light-blue-bg.well-sm {
background: var(--color-calPremier) !important;
}
/* Calendar Color Code */
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.green-bg {
background: var(--color-calAvailable) !important;
}
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.red-bg {
background: var(--color-calUnavailable) !important;
}
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.indigo-bg {
background: var(--color-calUnreleased) !important;
}
.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.light-blue-bg {
background: var(--color-calPremier) !important;
}
/* Changes the notice box (Removes the border) */
.panel-warning{
background: #282A2D !important;
border-color: transparent !important;
color: #282A2D !important;
}
.panel.panel-warning > .panel-heading{
background: #282A2D !important;
border-color: transparent !important;
color: #E5A00D
}
/* ///////////////////////// Homepage \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */

/* ///////////////////////// Login Page \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */
/* Background */
.table-cell.text-center {
background: var(--color-loginLayerOne);
}
/* Close Button */
button.close {
color: var(--color-loginTLayerTwo) !important;
text-shadow: 0 1px 0 grey;
}
/* Login Box Header */
.biggest-box {
background: var(--color-loginLayerTwo) !important;
}
/* Login Box Header Text */
h1.zero-m.text-uppercase {
color: var(--color-loginTLayerOne) !important;
}
/* Login Box */
div.big-box.text-left.login-form {
color: var(--color-loginTLayerTwo) !important;
background: var(--color-loginLayerThree);
}
/* Login Button */
button#loginSubmit {
background: var(--color-loginLayerTwo) !important;
}
/* Login Button Text */
button#loginSubmit text {
color: var(--color-loginTLayerOne) !important;
}
/* Forgot Password Button */
button#switchForgot {
background: var(--color-loginLayerFour) !important;
}
/* Forgot Password Button Text */
button#switchForgot text {
color: var(--color-loginTLayerThree) !important;
}
/* Remember Me Knob when selected */
input.switcher-success:checked + label:after {
background-color: var(--color-layerTwo);
}
/* Remember Me slider when selected */
input.switcher-success:checked + label:before {
background-color: var(--color-layerTwo);
}
/* Input text color */
.form-control.material {
color: var(--color-loginTLayerTwo) !important;
}
/* ///////////////////////// Login Page \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */

/* ///////////////////////// Chat Room \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */
/* Chat Page Background */
body#chat.scroller-body {
background-color: var(--color-chatLayerOne);
}
/* Chat Box Background */
.content-box.big-box.chat.gray-bg {
background: var(--color-chatLayerTwo) !important;
}
/* Received Messages */
.chat .chat-double > li.chat-inverted > .chat-panel {
background: var(--color-chatLayerThree) !important;
border-color: var(--color-chatLayerThree) !important;
}
/* Received Message Direction Indicator */
.chat .chat-double .chat-panel.red-bg:after {
border-right: 9px solid var(--color-chatLayerThree);
}
/* Sent Messages */
.chat .chat-double li .chat-panel {
background: var(--color-chatLayerFour) !important;
border-color: var(--color-chatLayerFour) !important;
}
/* Sent Message Direction Indicator */
.chat .chat-double .chat-panel.blue-bg:after {
border-left: 9px solid var(--color-chatLayerFour);
}
/* Message Username Text */
h4.pull-left.zero-m {
color: var(--color-chatTLayerTwo);
}
/* Message Date and Time Text */
p.pull-right {
color: var(--color-chatTLayerTwo);
}
/* Chat Message Text */
.chat-body {
color: var(--color-chatTLayerTwo);
}
/* Text Input Box */
input#message.form-control.gray-bg {
background: var(--color-chatLayerOne) !important;
border-color: var(--color-chatTLayerTwo);
}
/* Online Box Header */
.content-title.big-box.i-block.gray-bg {
background-color: var(--color-chatLayerTwo) !important;
color: var(--color-chatTLayerOne) !important;
}
/* Online Box Divider Line */
.col-lg-2 .content-box {
background: var(--color-chatLayerOne);
}
/* Online Users Box */
div#onlineusers.big-box {
color: var(--color-chatTLayerTwo);
background: var(--color-chatLayerTwo);
}
/* Online User Badge */
.badge-success {
background: var(--color-chatLayerFive);
}
/* ///////////////////////// Chat Room \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */

/* ///////////////////////// Settings Page \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */
/* Settings Page Background */
body.scroller-body {
background: var(--color-layerOne);
}
/* Settings Panel Background */
.profile-sidebar {
background: var(--color-extraLayerOne) !important;
}
/* Main Menu Text */
.profile-usermenu ul li a {
color: var(--color-extraLayerThree);
}
/* Settings Panel Hover */
.profile-usermenu ul li a:hover {
background: var(--color-extraLayerThree) !important;
color: var(--color-extraTLayerTwo) !important;
}
/* Settings Panel Active */
.profile-usermenu ul li.active a {
border-left: 3px solid var(--color-extraLayerFive) !important;
}
/* Settings Active Panel Header */
.email-active .email-header {
color: var(--color-extraLayerThree) !important;
background: var(--color-extraLayerOne) !important;
}
/* ///////////////////////// Settings Page \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */

/* ///////////////////////// Logout Page \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */
/* Background */
.members-sidebar-open {
background: var(--color-layerOne) !important;
}
/* Close Button */
i.fa.fa-remove.fa-lg.pull-right {
color: var(--color-extraLayerFive);
}
/* Username */
.profile-usertitle-name {
color: var(--color-extraLayerThree)!important;
}
/* User Class */
.profile-usertitle-job {
color: var(--color-extraLayerThree)!important;
}
/* Edit Info Button */
.profile-userbuttons .text-uppercase {
color: var(--color-extraLayerThree) !important;
background: var(--color-extraLayerFive) !important;
}
/* Logout Button */
button.logout.btn.btn-warning.waves.waves-effect.waves-float {
color: var(--color-loginLayerFour) !important;
background: var(--color-loginLayerTwo);
}
/* Update Button */
input.btn.btn-success.text-uppercase.waves-effect.waves-float {
color: var(--color-extraLayerThree) !important;
background: var(--color-extraLayerFive);
}
/* Go Back Button */
button#goBackButtons.btn.btn-primary.text-uppercase.waves.waves-effect.waves-float {
color: var(--color-extraLayerThree) !important;
background: var(--color-extraLayerFive);
}
/* Logout Page Text */
h3.zero-m.text-uppercase {
color: var(--color-loginTLayerTwo) !important;
}
a#logoutSubmit.i-block {
color: var(--color-loginTLayerTwo) !important;
}
a.i-block {
color: var(--color-loginTLayerTwo) !important;
}
/* ///////////////////////// Logout Page \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */

/* ///////////////////////// Miscellaneous \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */
/* Not Found Page Body Text */
h4.text-center{
color: var(--color-extraLayerThree) !important;
}
/* ///////////////////////// Miscellaneous \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Custom Module ///////////////////////// */

/* ///////////////////////// Clean \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Up ///////////////////////// */
/* Settings Active Panel Background */
div.email-inner.small-box {
background: var(--color-layerOne);
}
/* Settings Active Panel Form Text */
.form-inline .form-control {
color: var(--color-tLayerTwo);
}
/* Edit Tabs Panel Odd Rows */
#submitTabs ul > li {
background: var(--color-layerFour);
}
/* Edit Tabs Panel Odd Even */
.todo li:nth-child(even) {
background: var(--color-layerThree) !important;
}
/* Text */
body.scroller-body {
color: var(--color-tLayerTwo);
}
/* Edit Tabs Chevron Icon */
.form-inline .input-group .input-group-addon {
background: var(--color-layerTwo) !important;
}
.email-active {
background: var(--color-layerOne) !important;
}
.email-active .in > .row {
background: var(--color-layerThree);
padding-left: 20px;
}
.email-active .active.in {
background: var(--color-layerThree);
border-left: 2px solid;
border-right: 2px solid;
border-bottom: 2px solid;
}
.email-active .apps.active a {
background: var(--color-layerThree)!important;
border-color: var(--color-layerThree)!important;
}
.email-active .apps.active {
border-left: 2px solid !important;
border-top: 2px solid !important;
border-right: 2px solid !important;
border-color: var(--color-tLayerTwo);
}
.in.tab-pane h3 {
color: var(--color-extraLayerThree);
}
.colour-field.col-lg-6 {
background: var(--color-extraLayerOne) !important;
border-color: var(--color-tLayerTwo);
}
.colour-field.col-lg-4 {
background: var(--color-extraLayerFive !important;
border-color: var(--color-tLayerTwo);
}
.users-box .table-striped {
background: var(--color-layerThree);
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #676767 !important;
}
#datatable_length label {
color: var(--color-tLayerTwo);
} 
#datatable_length select {
color: var(--color-tLayerTwo);
background: var(--color-layerThree);
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc {
background-color: var(--color-layerThree) !important;
}
table.dataTable.stripe tbody tr.even, table.dataTable.display tbody tr.even, table.dataTable thead th.sorting {
background-color: var(--color-layerFour) !important;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: var(--color-layerFour) !important;
}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
background-color: var(--color-layerThree) !important;
}
#datatable_info {
color: var(--color-tLayerTwo);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: var(--color-layerThree);
padding: 6px 12px;
border-right: 1px solid var(--color-layerTwo);
color: var(--color-tLayerTwo) !important;
margin: 0;
}
#datatable_paginate .current {
color: var(--color-tLayerOne)!important;
background: var(--color-layerFour);
border: 1px solid var(--color-layerFour);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
color: var(--color-tLayerTwo) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:active, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--color-layerFour);
color: var(--color-tLayerTwo) !important;
border-color: var(--color-layerFour);
}
#datatable_paginate {
color: var(--color-tLayerTwo)!important;
background: var(--color-layerThree);
}
#loginStats > div > div > div#goodPercent.progress-bar.progress-bar-success {
background-color: #42b382!important;
}
ul#settings-list.nav > li.active a {
color: var(--color-tLayerOne)!important;
}
div.colour-field input {
border: 1px solid var(--color-tLayerOne);
}
#donate-org > div > div > div > div > div.container > h2 > strong > em.gray {
color: var(--color-tLayerTwo);
}
#donate-org > div > div > div > div.jumbotron > div.container > p.pull-right {
color: var(--color-tLayerTwo);
}
.note-editor .note-editing-area .note-editable {
background-color: #282A2D;
}
/*Settings input text color */
.input-sm {
color: var(--color-extraLayerThree);
}
/* ///////////////////////// Clean \\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ Up ///////////////////////// */

And here is the HTML code

<!-- /////////////////////// Three Button \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Custom Module /////////////////////// -->
<!-- /////////////////////// Button One \\\\\\\\\\\\\\\\\\\\\\\ -->
<div class="row">
<!-- **User Edit** Replace bLayerOne with the LOWERCASE name of the tab you wish this button to go to **User Edit** -->
<div tab="plex" class="hp-link col-sm-4 col-lg-4">
<div class="content-box green-bg" style="cursor: pointer;">
<!-- **Edit** Replace btLayerOne with the Text you wish to display on this button **User Edit** -->
<h1 style="margin: 10px" class="text-uppercase text-center">Plex</h1>
<div class="clearfix"></div>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Button One /////////////////////// -->
<!-- /////////////////////// Button Two \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- **User Edit** Replace bLayerTwo with the LOWERCASE name of the tab you wish this button to go to **User Edit** -->
<div tab="ombi" class="hp-link col-sm-4 col-lg-4">
<div class="content-box green-bg" style="cursor: pointer;">
<!-- **User Edit** Replace btLayerTwo with the Text you wish to display on this button **User Edit** -->
<h1 style="margin: 10px" class="text-uppercase text-center">Request Show/Movie</h1>
<div class="clearfix"></div>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Button Two /////////////////////// -->
<!-- /////////////////////// Button Three \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- **User Edit** Replace bLayerThree with the LOWERCASE name of the tab you wish this button to go to **User Edit** -->
<div tab="chat" class="hp-link col-sm-4 col-lg-4">
<div class="content-box green-bg" style="cursor: pointer;">
<!-- **User Edit** Replace btLayerThree with the Text you wish to display on this button **User Edit** -->
<h1 style="margin: 10px" class="text-uppercase text-center">Chat</h1>
<div class="clearfix"></div>
</div>
</div>
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Button Three /////////////////////// -->
</div>
<script>
$('.hp-link').click(function(e){
window.parent.$("li[name^='"+$(this).attr('tab')+"']").click();
e.preventDefault();
});
</script>
<!-- /////////////////////// Three Button \\\\\\\\\\\\\\\\\\\\\\\ -->
<!-- \\\\\\\\\\\\\\\\\\\\\\\ Custom Module /////////////////////// -->

Here is a link to the always updated Static.css in the repo: https://github.com/leram84/layer.Cake/blob/master/CSS/Static.css

 

The cake is not a lie! —Leram84

W.

Weyland

Share

%d bloggers like this: