change font color in seahub.css

[Christoph Kuhnert]

Dear all

I would like to change the text colour, background colors and menu colors in the seahub installation.

I have checked out https://github.com/haiwen/seafile/wiki/Seahub-customization for the general concept.

As I am not a webpage developer and I am not capable to write my own css file, I would like to therefore use a css file as a template. 

As far as I understood from this forum the css file to change is the seahub.css file.

I hope that is correct. My question now is: Is there some way to find out where the text color can get changed and where the background colors are?

I am going through the css file since a while but none of my changes take an effect on the actual webpage.

A bit of a direction on how to alter the css file would be fantastic. Maybe just the most dominant items such as text colors and background colors?

Is there some sort of document for that?

Kind Regards,

Chris

[Chris]

Dear all

I would like to get back to my question above.

I added the line 

1. Overwrite BRANDING_CSS in seahub_settings.py

   BRANDING_CSS = 'custom/custom.css'

according to the manual and copied the sea hub.css file to media/custom and renamed it to custom.css.

No changes that I do to the color codes are being taken into account on the sea hub webpage. 

It always looks the same as in the original status.

seahub_settings.py looks like this:

_____

SECRET_KEY = "xyz..."

HTTP_SERVER_ROOT = 'https://seafile.example.com/seafhttp'

LOGO_PATH = 'custom/mylogo.png'

LOGO_URL = 'www.example.com'

BRANDING_CSS = 'custom/custom.css'

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.mysql',

        'NAME': 'seahub-db',

        'USER': 'seafile',

        'PASSWORD': 'xyz',

        'HOST': '127.0.0.1',

        'PORT': '3306',

        'OPTIONS': {

            'init_command': 'SET storage_engine=INNODB',

        }

    }

}

EMAIL_USE_TLS = True

EMAIL_HOST = 'mail.account.com'

EMAIL_HOST_USER = 'username'

EMAIL_HOST_PASSWORD = 'xyz...'

EMAIL_PORT = 587

DEFAULT_FROM_EMAIL = 'From'

SERVER_EMAIL = 'do not reply'

SITE_BASE = 'https://seafile.example.com'

SITE_NAME = 'My Cloud'

SITE_TITLE = 'My Cloud'

_____

Can someone help me with which color definition I should modify (in which line in seahub.css). So I can change e.g. the font color from orange to blue (or similar)?

That would be a huge step for me in the right direction.

Maybe I just can't see any changes to the css because it does not consider the newest seahub_setting.py setting?

An Indication for that could be:

When I hover over my logo, it does not link to www.example.com but always (maybe still) to https://seafile.example.com, although I set LOGO_URL = 'www.example.com' (see above).

The link behind the logo is not changing anymore (initially I had it set to https://seafile.example.com) or it uses the "SITE_BASE definition?

If it's not updated anymore maybe my sea file installation also doesn't load the new css?

Obviously I always rebooted the sea file and seahub instance.

Thanks for a bit of help on this topic.

I am just not getting anywhere with the colors.

KR, Chris

[Lepez]

Never done it myself, but just a couple thoughts, do you clear your browser's cache after you make the changes? also you may need to restart seahub.

[Chris]

Thanks Lepez for the suggestions.

Yes, I cleared browsers cache (also used different computers/ smart phones to verify) and always restarted seahub (and seafile).

I use sea hub over fastcgi because I set https connections via apache (if that makes any difference).

Is there a log file that could give some information?

KR, Chris

[Chris]

Could this extract from the controller log give any guidance?

[06/19/14 16:35:49] seafile-controller.c(151): starting ccnet-server ...

[06/19/14 16:35:49] seafile-controller.c(74): spawn_process: ccnet-server -c /home/ck/Seafile/ccnet -f /home/ck/Seafile/logs/ccnet.log -d -P /home/ck/Seafile/pids/ccnet.pid

[06/19/14 16:35:49] seafile-controller.c(89): spawned ccnet-server, pid 17166

[06/19/14 16:35:50] seafile-controller.c(590): ccnet daemon connected.

[06/19/14 16:35:50] seafile-controller.c(182): starting seaf-server ...

[06/19/14 16:35:50] seafile-controller.c(74): spawn_process: seaf-server -c /home/ck/Seafile/ccnet -d /home/ck/Seafile/data -l /home/ck/Seafile/logs/seafile.log -P /home/ck/Seafile/pids/seaf-server.pid

[06/19/14 16:35:50] seafile-controller.c(89): spawned seaf-server, pid 17170

[06/19/14 16:35:50] seafile-controller.c(74): spawn_process: httpserver -c /home/ck/Seafile/ccnet -d /home/ck/Seafile/data -l /home/ck/Seafile/logs/http.log -P /home/ck/Seafile/pids/httpserver.pid

[06/19/14 16:35:50] seafile-controller.c(89): spawned httpserver, pid 17171

[06/19/14 16:35:50] seafile-controller.c(419): pid file /home/ck/Seafile/pids/seafdav.pid does not exist

[06/19/14 16:35:50] seafile-controller.c(74): spawn_process: /usr/bin/python2.7 -m wsgidav.server.run_server runfcgi --log-file /home/ck/Seafile/logs/seafdav.log --pid /home/ck/Seafile/pids/seafdav.pid --port 8002

[06/19/14 16:35:50] seafile-controller.c(89): spawned /usr/bin/python2.7, pid 17172

[Daniel Pfuhl]

Hi Chris,
I also tried this way but did not manage to get it working.
So I did it the hard way:

- identify the colors via Mozilla CSS inspector
- replace the old value with the new one

Here is how I did it:

find . -name '*.css' -type f -exec sed -i 's/#e83/#008AC9/g' {} \;

#83 is the standard color
#008AC9 is the one I wanted to have

The result is a corporate color seafile ;-)

