# Custom Branding
# Preamble
This guide explains how to customize the look and feel of Psono. You can change logos, links and styles.
# Client
# Top Logo
- Upload the logo
First upload the new logo to e.g. /opt/docker/psono-client/top_logo.png. The original logo has a resolution of 172x35 px.
Change start command
docker run --name psono-combo \ --sysctl net.core.somaxconn=65535 \ -v /opt/docker/psono/settings.yaml:/root/.psono_server/settings.yaml \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/config.json \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/portal/config.json \ -d --restart=unless-stopped -p 10200:80 psono/psono-combo:latest
Adjust this to include:
... -v /opt/docker/psono-client/top_logo.png:/usr/share/nginx/html/img/logo-inverse.png \ ...
Restart the client afterward
# Sign in Logo
Upload the logo
First upload the new logo to e.g. /opt/docker/psono-client/sign_in_logo.png. The original logo has a resolution of 172x35 px.
Change start command
docker run --name psono-combo \ --sysctl net.core.somaxconn=65535 \ -v /opt/docker/psono/settings.yaml:/root/.psono_server/settings.yaml \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/config.json \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/portal/config.json \ -d --restart=unless-stopped -p 10200:80 psono/psono-combo:latest
Adjust this to include:
... -v /opt/docker/psono-client/sign_in_logo.png:/usr/share/nginx/html/img/logo.png \ ...
Restart the client afterward
# Favicons
Upload the favicons
Psono is using favicons in multiple resolutions. Upload them to e.g. /opt/docker/psono-client. A list of the available files:
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- appstore_apple.png
- appstore_google.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- icon-128.png
- icon-16.png
- icon-32.png
- icon-48.png
- icon-64.png
- mstile-150x150.png
Change start command
docker run --name psono-combo \ --sysctl net.core.somaxconn=65535 \ -v /opt/docker/psono/settings.yaml:/root/.psono_server/settings.yaml \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/config.json \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/portal/config.json \ -d --restart=unless-stopped -p 10200:80 psono/psono-combo:latest
Adjust this to include your files e.g.:
... -v /opt/docker/psono-client/android-chrome-192x192.png:/usr/share/nginx/html/img/android-chrome-192x192.png \ -v /opt/docker/psono-client/android-chrome-512x512.png:/usr/share/nginx/html/img/android-chrome-512x512.png \ -v /opt/docker/psono-client/apple-touch-icon.png:/usr/share/nginx/html/img/apple-touch-icon.png \ -v /opt/docker/psono-client/appstore_apple.png:/usr/share/nginx/html/img/appstore_apple.png \ -v /opt/docker/psono-client/appstore_google.png:/usr/share/nginx/html/img/appstore_google.png \ -v /opt/docker/psono-client/favicon-16x16.png:/usr/share/nginx/html/img/favicon-16x16.png \ -v /opt/docker/psono-client/favicon-32x32.png:/usr/share/nginx/html/img/favicon-32x32.png \ -v /opt/docker/psono-client/favicon.ico:/usr/share/nginx/html/img/favicon.ico \ -v /opt/docker/psono-client/icon-128.png:/usr/share/nginx/html/img/icon-128.png \ -v /opt/docker/psono-client/icon-16.png:/usr/share/nginx/html/img/icon-16.png \ -v /opt/docker/psono-client/icon-32.png:/usr/share/nginx/html/img/icon-32.png \ -v /opt/docker/psono-client/icon-48.png:/usr/share/nginx/html/img/icon-48.png \ -v /opt/docker/psono-client/icon-64.png:/usr/share/nginx/html/img/icon-64.png \ -v /opt/docker/psono-client/mstile-150x150.png:/usr/share/nginx/html/img/mstile-150x150.png \ ...
Restart the client afterward
# Custom CSS
Create custom CSS file
You should start off with one of our existing CSS files and modify it e.g. datastore.css A list of all CSS files can be found here: https://gitlab.com/psono/psono-client/-/tree/master/src/common/data/css
We assume that you have your modified copy present in e.g. /opt/docker/psono-client/datastore.css
Change start command
docker run --name psono-combo \ --sysctl net.core.somaxconn=65535 \ -v /opt/docker/psono/settings.yaml:/root/.psono_server/settings.yaml \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/config.json \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/portal/config.json \ -d --restart=unless-stopped -p 10200:80 psono/psono-combo:latest
Adjust this to include:
... -v /opt/docker/psono-client/datastore.css:/usr/share/nginx/html/css/datastore.css \ ...
Restart the client afterward
# Custom "More" links
There are a couple of links shown in the left sidebar in the "more" section. You can customize them.
Modify config.json
Usually you start off with a config.json like this:
{ "backend_servers": [...], "base_url": "https://psono.example.com/", ... }
You can now modify it to show other more links like shown below:
{ "backend_servers": [...], "base_url": "https://psono.example.com/", ... "more_links": [{ "href": "https://support.example.com/", "title": "Company Support" }] }
If you want to add the original links to then this is how it would looks like:
{ "backend_servers": [...], "base_url": "https://psono.example.com/", ... "more_links": [{ "href": "https://doc.psono.com/", "title": "DOCUMENTATION", "class": "fa-book" },{ "href": "privacy-policy.html", "title": "PRIVACY_POLICY", "class": "fa-user-secret" },{ "href": "https://www.psono.com", "title": "ABOUT_US", "class": "fa-info-circle" }] }
Here you also see the usage of custom CSS classes to show custom icons. Psono currently supports Fontawesome 4.0 icons.
Restart the client afterward
# Server
# Logo in E-Mails
Upload the logo
First upload the new logo to e.g. /opt/docker/psono-server/email_logo.png
Change start command
docker run --name psono-combo \ --sysctl net.core.somaxconn=65535 \ -v /opt/docker/psono/settings.yaml:/root/.psono_server/settings.yaml \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/config.json \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/portal/config.json \ -d --restart=unless-stopped -p 10200:80 psono/psono-combo:latest
Adjust this to include:
... -v /opt/docker/psono-server/email_logo.png:/root/psono/static/email/logo.png \ ...
Restart the server afterward
# Email templates
Download the existing
First copy all the email templates from e.g. https://gitlab.com/psono/psono-server/-/tree/master/psono/templates/email?ref_type=heads into a folder, e.g. /opt/docker/email-templates
Change start command
You can now replace one email template or the whole template folder with e.g.
docker run --name psono-combo \ --sysctl net.core.somaxconn=65535 \ -v /opt/docker/psono/settings.yaml:/root/.psono_server/settings.yaml \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/config.json \ -v /opt/docker/psono-client/config.json:/usr/share/nginx/html/portal/config.json \ -v /opt/docker/email-templates:/root/psono/templates/email \ -d --restart=unless-stopped -p 10200:80 psono/psono-combo:latest
As you can see we added there
-v /opt/docker/email-templates:/root/psono/templates
. You could also do-v /opt/docker/email-templates/new_share_created_subject.txt:/root/psono/templates/new_share_created_subject.txt
to shadow a single template instead.Restart the server afterward