574 lines
33 KiB
HTML
574 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<title>Mabox Colorizer</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./css/w3.css">
|
|
<style>
|
|
body{
|
|
background-color:#222222;
|
|
color: #999999;
|
|
}
|
|
div.fixed {
|
|
position: fixed;
|
|
top: 4px;
|
|
right: 0;
|
|
width: 400px;
|
|
}
|
|
div.fixeddown {
|
|
position: fixed;
|
|
bottom:0;
|
|
left:0;
|
|
width:160px;
|
|
}
|
|
div.fixed .w3-bar-item {margin-right:4px; border-radius:4px;}
|
|
.w3-third {padding: 0.01em 4px;}
|
|
.w3-button {position:relative;}
|
|
.w3-button .w3-right {position:absolute; top:0; right:6px;}
|
|
section.tab {padding-top: 3em;}
|
|
section#Colorizer {padding-top: 0.01em;}
|
|
div.fixeddown p {margin:2px 0;}
|
|
div.fixeddown a {text-decoration:none;margin:0 2px;}
|
|
.link {cursor:pointer;}
|
|
.w3-bar-block .w3-btn {width: 100px;text-align:center;}
|
|
.w3-bar-block .w3-btn:hover {background-color:white;color:gray;}
|
|
.w3-dropdown-content {min-width: 20px;}
|
|
a.w3-tag {color: transparent; border:1px solid #666666; margin-bottom:4px;}
|
|
a.w3-tag:hover {color: transparent; border:1px solid #EEEEEE;margin-bottom:4px;}
|
|
p a.w3-tag {text-decoration:none; border:none;}
|
|
p a.w3-tag:hover {text-decoration:none; border:none;}
|
|
kbd {
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
border: 1px solid #b4b4b4;
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
|
|
color: #333;
|
|
display: inline-block;
|
|
font-size: 0.85em;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
padding: 2px 4px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div class="w3-sidebar w3-bar-block w3-dark-grey w3-card" style="width:160px">
|
|
<div class="w3-center w3-margin"><img src="./img/colorizer.png" class="link" title="Colorizer" onclick="openTab(event, 'Colorizer')"></div>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Colorizer')">Colorizer</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Openbox')">Openbox Theme</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Jgmenu')">Menu/Sidepanels</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Conky')">Conky</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Wall2theme')">Wallpaper themes</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Tint2')">Tint2 Panel</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Terminal')">Terminal theme</button>
|
|
<button class="w3-bar-item w3-button w3-small tablink" onclick="openTab(event, 'Save')">Save and Restore</button>
|
|
<a class="w3-button w3-round w3-tiny w3-lime w3-margin" href="run://colorizer -s"> Colorizer Menu</a>
|
|
<div class="fixeddown">
|
|
<p class="w3-center w3-black">
|
|
<a href="https://maboxlinux.org" class="w3-tooltip"><span class="w3-text w3-tag w3-small w3-round" style="position:absolute;left:-10px;bottom:22px">Mabox Website</span></a>
|
|
<a href="https://forum.maboxlinux.org" class="w3-tooltip"><span class="w3-text w3-tag w3-small w3-round" style="position:absolute;left:-10px;bottom:22px">Community Forum</span></a>
|
|
<a href="https://manual.maboxlinux.org/en" class="w3-tooltip"><span class="w3-text w3-tag w3-small w3-round" style="position:absolute;left:-10px;bottom:22px">Manual</span></a>
|
|
<a href="https://ko-fi.com/maboxlinux" class="w3-tooltip"><span style="color:red"></span><span class="w3-text w3-tag w3-small w3-round" style="position:absolute;left:-10px;bottom:22px">Donate</span></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-left:160px;" class="w3-small">
|
|
|
|
<section id="Colorizer" class="w3-container tab" style="min-height:100vh;">
|
|
|
|
<div class="w3-display-container" style="min-height:90vh">
|
|
<img src="/usr/share/mabox-colorizer/img/colorizer.png" class="w3-margin-top w3-right"/>
|
|
<br/>
|
|
<h2 class="w3-center">Mabox Colorizer <span class="w3-tiny">beta</span></h2>
|
|
<p class="w3-center">a set of tools to easily customize<br/>your Mabox Linux Desktop</p>
|
|
<br/>
|
|
<p>Easily change look and feel of:
|
|
<ul>
|
|
<li><strong><span class="w3-tag w3-round w3-tiny w3-green link" onclick="openTab(event, 'Openbox')">Openbox theme</span></strong> (window decorations)</li>
|
|
<li><strong><span class="w3-tag w3-round w3-tiny w3-green link" onclick="openTab(event, 'Jgmenu')">Menu/Sidepanels</span></strong> and other <i>jgmenu-based</i> <strong>Mabox tools</strong></li>
|
|
<li><strong><span class="w3-tag w3-round w3-tiny w3-green link" onclick="openTab(event, 'Conky')">Conkies</span></strong></li>
|
|
<!--<li><strong>PyRadio</strong> - Internet Radio Player</li>//-->
|
|
</ul></p>
|
|
<!--<strong><span class="w3-tag w3-round w3-tiny w3-green link" onclick="openTab(event, 'Wall2theme')">Automatically generate themes</span></strong> for all above <strong>from Wallpaper colors</strong>//-->
|
|
<br/>
|
|
<p class="w3-center"> <strong>Randomizer</strong> - set color themes quickly and securely <span class="w3-tag w3-round w3-red">New!</span></p>
|
|
<div class="w3-row w3-margin-top">
|
|
<div class="w3-half w3-container">
|
|
<div class="w3-card w3-round w3-padding w3-deep-purple"><span class="w3-right w3-xxlarge"></span><p><em>Quickly <strong>randomize</strong> <br />colorschemes for...</em></p>
|
|
<div class="w3-bar-block w3-grey"><a class="w3-button w3-bar-item w3-tiny" href="run://randomizer ob">Openbox theme</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://randomizer menu show">Menu / Sidepanels</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://randomizer conky">Conkies</a>
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-yellow" href="run://randomizer all show">All above</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-half w3-container">
|
|
<div class="w3-card w3-round w3-padding w3-grey"><span class="w3-right w3-xxlarge"></span><p><em><strong>Reset</strong> to defaults...<br />(restore fresh install settings)</em></p>
|
|
<div class="w3-bar-block w3-dark-grey"><a class="w3-button w3-bar-item w3-tiny" href="run://obtctl resetMBcolors">Openbox theme</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://jgctl resetMBcolors show">Menu / Sidepanels</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://conkyctl resetcolorsall">Conkies</a>
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-yellow" href="run://randomizer resetall show">All above</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<p>Colorizer offers two modes of operation: basic and advanced.
|
|
<ul>
|
|
<li><strong>basic</strong> - you use this window - easy and fast</li>
|
|
<li><strong>advanced</strong> - using dynamically generated menus - more customization possibilities, unlimited choice of colors</li>
|
|
</ul>
|
|
</p>
|
|
<br />
|
|
<br />
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<section id="Openbox" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed">
|
|
<div class="w3-bar">
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://colorizer-ob -s"> OBtheme menu</a>
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://obtctl resetMBcolors"> Reset</a>
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://randomizer ob"> Colorize </a>
|
|
</div>
|
|
</div>
|
|
<h2>Openbox theme</h2>
|
|
<p>The Openbox module allows you to easily customize the appearance of window decorations.</p>
|
|
<p>It works only with special theme - <strong>MBcolors</strong> <a class="w3-tag w3-round w3-green w3-tiny" href="run://obtctl theme MBcolors">switch to</a> <a class="w3-tag w3-round w3-green w3-tiny" href="run://obtctl resetMBcolors">Reset MBcolors</a></p>
|
|
|
|
<p>You can change most of basic settings directly from this help screen.</p>
|
|
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<div class="w3-dropdown-hover">
|
|
<button class="w3-button w3-small w3-border-right"> Window Border</button>
|
|
<div class="w3-dropdown-content w3-bar-block w3-border w3-dark-grey w3-card">
|
|
<a class="w3-bar-item w3-btn" href="run://obtctl borderWidth 0">0</a>
|
|
<a class="w3-bar-item w3-btn" href="run://obtctl borderWidth 1">1</a>
|
|
<a class="w3-bar-item w3-btn" href="run://obtctl borderWidth 2">2</a>
|
|
<a class="w3-bar-item w3-btn" href="run://obtctl borderWidth 3">3</a>
|
|
<a class="w3-bar-item w3-btn" href="run://obtctl borderWidth 4">4</a>
|
|
<a class="w3-bar-item w3-btn" href="run://obtctl borderWidth 8">8</a>
|
|
</div>
|
|
</div>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://obtctl borderWidth increase">+</a>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray" href="run://obtctl borderWidth decrease">-</a>
|
|
</div>
|
|
</div>
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<div class="w3-dropdown-hover">
|
|
<button class="w3-button w3-small w3-border-right"> Title Padding</button>
|
|
<div class="w3-dropdown-content w3-bar-block w3-border w3-dark-grey w3-card">
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 0">0</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 1">1</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 2">2</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 3">3</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 4">4</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 6">6</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 8">8</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 10">10</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 12">12</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 16">16</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl paddingHeight 20">20</a>
|
|
</div>
|
|
</div>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://obtctl paddingHeight increase">+</a>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray" href="run://obtctl paddingHeight decrease">-</a>
|
|
</div>
|
|
</div>
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<div class="w3-dropdown-hover">
|
|
<button class="w3-button w3-small w3-border-right">Title bar style</button>
|
|
<div class="w3-dropdown-content w3-bar-block w3-border w3-dark-grey w3-card">
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl raised 1">raised</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl raised 0">flat</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl raised 2">sunken</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<div class="w3-dropdown-hover">
|
|
<button class="w3-button w3-small w3-border-right">Buttons</button>
|
|
<div class="w3-dropdown-content w3-bar-block w3-border w3-dark-grey w3-card">
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl buttons tiny"><img src="./img/tiny.png">tiny</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl buttons normal"><img src="./img/normal.png">normal</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl buttons bold"><img src="./img/bold.png">bold</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl buttons dots"><img src="./img/dots.png">dots</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-large w3-panel w3-display-container">Window title
|
|
<div class="w3-display-topright w3-medium"><span class="w3-tiny">font color:</span>
|
|
<a class="w3-tag " style="background-color:#FFFFFF" href="run://obtctl activetextcolor #FFFFFF"> </a>
|
|
<a class="w3-tag " style="background-color:#BBBBBB" href="run://obtctl activetextcolor #BBBBBB"> </a>
|
|
<a class="w3-tag " style="background-color:#60a917" href="run://obtctl activetextcolor #60a917"> </a>
|
|
<a class="w3-tag " style="background-color:#a20025" href="run://obtctl activetextcolor #a20025"> </a>
|
|
<a class="w3-tag " style="background-color:#e3c800" href="run://obtctl activetextcolor #e3c800"> </a>
|
|
<a class="w3-tag " style="background-color:#222222" href="run://obtctl activetextcolor #333333"> </a>
|
|
<a class="w3-tag " style="background-color:#000000" href="run://obtctl activetextcolor #000000"> </a>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- FONT FAMILY AND SIZE //-->
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://mb-setfont obtitle">font family</a>
|
|
<div class="w3-dropdown-hover">
|
|
<button class="w3-button w3-small w3-border-right">size</button>
|
|
<div class="w3-dropdown-content w3-bar-block w3-border w3-dark-grey w3-card">
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 8">8</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 9">9</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 10">10</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 11">11</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 12">12</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 13">13</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 14">14</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 15">15</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl fontsize 16">16</a>
|
|
</div>
|
|
</div>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://obtctl fontsize increase">+</a>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray" href="run://obtctl fontsize decrease">-</a>
|
|
</div>
|
|
</div>
|
|
<!-- WEIGHT AND SLANT: BOLD ITALIC //-->
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://obtctl fontweighttoggle"></a>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray" href="run://obtctl fontslanttoggle"></a>
|
|
</div>
|
|
</div>
|
|
<!-- TEXT JUSTIFY //-->
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round w3-dark-grey">
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://obtctl textjustify left"></a>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray w3-border-right" href="run://obtctl textjustify center"></a>
|
|
<a class="w3-bar-item w3-btn w3-hover-gray" href="run://obtctl textjustify right"></a>
|
|
</div>
|
|
</div>
|
|
<!-- SHADOW EFFECT //-->
|
|
<div class="w3-show-inline-block">
|
|
<div class="w3-bar w3-border w3-round">
|
|
<div class="w3-dropdown-hover w3-dark-grey">
|
|
<button class="w3-button w3-small">shadow</button>
|
|
<div class="w3-dropdown-content w3-bar-block w3-border w3-dark-grey w3-card">
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl shadow 0">no shadow</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl shadow 1">dark</a>
|
|
<a class="w3-bar-item w3-btn w3-tiny" href="run://obtctl shadow 2">light</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-row w3-margin-top">
|
|
<div class="w3-col m5 w3-black w3-round">
|
|
<h5 class="w3-center">Title bar color</h5>
|
|
<p class="w3-center">for active window</p>
|
|
<div class="w3-center w3-padding">
|
|
<a class="w3-tag w3-large" style="background-color:#DDDDDD" href="run://obtctl clractivebg #DDDDDD"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#a4c400" href="run://obtctl clractivebg #a4c400"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#60a917" href="run://obtctl clractivebg #60a917"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#008a00" href="run://obtctl clractivebg #008a00"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#00aba9" href="run://obtctl clractivebg #00aba9"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#1ba1e2" href="run://obtctl clractivebg #1ba1e2"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#3e65ff" href="run://obtctl clractivebg #3e65ff"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#0050ef" href="run://obtctl clractivebg #0050ef"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#6a00ff" href="run://obtctl clractivebg #6a00ff"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#aa00ff" href="run://obtctl clractivebg #aa00ff"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#f472d0" href="run://obtctl clractivebg #f472d0"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#d80073" href="run://obtctl clractivebg #d80073"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#a20025" href="run://obtctl clractivebg #a20025"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#e51400" href="run://obtctl clractivebg #e51400"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#fa6800" href="run://obtctl clractivebg #fa6800"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#f0a30a" href="run://obtctl clractivebg #f0a30a"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#e3c800" href="run://obtctl clractivebg #e3c800"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#825a2c" href="run://obtctl clractivebg #825a2c"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#6d8764" href="run://obtctl clractivebg #6d8764"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#647687" href="run://obtctl clractivebg #647687"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#76608a" href="run://obtctl clractivebg #76608a"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#87794e" href="run://obtctl clractivebg #87794e"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#a0522d" href="run://obtctl clractivebg #a0522d"> </a>
|
|
<a class="w3-tag w3-large" style="background-color:#222222" href="run://obtctl clractivebg #222222"> </a>
|
|
</div>
|
|
<p class="w3-padding"><em>Note!</em><br />
|
|
Changing the background color will also set:<br />
|
|
- border color to the same color<br />
|
|
- BGCOLOR_TO color for a subtle gradient
|
|
</p>
|
|
</div>
|
|
<div class="w3-col m1"> </div>
|
|
<div class="w3-col w3-black m6 w3-round">
|
|
<h5 class="w3-center">Gradient type</h5>
|
|
<p class="w3-center">
|
|
<a href="run://obtctl gradient_type solid"><img src="./img/solid.png"></a>
|
|
<a href="run://obtctl gradient_type vertical"><img src="./img/vertical.png"></a>
|
|
<a href="run://obtctl gradient_type horizontal"><img src="./img/horizontal.png"></a>
|
|
<a href="run://obtctl gradient_type mirrorhorizontal"><img src="./img/mirrorhorizontal.png"></a>
|
|
<a href="run://obtctl gradient_type splitvertical"><img src="./img/splitvertical.png"></a>
|
|
<a href="run://obtctl gradient_type diagonal"><img src="./img/diagonal.png"></a>
|
|
<a href="run://obtctl gradient_type crossdiagonal"><img src="./img/crossdiagonal.png"></a>
|
|
<a href="run://obtctl gradient_type pyramid"><img src="./img/pyramid.png"></a>
|
|
</p>
|
|
<p class="w3-padding">More than 300 beautifull pre-defined gradients are available from Colorizer OBtheme menu.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p></p>
|
|
<p>For much more options, fine-tunning and colors choices launch <a class="w3-tag w3-round w3-green w3-small w3-hover-yellow" href="run://colorizer-ob -s"> OBtheme menu</a></p>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<section id="Jgmenu" class="w3-container tab" style="display:none;min-height:100vh">
|
|
<div class="fixed">
|
|
<div class="w3-bar">
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://colorizer-menus -s"> Menu module</a>
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://jgctl resetMBcolors show"> Reset</a>
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://randomizer menu show"> Colorize </a>
|
|
</div>
|
|
</div>
|
|
<h2>Menu / Sidepanels</h2>
|
|
<p>Menu / Sidepanels module ...</p>
|
|
</section>
|
|
|
|
|
|
<section id="Conky" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed">
|
|
<div class="w3-bar">
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://colorizer-conky -s"> Conky menu</a>
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://conkyctl resetcolorsall"> Reset</a>
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://randomizer conky"> Colorize </a>
|
|
</div>
|
|
</div>
|
|
<h2>Conky</h2>
|
|
<p>Mabox provides several Conky configurations. Use <a class="w3-tag w3-round w3-small w3-grey w3-hover-amber" href="run://colorizer-conky -s"> Conky menu</a> to test and select which ones to run.</p>
|
|
<p>Conky in Mabox have been equipped with additional powers...</p>
|
|
<p>Click <strong>right mouse button</strong> on any Conky and you'll see a <strong>context menu</strong>. It allows you to conveniently:
|
|
<ul>
|
|
<li>set position on the screen</li>
|
|
<li>manually change the background color or make it transparent</li>
|
|
<li>set text colors, borders, shadow or outline effects</li>
|
|
<li>apply one of the ready-made color themes for the selected Conky - or for all </li>
|
|
<li>disable (kill), reload or edit Conky</li>
|
|
</ul>
|
|
You can add <strong>your own commands</strong> to each Conky, which will be shown on <strong>left mouse click</strong> <em>(check the logo)</em>.
|
|
</p>
|
|
<p>Syntax for adding commands is very simple, see blog post: <a href="https://blog.maboxlinux.org/how-to-add-custom-commands-to-menu-and-sidepanels/">How to add custom commands to Menu and SidePanels</a></p>
|
|
<h5>Tips</h5>
|
|
|
|
<div class="w3-panel w3-dark-grey w3-rightbar w3-border-black w3-border">
|
|
<p><kbd>Super</kbd> + <kbd>C</kbd> - <strong>toggle Conky</strong> - start/stop Conky session</p>
|
|
</div>
|
|
<div class="w3-panel w3-dark-grey w3-leftbar w3-border-black w3-border">
|
|
<p><strong>Quickly place Conky on screen</strong></p>
|
|
<p>To quickly arrange Conky to your liking, hold down the <kbd>Ctrl</kbd> key and click any Conky. You can now drag Conky anywhere on your desktop.</p>
|
|
</div>
|
|
|
|
</section>
|
|
<section id="Wall2theme" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed">
|
|
<div class="w3-bar">
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="run://colorizer -s"> Colorizer Menu</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Generating themes from wallpaper</h2>
|
|
|
|
|
|
<div class="w3-row w3-margin-top">
|
|
<div class="w3-twothird">
|
|
<p>Colorizer generates a color palette based on the currently set wallpaper</p>
|
|
<p>Based on such a color palette, it is possible to use two versions of themes (dark and light) for:
|
|
<ul>
|
|
<li>OpenBox window decoration</li>
|
|
<li>Menus, Panels</li>
|
|
<li>Conky</li>
|
|
<li>PyRadio</li>
|
|
</ul>
|
|
</p>
|
|
<p>Try how it works...</p>
|
|
</div>
|
|
|
|
<div class="w3-third">
|
|
<div class="w3-card w3-round w3-padding w3-deep-purple"><span class="w3-right w3-xxlarge"></span>
|
|
<p><br /><strong>Set Wallpaper</strong></p>
|
|
<div class="w3-bar-block w3-grey">
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://pcmanfm -n /usr/share/backgrounds ~/wallpapers">Select</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://nitrogen --random /usr/share/backgrounds --set-scaled --save">Random System Wallpaper</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://nitrogen --random wallpapers --set-scaled --save">Random User Wallpaper</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-row">
|
|
<div class="w3-third">
|
|
<div class="w3-card w3-round w3-padding w3-dark-grey"><span class="w3-right w3-xxlarge"> </span>
|
|
<p><br /><strong>Window decorations</strong></p>
|
|
<div class="w3-bar-block w3-grey">
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme ob dark">Dark</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme ob light">Light</a>
|
|
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-green" href="run://colorizer-ob -s"><span class="w3-right w3-large"> </span> Customize</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-red" href="run://obtctl resetonlycolors"><span class="w3-right w3-large"></span >Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-third">
|
|
<div class="w3-card w3-round w3-padding w3-blue-gray"><span class="w3-right w3-xxlarge"></span>
|
|
<p><br /><strong>Menu, Panels</strong></p>
|
|
<div class="w3-bar-block w3-grey">
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme menu dark show">Dark</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme menu light show">Light</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-green" href="run://colorizer-menus -s"><span class="w3-right w3-large"> </span> Customize</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-red" href="run://jgctl resetMBcolors show"><span class="w3-right w3-large"></span>Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-third">
|
|
<div class="w3-card w3-round w3-padding w3-amber"><span class="w3-right w3-xxlarge"></span>
|
|
<p><br/><strong>Conky</strong></p>
|
|
<div class="w3-bar-block w3-grey">
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme conky dark">Dark</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme conky light">Light</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-green" href="run://colorizer-conky -s"><span class="w3-right w3-large"> </span> Customize</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-red" href="run://conkyctl resetcolorsall"><span class="w3-right w3-large"></span >Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w3-row w3-margin-top">
|
|
<div class="w3-twothird">
|
|
<br /><br />
|
|
<p>When playing with Colorizer for a long time, music can be a good companion</p>
|
|
<p>You can turn on <strong>PyRadio</strong> <kbd>super</kbd>+<kbd>r</kbd> and listen to nice music.<br /><em>Chillout?</em></p>
|
|
</div>
|
|
|
|
<div class="w3-third">
|
|
<div class="w3-card w3-round w3-padding w3-teal"><span class="w3-right w3-xxlarge"></span>
|
|
<p><br /><strong>PyRadio</strong></p>
|
|
<div class="w3-bar-block w3-grey">
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme pyradio dark">Dark</a>
|
|
<a class="w3-button w3-bar-item w3-tiny" href="run://w2theme pyradio light">Bright</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-green" href="run://colorizer-pyradio -s"><span class="w3-right w3-large"> </span> Customize</a>
|
|
</div>
|
|
<div class="w3-bar-block w3-grey" style="margin-top:1px;">
|
|
<a class="w3-button w3-bar-item w3-tiny w3-hover-red" href="run://prtctl resettheme"><span class="w3-right w3-large"></span >Reset</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
<h4>Automatic generation of themes after changing wallpaper</h4>
|
|
<p><em>(Experimental)</em></p>
|
|
<p>You can set the theme to auto-generate when you change wallpaper.<br /> Use <a class="w3-tag w3-round w3-green w3-small w3-hover-yellow" href="run://colorizer -s"> Colorizer -> Settings</a> or <a class="w3-tag w3-round w3-green w3-small w3-hover-yellow" href="config://.config/colorizer/colorizer.conf"> edit configuration file</a> to configure this feature.</p>
|
|
<br /><br />
|
|
|
|
</section>
|
|
<section id="Terminal" class="w3-container tab" style="display:none;min-height:100vh">
|
|
<div class="fixed">
|
|
<div class="w3-bar">
|
|
<a class="w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href="termo://theme.sh -i2"> Terminal theme selector</a>
|
|
</div>
|
|
</div>
|
|
<h2>Terminal theme</h2>
|
|
<p>Mabox comes with many terminal themes available (~400)</p>
|
|
<p>The interactive selector will help you find a suitable theme <br />( <kbd>Enter</kbd>/<kbd>Esc</kbd> - use selected theme, <kbd>Ctrl</kbd>+<kbd>c</kbd> - cancel)</p>
|
|
<p>You can run terminal theme selector any time from cli by <strong>th</strong> alias</p>
|
|
<br /><br />
|
|
<h5>Different colors for root and SSH sessions</h5>
|
|
<img src="img/theme.sh.webp" />
|
|
<p>To change theme for <strong>ssh</strong> and <strong>root sessions</strong> edit <tt>~/.bashrc</tt></p>
|
|
</section>
|
|
|
|
<section id="Tint2" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<h2>Tint2 panel</h2>
|
|
<p>Colorizer module for Tint2 panel is not available yet - but planned</p>
|
|
<p>Use quite powerfull Tint2 config menu for now.</p>
|
|
<p><a class="w3-button w3-inline w3-round w3-small w3-lime w3-hover-yellow " href="run://jgtint2-pipe -s"> Tint2 configuration menu</a></p>
|
|
|
|
<p><a class="w3-button w3-inline w3-round w3-small w3-lime w3-hover-yellow" href="run://jgtint2launcher -s"> Add/Remove Launchers to panel</a></p>
|
|
</section>
|
|
|
|
<section id="Save" class="w3-container tab" style="display:none;min-height:100vh;">
|
|
<div class="fixed"><a class="w3-button w3-round w3-small w3-lime w3-hover-yellow w3-margin w3-display-topright" href="run://mb-obthemes"> Theme Manager</a></div>
|
|
<h2>Save and Restore</h2>
|
|
<p>If you are satisfied with your configuration, you can save it as a meta-theme so that you can restore it later.</p>
|
|
<p>Theme Manager will save:
|
|
<ul>
|
|
<li>Openbox Theme (window decoration)</li>
|
|
<li>GTK and Icon Theme</li>
|
|
<li>Wallpaper</li>
|
|
<li>Conkies</li>
|
|
<li>Terminal theme</li>
|
|
<li>Menu / Sidepanels colors</li>
|
|
<li>Tint2 panel</li>
|
|
</ul>
|
|
</p><a class="w3-button w3-round w3-small w3-lime w3-hover-yellow w3-margin" href="run://mb-obthemes"> Theme Manager</a>
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function openTab(evt, tabName) {
|
|
var i, x, tablinks;
|
|
x = document.getElementsByClassName("tab");
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tablink");
|
|
for (i = 0; i < x.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" w3-gray", "");
|
|
}
|
|
document.getElementById(tabName).style.display = "block";
|
|
evt.currentTarget.className += " w3-gray";
|
|
}
|
|
function myFunction() {
|
|
var input, filter, table, tr, td, i;
|
|
input = document.getElementById("myInput");
|
|
filter = input.value.toUpperCase();
|
|
table = document.getElementById("myTable");
|
|
tr = table.getElementsByTagName("tr");
|
|
for (i = 0; i < tr.length; i++) {
|
|
td = tr[i].getElementsByTagName("td")[0];
|
|
if (td) {
|
|
txtValue = td.textContent || td.innerText;
|
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
|
tr[i].style.display = "";
|
|
} else {
|
|
tr[i].style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|