How to Customise Mayan EDMS Interface?

Hello
I’m looking for examples on how to change the styling of Mayan EDMS
I know we can do this using System → settings → themes and apply custom css.

  • I’m looking for any examples so that i can know which class name to select and apply rules to them.

  • Or any other ways to customize the theme. Any other themes are available for reference

Thank you

Not sure if you into CSS or now how it works, but I just looked at he source code and made a list of things I wanted to change and made a theme that overrides those values. Example I used on my test server I wanted to make header bar yellow so I know I am on the test server.

.navbar-default {
background-color: #c1a803;
}

You can also put your own label where “Mayan EDMS” is via the config file. Just be sure to restart the services.

# In config.yml
...
COMMON_PROJECT_TITLE: Test Server
...
1 Like

Thank you so much for helping out. Just had one follow up query. i have setup the project using docker compose method. Where can i find / should add config.yml file ?

In Linux instalation with docker compose method.
The volume with the file is
/var/lib/docker/volumes/mayan_app/_data/config.yml

1 Like

Thanks @scv1503 was going to post I use a manual install from Turnkey Linux so not sure about the docker install. Good to know where its at on docker.

2 Likes

The value of COMMON_PROJECT_TITLE can also be passed as an environment variable in the .env file:

MAYAN_COMMON_PROJECT_TITLE='Test Server'

1 Like

i changed the project title and added some css like this
.navbar-default {
background-color: #c1a803 important;
color: #000000;
}
and i restated my server also still the theme is not changing. anyone know any idea?

I suspect because the CSS code used is not correct. Using the example above from ‘DocCyblade’ should work

1 Like

Also please remember the theme need to be enabled for user, even if you are the one and only user

Is there maybe a complete css template file available for easy modification?

It would be more easy to adjust the elements in a list instead of finding out each css style name by checking the page source code.