StingRay's Dark Theme for CWP

Looking for a dark theme but can't find one, or you can't seem to override the hardcoded styles that the developers have purposely have you wait for a themeing solution? Well, I made a little script that accomplishes this, which you can run each time CWP gets updated and rewrites over your custom.css.

Head over to my Github: https://github.com/rayleesg/dark_cwp

tried this script and got:

[root@]# ./dark_cwp
StingRay's Total Dark Theme for CWP
###################################

chmod: changing permissions of `custom.css': Operation not permitted
./dark_cwp: line 8: custom.css: Permission denied
./dark_cwp: line 9: custom.css: Permission denied
./dark_cwp: line 10: custom.css: Permission denied
./dark_cwp: line 11: custom.css: Permission denied
./dark_cwp: line 12: custom.css: Permission denied
./dark_cwp: line 13: custom.css: Permission denied
./dark_cwp: line 14: custom.css: Permission denied
./dark_cwp: line 15: custom.css: Permission denied
./dark_cwp: line 16: custom.css: Permission denied
./dark_cwp: line 17: custom.css: Permission denied
./dark_cwp: line 18: custom.css: Permission denied
./dark_cwp: line 19: custom.css: Permission denied
./dark_cwp: line 20: custom.css: Permission denied
./dark_cwp: line 21: custom.css: Permission denied
./dark_cwp: line 22: custom.css: Permission denied
./dark_cwp: line 23: custom.css: Permission denied
./dark_cwp: line 24: custom.css: Permission denied
./dark_cwp: line 25: custom.css: Permission denied
./dark_cwp: line 26: custom.css: Permission denied
./dark_cwp: line 27: custom.css: Permission denied
./dark_cwp: line 28: custom.css: Permission denied
./dark_cwp: line 29: custom.css: Permission denied
./dark_cwp: line 30: custom.css: Permission denied
./dark_cwp: line 31: custom.css: Permission denied
./dark_cwp: line 32: custom.css: Permission denied
./dark_cwp: line 33: custom.css: Permission denied
./dark_cwp: line 34: custom.css: Permission denied
./dark_cwp: line 35: custom.css: Permission denied


haven't looked to far into it yet, but here's my specs:
Distro Name: CentOS release 6.9 (Final)
Kernel Version: 2.6.32-696.10.1.el6.x86_64
CWP version: 0.9.8.272

chattr -i custom.ss or rf -rf custom.css entirely,

then run the script

That worked! 

Nah. Didn`t work for me on CWP6. Added in the script chattr -i after cd to custom.css and chattr +i at the end of the script. I run the script, it insert everything in the custom.css - nothing. Moved custom.css to /root and run the script - nothing. Logged out, logged in - same. Am I doing something wrong?

Sorry for the late reply Darkness. You'd have to find custom.css in /usr/local/cwpsrv/htdocs/admin/design/css and you have to place any custom.css changes there. That's what my script does. If it worked for darkroom, should work for you too?

CWP should switch to Bottstrap 3 or better 4 first

@become It is already on Bootstrap3. That "Supr" theme is based on Bootstrap3.

The main problem is that CWP does not use any templating engine. Everything is hardcoded. Basically with only .css files you can't do much. And atm even .css files are locked so you can't edit them at all...unless you do some sneaky things to unlock them, but as I said, you can't do much even with unlocked .css. If you want to create custom design without html code itself you can't do much.

For all of you that have poblem installing this script this is how I personally did it because it caused errors other way

1) Use some SFTP program and gain root access using it (WinSCP in my opinion is best)
2) Go To /usr/local/cwpsrv/htdocs/admin/design/css and copy custom.css to personal computer somewhere
3) Edit custom.css file on PC using editor from your opinion with options from script (gist with clear code - https://gist.github.com/markoidzan/e0bf9527205a04bef3df09aa1509212b)
4) DELETE original custom.css file
5) Upload edited custom.css file
6) Restart cwpsrv with service cwpsrv restart in SSH
7) enjoy in theme

@midzan21 How did you manage to delete locked custom.css?