[Chris]

Thanks Daniel

I will give that a try!!

KR, Chris

[Chris]

Thanks again, Daniel

I tried it and changed 4 instances of #e83 in my custom.css, rebooted sahib and sea file but it did not cause any color changes.

I also deleted the BRANDING_CSS = 'custom/custom.css' entry in the seahub_settings.py and then altered the seahub.css directly.

Also reboot of server and hub, but no changes are visible.

Something is wrong...

KR, Chris

[Daniel Pfuhl]

Hi Chris,

I ran the comand in .../seafile-server-latest/seahub/media/css against all css files inside this directory. I think I remember that changing only seahub.css is not enough!


Here is the complete list of changes I made to switch from orange to a shade of blue

find . -name '*.css' -type f -exec sed -i 's/#e83/#008AC9/g' {} \;

find . -name '*.css' -type f -exec sed -i 's/#feab79/#bed4dd/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#f7941d/#008ac9/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#feac74/#bed4dd/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#eb8205/#008ac9/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#f93/#008ac9/g' {} \;

[Daniel Pfuhl]

Hi Chris,

I think I remember that only changing seahub.css is not enough - you have to alter more css files as styles seem to be distributed over several files. Which is ok for cascaded style sheets ;-)
That's why I used a combination of "find" and "sed" to catch them all.

I did not create custom.css I altered the original files under ...seafile-server-latest/seahub/media/css/...

Here is the complete list of changes I made to switch from orange to a shade of corporate blue:

find . -name '*.css' -type f -exec sed -i 's/#e83/#008AC9/g' {} \;

find . -name '*.css' -type f -exec sed -i 's/#feab79/#bed4dd/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#f7941d/#008ac9/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#feac74/#bed4dd/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#eb8205/#008ac9/g' {} \;
find . -name '*.css' -type f -exec sed -i 's/#f93/#008ac9/g' {} \;

[Daniel Pfuhl]

Chris,

how is it going?
I just remembered that you have to take care that letters in the color code of the sed command are lower case. Otherwise the replacement will fail without any notice.

[Christoph Kuhnert | YNA]

Hi Daniel

I didnt get to try it out yet. I was travelling over the weekend and have a busy start into the week. 

I am already looking forward to look into this though and appreciate your tips a lot. 

I will post about how it went in this group. It will be nice to contribute something as well. 

Kind Regards

Chris

[Christoph Kuhnert | YNA]

Hi Daniel

Thanks a lot again.

Sorry it took so long for getting back to you.

My “Play around” server with sea file on it broke down and so I lost my sea file installation.
Now installed sea file on a Raspi and I am back up and running with sea file.

I just tried your commands.

Finally some items changed the colour!! That helped a lot!

Unfortunately not all of them though yet. I gotta have another look into this.
But I gotta run now so I will have a closer look a bit later.

Thanks again anyways already, it’s really much appreciated!

KR, Chris

[Daniel Pfuhl]

Hi Chris,

you're welcome.
Maybe we'll see an easier way to customize the Web UI in later versions.

daniel

[Chris]

Dear Daniel, dear all

Same as Daniel's Solution but a bit of info what color is being changed by which line.

If someone knows more colours and what they are related for, please post it in this thread.

The items which colours is affected is shown in PINK on the pictures below.

Changes color of links. (member names, library names, Groups, Wiki, etc.)

find . -name '*.css' -type f -exec sed -i 's/#e83/#FF00FF/g' {} \; 

Didn't find out what this does:

find . -name '*.css' -type f -exec sed -i 's/#feab79/#FF00FF/g' {} \;

Changes color of Headings

find . -name '*.css' -type f -exec sed -i 's/#f7941d/#FF00FF/g' {} \;

Changes color of the activated menu item in side bar

find . -name '*.css' -type f -exec sed -i 's/#feac74/#FF00FF/g' {} \;

Changes color of items in Menu bar

find . -name '*.css' -type f -exec sed -i 's/#eb8205/#FF00FF/g' {} \;

Changes color for hovering over menu items:

find . -name '*.css' -type f -exec sed -i 's/#f93/#FF00FF/g' {} \;

KR, Chris