Koozali.org: home of the SME Server

Changing default server-manager color

Offline calisun

  • *
  • 601
  • +0/-0
Changing default server-manager color
« on: May 26, 2019, 08:15:36 AM »
I have been searching the forum here and did not find anything that answers my question.

I would like to change default server-manager color (theme). The reason is that sometimes I have several server-manager sessions open from different servers on different browser tabs. It would be very helpful if I could make each server different color to help me distinguish one from another quickly. I did have a situation that I started to make changes on one server and it turned out to be wrong one. There was no harm done but I created extra work for myself to change it back.
SME user and community member since 2005.
Want to install Wordpress in iBay of SME Server?
See my step-by-step How-To wiki here:
http://wiki.contribs.org/Wordpress_Multisite

Offline ReetP

  • *
  • 3,731
  • +5/-0
Re: Changing default server-manager color
« Reply #1 on: May 26, 2019, 10:50:22 AM »
There are some css files buried down in the /etc/e-smith hierarchy but I can't remember exactly where and I'm not near a desktop for a few days to check.

You can search for them.

Also use your browser developer tools to look & test.

Server-manager is controlled by at least 2 different rpms so it isn't quite so simple to patch.
...
1. Read the Manual
2. Read the Wiki
3. Don't ask for support on Unsupported versions of software
4. I have a job, wife, and kids and do this in my spare time. If you want something fixed, please help.

Bugs are easier than you think: http://wiki.contribs.org/Bugzilla_Help

If you love SME and don't want to lose it, join in: http://wiki.contribs.org/Koozali_Foundation

Offline mmccarn

  • *
  • 2,626
  • +10/-0
Re: Changing default server-manager color
« Reply #2 on: May 26, 2019, 04:17:53 PM »
Half of the page header is actually the logo image.

You might get an easy/obvious differentiation by creating a custom  600 x 40 pixel jpg for each server and overwriting /etc/e-smith/web/common/smeserver_logo.jpg

[edit]I can't figure out how to change the color of the top right seciton (next to the logo), but the code below changes the background of the title row and the left nav.

"NEWMENUBG" is the new background color for the left-hand navigation.
"NEWTITLEBG" is the new background color for the title bar - below the logo and above the menu - containing the current logged-in username.
[edit]"NEWHEADBG" is the new background color for the top right of the header (the top left header is a single image).

I changed the color in smeserver_logo.jpg using Preview on a mac (see attached), then used https://html-color-codes.info/colors-from-image/ to get the html code for the new color.

[edit]
Code: [Select]
NEWMENUBG=#F9E3FB
NEWTITLEBG=#F9E3FB
NEWHEADBG=#F9E3FB

OLDMENUBG=#e8f3e1
OLDTITLEBG=#98d36e
OLDHEADBG=#bee6a2

mkdir -p /etc/e-smith/templates-custom/etc/e-smith/web/common/css
cd /etc/e-smith/templates-custom/etc/e-smith/web/common/css
mkdir -p sme_core.css
mkdir -p sme_header.css
mkdir -p sme_main.css
mkdir -p sme_menu.css

'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_core.css/50body sme_core.css/50body
'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_core.css/90contribs sme_core.css/90contribs

'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_header.css/50body sme_header.css/50body
'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_header.css/90contribs sme_header.css/90contribs

'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_main.css/50body sme_main.css/50body
'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_main.css/90contribs sme_main.css/90contribs

'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_menu.css/50body sme_menu.css/50body

find . -type f| while read f; do sed -i "s/$OLDMENUBG/$NEWMENUBG/g" "$f"; done
find . -type f| while read f; do sed -i "s/$OLDTITLEBG/$NEWTITLEBG/g" "$f"; done
find . -type f| while read f; do sed -i "s/$OLDHEADBG/$NEWHEADBG/g" "$f"; done

expand-template /etc/e-smith/web/common/css/sme_core.css
expand-template /etc/e-smith/web/common/css/sme_header.css
expand-template /etc/e-smith/web/common/css/sme_main.css
expand-template /etc/e-smith/web/common/css/sme_menu.css

To revert to the default css:
Code: [Select]
cd /etc/e-smith/templates-custom/etc/e-smith/web/common
'rm' -rf css

expand-template /etc/e-smith/web/common/css/sme_core.css
expand-template /etc/e-smith/web/common/css/sme_header.css
expand-template /etc/e-smith/web/common/css/sme_main.css
expand-template /etc/e-smith/web/common/css/sme_menu.css

To revert the logo image if you change it:
Code: [Select]
yum reinstall smeserver-support
« Last Edit: May 26, 2019, 05:36:04 PM by mmccarn »

Offline calisun

  • *
  • 601
  • +0/-0
Re: Changing default server-manager color
« Reply #3 on: May 29, 2019, 05:36:54 PM »
Thank you guys,
mmccarn, this is awesome. Thank you
« Last Edit: May 29, 2019, 05:40:11 PM by calisun »
SME user and community member since 2005.
Want to install Wordpress in iBay of SME Server?
See my step-by-step How-To wiki here:
http://wiki.contribs.org/Wordpress_Multisite

Offline mmccarn

  • *
  • 2,626
  • +10/-0
Re: Changing default server-manager color
« Reply #4 on: June 01, 2019, 02:51:49 PM »
I don't like the results as much, but for anyone interested here is a simpler process that changes the white background of the server-manager body to another color while leaving the menu and header colors unchanged.

Code: [Select]
NEWBODYBG=#FFCCCC

mkdir -p /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css
cd  /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css
'cp' /etc/e-smith/templates/etc/e-smith/web/common/css/sme_main.css/50body 50body

sed -i 's/body, body.main {/body, body.main{\n    background-color: '$NEWBODYBG';/' 50body
expand-template /etc/e-smith/web/common/css/sme_main.css



I'm too lazy to figure out the all the conditionals required to safely combine this body background setting with the earlier header/menu color changes.  Consequently this process stomps on some of the header/menu changes from the earlier post and vice-versa. You cannot run these two commands sequentially and get coherent results.

If you want to change the header, menu, AND body background:
* use the earlier commands to change the header and menu colors
* manually edit the customized version of /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css/50body created by that process and add a "background-color" declaration for "body, body.main"
* re-expand /etc/e-smith/web/common/css/sme_main.css/50body

Code: [Select]
cd /etc/e-smith/templates-custom/etc/e-smith/web/common/css/sme_main.css
vi 50body
# add a new line in the 'body, body.main' section for background-color:
# body, body.main {
#    background-color: #FFCCCC;
#    margin-top: 5px;
#    margin-right: 20px;
#    margin-bottom: 5px;
#    margin-left: 5px;
#}

# save your edits

# expand the template
expand-template /etc/e-smith/web/common/css/sme_main.css


If something blows up, use the commands from the earlier post to revert all customizations and start over.