Tutorial: How to add your own logo.

Community contributed guides or tutorials for multiple topics like installations for other operating systems or platforms, monitoring, log aggregation, etc.
Post Reply
hercovandyk
Posts: 14
Joined: Tue Nov 13, 2018 7:28 am

Tutorial: How to add your own logo.

Post by hercovandyk »

We recently decided to move all our internal documentation to our own Mayan repository.

After setup, having only our name displayed seemed bland. Here's how I got our logo displaying somewhat correctly;

1. Move your png to the appearance app's images directory.

mayan/apps/appearnce/static/appearance/images/

Image

2. Edit the appearance app's css to center the logo.

mayan/smartimage/media/static/appearance/css/base.css

Add the following lines to the bottom of the file:

Code: Select all

.navbar .navbar-brand {
  padding: 2px 7.5px;
}
.navbar .navbar-brand img {
  display: inline-block;
}
3. Edit the menu_topbar template:

I removed the title, and added my image.

mayan/apps/appearance/templates/appearance/menu_topbar.html

Replace the navbar-brand tag with the following:

Code: Select all

<a class="navbar-brand" href="{% url home_view %}">
    <img src="static/appearance/images/logo_100.png" style="height: 55px" alt="">
</a>
4. Reload

Collect your static files and restart supervisord or your container.

That's it! Here is my result:

Image
gope
Posts: 4
Joined: Tue Oct 12, 2021 1:14 pm

Re: Tutorial: How to add your own logo.

Post by gope »

Won't this break on update?
miguelmv
Posts: 3
Joined: Fri Oct 07, 2022 7:15 am

Re: Tutorial: How to add your own logo.

Post by miguelmv »

Hello!

I'm doing this on docker. I'm leaving this here to help someone in the same boat.

1. mount a bind in docker, I'm using "images"
[code]
- /mnt/storage/data/mayan/images:/opt/mayan-edms/static/appearance/images
[/code]

in the host directory (/mnt/storage/data/mayan/images) put your logo: my_logo.png

2. then copy this two files to this directory (from inside the container app)


[code]
cp /opt/mayan-edms/lib/python3.9/site-packages/mayan/apps/appearance/templates/appearance/menus/menu_topbar.html /opt/mayan-edms/static/appearance/images
cp /opt/mayan-edms/static/admin/css/base.css /opt/mayan-edms/static/appearance/images
[/code]

3. Modify files as the OP says

- in menu_bar html, in place of title in navbar_brand tag, put

[code]
<img src="static/appearance/images/my_logo.png" style="height: 30px" alt="">
[/code]

- in base css add at the end

[code]
.navbar .navbar-brand {
padding: 2px 7.5px;
}
.navbar .navbar-brand img {
display: inline-block;
}
[/code]

4. then mount these two files as binds in docker compose yaml

[code]
- /mnt/storage/data/mayan/images/menu_topbar.html:/opt/mayan-edms/lib/python3.9/site-packages/mayan/apps/appearance/templates/appearance/menus/menu_topbar.html
- /mnt/storage/data/mayan/images/base.css:/opt/mayan-edms/static/admin/css/base.css
[/code]

5. Relaunch
Post Reply