├── README.md
├── custom_tab_buttons.html
├── netflix_theme.html
├── orgv2_base_theme.html
├── orgv2_base_theme_modalbox.html
├── plex_theme.html
├── plex_theme_buttons_v2.html
└── screen_shots
    ├── custom_tab_button.png
    ├── orgv2_base_theme.PNG
    ├── orgv2_base_theme_popup.PNG
    ├── orgv2_buttons_plextheme.png
    ├── orgv2_custom_button_netflix.png
    └── plex_theme.PNG


/README.md:
--------------------------------------------------------------------------------
 1 | # Org Custom Buttons
 2 | Custom buttons for your OrgV2 homepage
 3 | 
 4 | There are 3 separate sets of HTML so far. One is for the base OrgV2 theme and the other 2 are for the Plex theme.
 5 | This is based off of bootstrap for more responsive CSS work.
 6 | 
 7 | ## Setup:
 8 | 1. Go to the OrgV2 Settings Tab > Tab Editor > Homepage Items > CustomHTML-1 (or CustomHTML-2)
 9 | 2. Enable 
10 | 3. Paste the code inside the code tab
11 | 4. Save and Refresh the homepage.
12 | 5. PROFIT!!
13 | 
14 | OrgV2 Base Theme:
15 | ![OrgV2 Base Theme](/screen_shots/orgv2_base_theme.PNG)
16 | 
17 | Plex Theme:
18 | 
19 | ![Plex Theme](https://github.com/jigahertz/orgv2_custom_buttons/blob/master/screen_shots/plex_theme.PNG)
20 | 
21 | Plex Theme V2:
22 | ![Plex Theme V2](https://github.com/jigahertz/orgv2_custom_buttons/blob/master/screen_shots/orgv2_buttons_plextheme.png)
23 | 
24 | ![Plex Theme](/screen_shots/plex_theme.PNG)
25 | 
26 | Netflix Theme:
27 | 
28 | ![Netflix Theme](/screen_shots/orgv2_custom_button_netflix.png)
29 | 
30 | Custom Tab Button:
31 | 
32 | ![Custom Tab Button](/screen_shots/custom_tab_button.png)
33 | 
34 | OrgV2 Base Theme Modal Box:
35 | ![OrgV2 Base Theme](/screen_shots/orgv2_base_theme_popup.PNG)
36 | 
37 | Original Credits go to **jigahertz/orgv2_custom_buttons**
38 | 


--------------------------------------------------------------------------------
/custom_tab_buttons.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 | .cbutton {
 3 |     border-radius: 20px;
 4 |     border: 4px solid;
 5 |     border-color: #cc7b19;
 6 |     padding: 0px;
 7 |     width: auto;
 8 |     height: auto;
 9 |     background-color: #cc7b19;
10 |     position: relative;
11 |     text-align: center;
12 | }
13 | .cbutton:hover { opacity: .8; }
14 | .cbuttontitle  { color: #fff; }
15 | </style>
16 | <div class="row">
17 |     <div class="col-lg-2 col-sm-2"></div>
18 |     <div class="col-lg-4 col-sm-4 streamingButtonCustom">
19 |         <div class="panel cbutton"><a onclick="tabActions(event,'TAB-NAME',1);" href="#">
20 |             <div class="waves-effect waves-light btn cbuttontitle">CUSTOM BUTTON TEXT
21 |               <div class="pull-right">
22 |                 <!--<i class="ti-search"></i>-->
23 |               </div>
24 |             </div>
25 |         </div>
26 |         </a>
27 |     </div>
28 | 
29 |     <div class="col-lg-4 col-sm-4 searchButtonCustom">
30 |         <div class="panel cbutton"><a onclick="tabActions(event,'TAB-NAME',1);" href="#">
31 |             <div class="waves-effect waves-light btn cbuttontitle">CUSTOM BUTTON TEXT
32 |               <div class="pull-right">
33 |                 <!--<i class="ti-search"></i>-->
34 |               </div>
35 |             </div>
36 |         </div>
37 |         </a>
38 |     </div>
39 |     <div class="col-lg-2 col-sm-2"></div>
40 |     <!-- /.col-lg-4 -->
41 | </div>
42 | 


--------------------------------------------------------------------------------
/netflix_theme.html:
--------------------------------------------------------------------------------
 1 | <!--ORG BASE THEME CUSTOM BUTTONS -->
 2 | <style>
 3 | .cbutton {
 4 |     border-radius: 20px;
 5 |     border: 4px solid;
 6 |     border-color: #b9090b;
 7 |     padding: 0px;
 8 |     width: auto;
 9 |     height: auto;
10 |     background-color: #b9090b;
11 |     position: relative;
12 |     text-align: center;
13 | }
14 | .cbutton:hover { opacity: .8; }
15 | .cbuttontitle  { color: #fff; }
16 | </style>
17 | <div class="row">
18 |     <!-- SPEEDTEST BUTTON -->
19 |     <div class="col-lg-2 col-sm-2"></div>
20 |     <div class="col-lg-4 col-sm-4">
21 |         <div class="panel cbutton"><a href="#speedtest-area" data-effect="mfp-zoom-out" class="inline-popups">
22 |             <div class="waves-effect waves-light btn cbuttontitle">Test Streaming Speed
23 |               <div class="pull-right">
24 |                 <!--<i class="ti-exchange-vertical"></i>--> <!-- themify icon -->
25 |               </div>
26 |             </div>
27 |         </div>
28 |         </a>
29 |     </div>
30 |     <!-- REQUEST BUTTON -->
31 |     <div class="col-lg-4 col-sm-4">
32 |         <div class="panel cbutton"><a href="#new-request" data-effect="mfp-zoom-out" class="inline-popups">
33 |             <div class="waves-effect waves-light btn cbuttontitle">Search for Media
34 |               <div class="pull-right">
35 |                 <!--<i class="ti-search"></i>--> <!-- themify icon -->
36 |               </div>
37 |             </div>
38 |         </div>
39 |         </a>
40 |     </div>
41 |     <div class="col-lg-2 col-sm-2"></div>
42 |     <!-- /.col-lg-4 -->
43 | </div>
44 | 


--------------------------------------------------------------------------------
/orgv2_base_theme.html:
--------------------------------------------------------------------------------
 1 | <!--ORG BASE THEME CUSTOM BUTTONS -->
 2 | <style>
 3 | .cbutton {
 4 |     border-radius: 20px;
 5 |     border: 4px solid;
 6 |     border-color: #2cabe3;
 7 |     padding: 0px;
 8 |     width: auto;
 9 |     height: auto;
10 |     background-color: #2cabe3;
11 |     position: relative;
12 |     text-align: center;
13 | }
14 | .cbutton:hover { opacity: .8; }
15 | .cbuttontitle  { color: #fff; }
16 | </style>
17 | <div class="row">
18 |     <!-- SPEEDTEST BUTTON -->
19 |     <div class="col-lg-2 col-sm-2"></div>
20 |     <div class="col-lg-4 col-sm-4">
21 |         <div class="panel cbutton"><a href="#speedtest-area" data-effect="mfp-zoom-out" class="inline-popups">
22 |             <div class="waves-effect waves-light btn cbuttontitle">Test Streaming Speed
23 |               <div class="pull-right">
24 |                 <!--<i class="ti-exchange-vertical"></i>--> <!-- themify icon -->
25 |               </div>
26 |             </div>
27 |         </div>
28 |         </a>
29 |     </div>
30 |     <!-- REQUEST BUTTON -->
31 |     <div class="col-lg-4 col-sm-4">
32 |         <div class="panel cbutton"><a href="#new-request" data-effect="mfp-zoom-out" class="inline-popups">
33 |             <div class="waves-effect waves-light btn cbuttontitle">Search for Media
34 |               <div class="pull-right">
35 |                 <!--<i class="ti-search"></i>--> <!-- themify icon -->
36 |               </div>
37 |             </div>
38 |         </div>
39 |         </a>
40 |     </div>
41 |     <div class="col-lg-2 col-sm-2"></div>
42 |     <!-- /.col-lg-4 -->
43 | </div>
44 | 


--------------------------------------------------------------------------------
/orgv2_base_theme_modalbox.html:
--------------------------------------------------------------------------------
 1 | <!--ORG BASE THEME CUSTOM BUTTONS -->
 2 | <style>
 3 | .cbutton {
 4 |     border-radius: 3px;
 5 |     border: 4px solid;
 6 |     border-color: #2cabe3;
 7 |     padding: 0px;
 8 |     width: auto;
 9 |     height: auto;
10 |     background-color: #2cabe3;
11 |     position: relative;
12 |     text-align: center;
13 |     margin: 0px;
14 | }
15 | .panel-body ol>li {
16 |     margin-bottom: 5px;
17 | }
18 | .cbutton:hover { opacity: .8; }
19 | .cbuttontitle  { color: #fff; }
20 | </style>
21 | <div class="row">
22 | 	<div class="col-lg-2 col-sm-2">
23 | 		<a href="#CUSTOM_MODAL" data-effect="mfp-zoom-out" class="inline-popups">
24 | 			<div class="panel cbutton">
25 | 				<div class="waves-effect waves-light btn cbuttontitle">Watch Plex In Sync With Another</div>
26 | 			</div>
27 | 		</a>
28 | 		<div id="CUSTOM_MODAL" class="white-popup mfp-with-anim mfp-hide">
29 | 			<div class="col-md-4 col-md-offset-4">
30 | 				<div class="panel bg-org panel-info">
31 | 					<div class="panel-heading">TITLE</div>
32 | 					<div class="panel-body">CONTENT</div>
33 | 					<div class="panel-footer">FOOTER</div>
34 | 				</div>
35 | 			</div>
36 | 		</div>
37 | 	</div>
38 | </div>
39 | 


--------------------------------------------------------------------------------
/plex_theme.html:
--------------------------------------------------------------------------------
 1 | <!--PLEX THEME CUSTOM BUTTONS -->
 2 | <style>
 3 | .cbutton {
 4 |     border-radius: 20px;
 5 |     border: 4px solid;
 6 |     border-color: #cc7b19;
 7 |     padding: 0px;
 8 |     width: auto;
 9 |     height: auto;
10 |     background-color: #cc7b19;
11 |     position: relative;
12 |     text-align: center;
13 | }
14 | .cbutton:hover { opacity: .8; }
15 | .cbuttontitle  { color: #eee; }
16 | </style>
17 | <div class="row">
18 |     <!-- SPEEDTEST BUTTON -->
19 |     <div class="col-lg-2 col-sm-2"></div>
20 |     <div class="col-lg-4 col-sm-4">
21 |         <a href="#speedtest-area" data-effect="mfp-zoom-out" class="inline-popups"><div class="panel cbutton">
22 |             <div class="waves-effect waves-light btn cbuttontitle">Test Streaming Speed
23 |               <div class="pull-right">
24 |                 <!--<i class="ti-exchange-vertical"></i>--> <!-- themify icon -->
25 |               </div>
26 |             </div>
27 |         </div>
28 |         </a>
29 |     </div>
30 |     <!-- REQUEST BUTTON -->
31 |     <div class="col-lg-4 col-sm-4">
32 |         <a href="#new-request" data-effect="mfp-zoom-out" class="inline-popups"><div class="panel cbutton">
33 |             <div class="waves-effect waves-light btn cbuttontitle">Search for Media
34 |               <div class="pull-right">
35 |                 <!--<i class="ti-search"></i>--> <!-- themify icon -->
36 |               </div>
37 |             </div>
38 |         </div>
39 |         </a>
40 |     </div>
41 |     <div class="col-lg-2 col-sm-2"></div>
42 |     <!-- /.col-lg-4 -->
43 | </div>
44 | 


--------------------------------------------------------------------------------
/plex_theme_buttons_v2.html:
--------------------------------------------------------------------------------
 1 | <center><a class="btn inline-popups speedTestModal" href="#speedtest-area" data-effect="mfp-zoom-out" style="border-radius: 4px;padding: 10px;width: 195px;height: 42px;background-color: rgb(26,26,26,.3); margin: 14px;">
 2 |         <div id="rborder">
 3 |             <span><center><font color="#eee"><b>Test Streaming Speed</b></font></center></span>
 4 |                 </div></a>
 5 | 		    	<div id="speedtest-area" class="white-popup mfp-with-anim mfp-hide">
 6 | 		    		<div class="col-md-6 col-md-offset-6">
 7 | 						<div class="panel bg-org panel-info">
 8 | 							<div class="panel-heading">
 9 | 								<span lang="en">Test Speed to Plex Server</span>
10 | 								<button id="startStopBtn" onclick="startStop()" class="btn btn-info waves-effect waves-light pull-right"><span lang="en" id="speedTestButtonText">Start</span> <i class="fa fa-rocket m-l-5"></i></button>
11 | 							</div>
12 | 							<div class="panel-body">
13 | 								<div id="test">
14 | 									<div class="row hidden-xs">
15 | 										<div class="col-md-6 col-xs-6"><div id="downloadPercent" data-label="0Mbps" style="font-size: 15px;"></div></div>
16 | 										<div class="col-md-6 col-xs-6"><div id="uploadPercent" data-label="0Mbps" style="font-size: 15px;"></div></div>
17 | 									</div>
18 | 									<div class="progress progress-sm">
19 | 										<div id="progress" class="progress-bar progress-bar-info active progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
20 | 											<span class="sr-only">0% Complete (success)</span>
21 | 										</div>
22 | 									</div>
23 | 				                    <div class="white-box m-b-0">
24 | 				                        <div class="user-btm-box">
25 | 				                            <div class="col-md-3 col-xs-6 p-l-0 p-r-0 text-center">
26 | 				                                <p class="text-success"><i class="ti-download fa-2x"></i></p>
27 | 				                                <h1 id="dlText"></h1>
28 | 												<h4 class="">Mbps</h4>
29 | 											</div>
30 | 				                            <div class="col-md-3 col-xs-6 p-l-0 p-r-0 text-center">
31 | 				                                <p class="text-warning"><i class="ti-upload fa-2x"></i></p>
32 | 				                                <h1 id="ulText"></h1>
33 | 												<h4 class="">Mbps</h4>
34 | 											</div>
35 | 				                            <div class="col-md-3 col-xs-6 p-l-0 p-r-0 text-center">
36 | 				                                <p class="text-purple"><i class="ti-direction-alt fa-2x"></i></p>
37 | 				                                <h1 id="pingText"></h1>
38 | 												<h4 class="">ms</h4>
39 | 											</div>
40 | 				                            <div class="col-md-3 col-xs-6 p-l-0 p-r-0 text-center">
41 | 				                                <p class="text-info"><i class="ti-pulse fa-2x"></i></p>
42 | 				                                <h1 id="jitText"></h1>
43 | 												<h4 class="">ms</h4>
44 | 											</div>
45 | 				                        </div>
46 | 				                    </div>
47 | 								</div>
48 | 								<script type="text/javascript">initUI();</script>
49 | 							</div>
50 | 							<div class="panel-footer"> IP Address: <span id="ip"></span> </div>
51 | 						</div>
52 | 		    		</div>
53 | 		    	</div>
54 | <a href="#new-request" class="btn inline-popups speedTestModal" data-effect="mfp-zoom-out" style="border-radius: 4px;padding: 10px;width: 195px;height: 42px;background-color: rgb(26, 26, 26, .3); margin: 14px;">
55 |         <div id="sborder">
56 |             <span><center><font color="#eee"><b>Request Content</b></font></center></span>
57 |                 </div>
58 |         </a>
59 | </center>
60 | <br>
61 | 


--------------------------------------------------------------------------------
/screen_shots/custom_tab_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Organizr/orgv2_custom_buttons/39b7f052116583714ec3987d8beedd47911db2d6/screen_shots/custom_tab_button.png


--------------------------------------------------------------------------------
/screen_shots/orgv2_base_theme.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Organizr/orgv2_custom_buttons/39b7f052116583714ec3987d8beedd47911db2d6/screen_shots/orgv2_base_theme.PNG


--------------------------------------------------------------------------------
/screen_shots/orgv2_base_theme_popup.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Organizr/orgv2_custom_buttons/39b7f052116583714ec3987d8beedd47911db2d6/screen_shots/orgv2_base_theme_popup.PNG


--------------------------------------------------------------------------------
/screen_shots/orgv2_buttons_plextheme.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Organizr/orgv2_custom_buttons/39b7f052116583714ec3987d8beedd47911db2d6/screen_shots/orgv2_buttons_plextheme.png


--------------------------------------------------------------------------------
/screen_shots/orgv2_custom_button_netflix.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Organizr/orgv2_custom_buttons/39b7f052116583714ec3987d8beedd47911db2d6/screen_shots/orgv2_custom_button_netflix.png


--------------------------------------------------------------------------------
/screen_shots/plex_theme.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Organizr/orgv2_custom_buttons/39b7f052116583714ec3987d8beedd47911db2d6/screen_shots/plex_theme.PNG


--------------------------------------------------------------------------------