2022-05-15 14:09:55 +02:00
<!DOCTYPE html>
< html >
2022-06-04 22:50:37 +02:00
< title > Mabox Colorizer< / title >
2022-05-15 14:09:55 +02:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2022-06-08 21:45:29 +02:00
< link rel = "stylesheet" href = "./css/w3.css" >
2022-06-06 10:07:38 +02:00
< style >
2022-06-08 21:45:29 +02:00
body{
background-color:#222222;
2022-12-22 02:33:00 +01:00
color: #999999;
2022-06-08 21:45:29 +02:00
}
2022-06-06 10:07:38 +02:00
div.fixed {
position: fixed;
2022-12-23 11:10:27 +01:00
top: 4px;
2022-06-06 10:07:38 +02:00
right: 0;
2022-12-19 22:22:23 +01:00
width: 400px;
2022-06-06 10:07:38 +02:00
}
2022-06-08 21:45:29 +02:00
div.fixeddown {
position: fixed;
bottom:0;
2022-12-20 00:35:35 +01:00
left:0;
width:160px;
2022-06-08 21:45:29 +02:00
}
2022-12-23 11:10:27 +01:00
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;}
2022-12-20 00:35:35 +01:00
div.fixeddown p {margin:2px 0;}
div.fixeddown a {text-decoration:none;margin:0 2px;}
2022-12-08 17:48:55 +01:00
.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;}
2022-12-17 12:12:52 +01:00
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;}
2022-12-21 10:43:12 +01:00
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;
}
2022-06-06 10:07:38 +02:00
< / style >
2022-06-08 21:45:29 +02:00
< body >
2022-05-15 14:09:55 +02:00
2022-06-11 12:27:09 +02:00
< div class = "w3-sidebar w3-bar-block w3-dark-grey w3-card" style = "width:160px" >
2022-12-08 17:48:55 +01:00
< div class = "w3-center w3-margin" > < img src = "./img/colorizer.png" class = "link" title = "Colorizer" onclick = "openTab(event, 'Colorizer')" > < / div >
2022-06-08 21:45:29 +02:00
< 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 >
2022-09-19 20:59:26 +02:00
< button class = "w3-bar-item w3-button w3-small tablink" onclick = "openTab(event, 'Conky')" > Conky< / button >
2022-12-23 11:10:27 +01:00
< button class = "w3-bar-item w3-button w3-small tablink" onclick = "openTab(event, 'Wall2theme')" > Wallpaper themes< / button >
2022-09-19 20:59:26 +02:00
< button class = "w3-bar-item w3-button w3-small tablink" onclick = "openTab(event, 'Tint2')" > Tint2 Panel< / button >
2022-06-08 21:45:29 +02:00
< 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 >
2022-12-20 00:35:35 +01:00
< 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 >
2022-05-15 14:09:55 +02:00
< / div >
2022-06-11 12:27:09 +02:00
< div style = "margin-left:160px;" class = "w3-small" >
2022-05-15 14:09:55 +02:00
2022-06-04 22:50:37 +02:00
< section id = "Colorizer" class = "w3-container tab" style = "min-height:100vh;" >
2022-12-19 22:22:23 +01:00
< 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 / >
2022-06-29 16:31:14 +02:00
< p > Easily change look and feel of:
< ul >
2022-12-19 22:22:23 +01:00
< li > < strong > < span class = "w3-tag w3-round w3-tiny w3-green link" onclick = "openTab(event, 'Openbox')" > Openbox theme< / span > < / strong > (window decorations)< / li >
2022-12-08 17:48:55 +01:00
< 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 >
2022-12-19 22:22:23 +01:00
<!-- <li><strong>PyRadio</strong> - Internet Radio Player</li>// -->
2022-06-29 16:31:14 +02:00
< / ul > < / p >
2022-12-19 22:22:23 +01:00
<!-- <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>// -->
2022-12-20 00:35:35 +01:00
< br / >
2022-12-22 02:33:00 +01:00
< p class = "w3-center" > < strong > Randomizer< / strong > - set color themes quickly and securely < span class = "w3-tag w3-round w3-red" > New!< / span > < / p >
2022-12-19 22:22:23 +01:00
< 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" > 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" > All above< / a >
< / div >
< / div >
< / div >
2022-12-20 00:35:35 +01:00
< / 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 / >
2022-12-19 22:22:23 +01:00
2022-12-20 00:35:35 +01:00
2022-05-15 14:09:55 +02:00
< / div >
< / section >
< section id = "Openbox" class = "w3-container tab" style = "display:none;min-height:100vh;" >
2022-12-19 22:22:23 +01:00
< 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 >
2022-12-22 02:33:00 +01:00
< a class = "w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href = "run://randomizer ob" > Colorize < / a >
2022-12-19 22:22:23 +01:00
< / div >
< / div >
2022-05-15 14:09:55 +02:00
< h2 > Openbox theme< / h2 >
2022-06-03 19:43:56 +02:00
< p > The Openbox module allows you to easily customize the appearance of window decorations.< / p >
2022-12-17 12:12:52 +01:00
< 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 >
2022-06-03 19:43:56 +02:00
2022-12-08 17:48:55 +01:00
< p > You can change most of basic settings directly from this help screen.< / p >
2022-06-04 22:50:37 +02:00
2022-12-17 12:12:52 +01:00
< div class = "w3-show-inline-block" >
< div class = "w3-bar w3-border w3-round w3-dark-grey" >
2022-12-08 17:48:55 +01:00
< div class = "w3-dropdown-hover" >
2022-12-17 12:12:52 +01:00
< button class = "w3-button w3-small w3-border-right" > Window Border< / button >
2022-12-08 17:48:55 +01:00
< 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 >
2022-12-17 12:12:52 +01:00
< 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" >
2022-12-08 17:48:55 +01:00
< div class = "w3-dropdown-hover" >
2022-12-17 12:12:52 +01:00
< button class = "w3-button w3-small w3-border-right" > Title Padding< / button >
2022-12-08 17:48:55 +01:00
< 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 >
2022-12-17 12:12:52 +01:00
< 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" >
2022-12-08 17:48:55 +01:00
< div class = "w3-dropdown-hover" >
2022-12-17 12:12:52 +01:00
< button class = "w3-button w3-small w3-border-right" > Title bar style< / button >
2022-12-08 17:48:55 +01:00
< 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 >
2022-12-17 12:12:52 +01:00
< / div >
< / div >
< div class = "w3-show-inline-block" >
< div class = "w3-bar w3-border w3-round w3-dark-grey" >
2022-12-08 17:48:55 +01:00
< 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 >
2022-12-17 12:12:52 +01:00
< / 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 >
2022-12-08 17:48:55 +01:00
<!-- 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 >
2022-12-17 12:12:52 +01:00
< / div >
2022-12-08 17:48:55 +01:00
<!-- WEIGHT AND SLANT: BOLD ITALIC // -->
< div class = "w3-show-inline-block" >
< div class = "w3-bar w3-border w3-round w3-dark-grey" >
2022-12-17 12:12:52 +01:00
< 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 >
2022-12-08 17:48:55 +01:00
< / div >
2022-12-17 12:12:52 +01:00
< / div >
2022-12-08 17:48:55 +01:00
<!-- TEXT JUSTIFY // -->
< div class = "w3-show-inline-block" >
< div class = "w3-bar w3-border w3-round w3-dark-grey" >
2022-12-17 12:12:52 +01:00
< 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 >
2022-12-08 17:48:55 +01:00
< / div >
2022-12-17 12:12:52 +01:00
< / div >
2022-12-08 17:48:55 +01:00
<!-- SHADOW EFFECT // -->
< div class = "w3-show-inline-block" >
2022-12-17 12:12:52 +01:00
< div class = "w3-bar w3-border w3-round" >
< div class = "w3-dropdown-hover w3-dark-grey" >
< button class = "w3-button w3-small" > shadow< / button >
2022-12-08 17:48:55 +01:00
< 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 >
2022-12-17 12:12:52 +01:00
< div class = "w3-row w3-margin-top" >
2022-12-08 17:48:55 +01:00
< div class = "w3-col m5 w3-black w3-round" >
2022-12-17 12:12:52 +01:00
< 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
2022-12-08 17:48:55 +01:00
< / p >
< / div >
2022-12-17 12:12:52 +01:00
< 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" >
2022-12-19 22:22:23 +01:00
< 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 >
2022-12-17 12:12:52 +01:00
< / p >
< p class = "w3-padding" > More than 300 beautifull pre-defined gradients are available from Colorizer OBtheme menu.< / p >
2022-12-08 17:48:55 +01:00
< / div >
2022-06-04 22:50:37 +02:00
< / div >
2022-12-08 17:48:55 +01:00
2022-12-17 12:12:52 +01:00
< 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 >
2022-12-08 17:48:55 +01:00
2022-06-04 22:50:37 +02:00
2022-05-15 14:09:55 +02:00
< / section >
2022-09-19 20:59:26 +02:00
< section id = "Jgmenu" class = "w3-container tab" style = "display:none;min-height:100vh" >
2022-12-19 22:22:23 +01:00
< 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 >
2022-12-22 02:33:00 +01:00
< a class = "w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href = "run://randomizer menu show" > Colorize < / a >
2022-12-19 22:22:23 +01:00
< / div >
< / div >
2022-09-19 20:59:26 +02:00
< h2 > Menu / Sidepanels< / h2 >
< p > Menu / Sidepanels module ...< / p >
< / section >
2022-05-15 14:09:55 +02:00
2022-06-03 19:43:56 +02:00
< section id = "Conky" class = "w3-container tab" style = "display:none;min-height:100vh;" >
2022-12-19 22:22:23 +01:00
< 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 >
2022-12-22 02:33:00 +01:00
< a class = "w3-button w3-bar-item w3-small w3-grey w3-hover-amber w3-right" href = "run://randomizer conky" > Colorize < / a >
2022-12-19 22:22:23 +01:00
< / div >
< / div >
2022-06-03 19:43:56 +02:00
< h2 > Conky< / h2 >
2022-12-21 10:43:12 +01:00
< 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:
2022-06-08 21:45:29 +02:00
< ul >
2022-12-23 22:51:29 +01:00
< li > set position on the screen< / li >
2022-12-21 10:43:12 +01:00
< 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 >
2022-12-23 11:10:27 +01:00
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 > .
2022-12-21 10:43:12 +01:00
< / p >
2022-12-23 22:51:29 +01:00
< 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 >
2022-12-21 10:43:12 +01:00
< 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 >
2022-12-03 16:23:34 +01:00
2022-06-03 19:43:56 +02:00
< / section >
2022-12-19 22:22:23 +01:00
< section id = "Wall2theme" class = "w3-container tab" style = "display:none;min-height:100vh;" >
2022-12-23 11:10:27 +01:00
< 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 >
2022-12-23 13:48:01 +01:00
< div class = "w3-row" >
2022-12-23 11:10:27 +01:00
< 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 >
2022-12-23 13:48:01 +01:00
< 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 >
2022-12-23 11:10:27 +01:00
< br / >
< h4 > Automatic generation of themes after changing wallpaper< / h4 >
< p > < em > (Experimental)< / em > < / p >
2022-12-23 13:48:01 +01:00
< 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 >
2022-12-23 11:10:27 +01:00
< br / > < br / >
2022-12-19 22:22:23 +01:00
< / section >
2022-06-03 19:43:56 +02:00
< section id = "Terminal" class = "w3-container tab" style = "display:none;min-height:100vh" >
2022-06-29 16:31:14 +02:00
< div class = "fixed" >
2022-12-23 11:10:27 +01:00
< 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 >
2022-06-29 16:31:14 +02:00
< / div >
2022-06-03 19:43:56 +02:00
< h2 > Terminal theme< / h2 >
2022-06-08 21:45:29 +02:00
< p > Mabox comes with many terminal themes available (~400)< / p >
2022-12-22 02:33:00 +01:00
< 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 >
2022-06-29 16:31:14 +02:00
< p > You can run terminal theme selector any time from cli by < strong > th< / strong > alias< / p >
2022-12-22 02:33:00 +01:00
< 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 >
2022-05-15 14:09:55 +02:00
< section id = "Tint2" class = "w3-container tab" style = "display:none;min-height:100vh;" >
2022-06-08 21:45:29 +02:00
< h2 > Tint2 panel< / h2 >
< p > Colorizer module for Tint2 panel is not available yet - but planned< / p >
2022-05-15 14:09:55 +02:00
< p > Use quite powerfull Tint2 config menu for now.< / p >
2022-12-17 12:12:52 +01:00
< 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 >
2022-09-19 20:59:26 +02:00
2022-12-17 12:12:52 +01:00
< 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 >
2022-09-19 20:59:26 +02:00
< / section >
2022-12-17 12:12:52 +01:00
2022-06-06 10:07:38 +02:00
< section id = "Save" class = "w3-container tab" style = "display:none;min-height:100vh;" >
2022-12-17 12:12:52 +01:00
< 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 >
2022-06-03 19:43:56 +02:00
< 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 >
2022-06-08 21:45:29 +02:00
< 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 >
2022-12-17 12:12:52 +01:00
< / p > < a class = "w3-button w3-round w3-small w3-lime w3-hover-yellow w3-margin" href = "run://mb-obthemes" > Theme Manager< / a >
2022-05-15 14:09:55 +02:00
< / 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 >