EDIt: Ok, I found way.

Code: [Select]

cd /usr/local/cwpsrv/htdocs/admin/design
chattr -d -suSiadAc ./css/
cd /usr/local/cwpsrv/htdocs/admin/design/css
chattr -a FILE_NAME
chattr -i FILE_NAME


one quick req... the "X" in the corner of popup windows like yum manager are almost invisible. can those be more prominent?

THANK YOU @raylee <3
I was waiting for an admin dark theme for years!!!

Thank-you raylee, midzan21  and Gogo. I used both your tips and successfully applied StingRay's dark theme. Looks great!

• Distro Name: CentOS Linux release 7.6.1810 (Core)
• CWPpro version: 0.9.8.838

For all of you that have poblem installing this script this is how I personally did it because it caused errors other way

1) Use some SFTP program and gain root access using it (WinSCP in my opinion is best)
2) Go To /usr/local/cwpsrv/htdocs/admin/design/css and copy custom.css to personal computer somewhere
3) Edit custom.css file on PC using editor from your opinion with options from script (gist with clear code - https://gist.github.com/markoidzan/e0bf9527205a04bef3df09aa1509212b)
4) DELETE original custom.css file
5) Upload edited custom.css file
6) Restart cwpsrv with service cwpsrv restart in SSH
7) enjoy in theme

@midzan21 How did you manage to delete locked custom.css?

EDIt: Ok, I found way.

Code: [Select]

cd /usr/local/cwpsrv/htdocs/admin/design
chattr -d -suSiadAc ./css/
cd /usr/local/cwpsrv/htdocs/admin/design/css
chattr -a FILE_NAME
chattr -i FILE_NAME


If someone need, I EDITED the dark theme of raylee, now its dark gray instead of black, also added blue colors and dark text on dark background fixed.
Here is the code of /usr/local/cwpsrv/htdocs/admin/design/css/custom.css:

Code: [Select]

html,.deleted
{
/*background:#000;*/
-webkit-filter:invert(0.92) hue-rotate(180deg)!important;
-moz-filter:invert(0.92) hue-rotate(180deg)!important;
filter:invert(0.92) hue-rotate(180deg)!important;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0,xray=0,mirror=0,invert=0.92,opacity=1,rotation=2)!important;
-webkit-transition:100ms ease all;
transition:100ms ease all;
-o-transition-duration:100ms ease all
}

img,embed[flashvars],[type*="application/x-shockwave-flash"],[type*="application/x-silverlight"]
{
-webkit-filter:invert(0.92) hue-rotate(180deg)!important;
-moz-filter:invert(0.92) hue-rotate(180deg)!important;
filter:invert(0.92) hue-rotate(180deg)!important;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0,xray=0,mirror=0,invert=0.92,opacity=1,rotation=2)!important;
}

tr > td > a > img,th > a > img
{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix type=\'matrix\' values=\'-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0\'/></filter></svg>#invert")!important;-webkit-filter:hue-rotate(180deg)!important;
filter:hue-rotate(180deg)!important;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0,xray=0,mirror=0,invert=0,opacity=1,rotation=2)!important
}

/*sergdev*/
#sidebar .sidenav .mainnav ul li
{
background-color: #f4f6ff;
}

div:not(.navbar-header)>a, li>a:not(.active), .panel-heading, .title.mb0
{
background-image: linear-gradient(to bottom, #fafafa 0%, #f3f5ff 100%) !important;
}

.panel .panel-body, .input-group-addon, .panel-body pre, #myTabContent22
{
background-color: #f3f5ff;
}

.panel-heading span, .progress-bar font, #myTabService li.active a, #myTabService li.active a i::before
{
color: #454545 !important;
}

.navbar-brand
{
font-size: 0 !important;
}

.navbar-brand .slogan
{
display: none;
}

.navbar-brand::before
{
content: 'YOUR_HOSTNAME.';
    font-size: 30px;
}

.navbar-brand::after
{
content: 'admin';
font-size: 14px;
    color: #6b6b6b;
}