Custom Branding#
This document describes how to update the portal style (CSS, logo, …), and documents how to easily insert your own “content” in select places.
Custom Portal Footer#
If all you want is to add a simple text at the bottom of (all) pages, you can use the “custom footer” functionality.
Create a file in /etc/vpn-user-portal/views/customFooter.php with e.g. the
following content:
<p>
If you need help, contact us on <a href="tel:+1234567890">+(1) (234) 567890</a>, or mail <a href="mailto:support@example.org">us</a>!
</p>
NOTE: this footer is always visible, also when VPN apps are being authorized.
Custom Authentication Page#
If you want to add some extra information for your users when they are logging
in to the VPN portal, you can do so by creating the file
/etc/vpn-user-portal/views/userPassAuthOrgInfo.php and putting some HTML in
there, e.g.:
<p class="warning">âšī¸ Use your full account name, e.g. <code>user@example.org</code>!</p>
NOTE: This ONLY has an effect when using authentication mechanisms that show a login page directly at the VPN service, e.g. LDAP, RADIUS, local account, and NOT when using e.g. SAML or OpenID Connect.
Custom Translations#
You can also make use of the multi language support in the templates you are overriding, e.g. the footer template.
You can use the
<?=$this->t('Text To Translate');?> format to make text translatable and
provide additional translation files. We modify the example above in
/etc/vpn-user-portal/views/customFooter.php:
<p>
<?=$this->t('If you need help, contact us on <a href="tel:+1234567890">+(1) (234) 567890</a>, or mail <a href="mailto:support@example.org">us</a>!'); ?>
</p>
Now for the translation file, you can create a file, e.g nl-NL.php for a
Dutch translation in /etc/vpn-user-portal/locale/nl-NL.php with the following
content:
<?php
return [
'If you need help, contact us on <a href="tel:+1234567890">+(1) (234) 567890</a>, or mail <a href="mailto:support@example.org">us</a>!' => 'Als je hulp nodig hebt, neem telefonisch contact met ons op via <a href="tel:+1234567890">+(1) (234) 567890</a>, of per <a href="mailto:support@example.org">mail</a>!',
];
Now when you switch languages in the portal, the translation should match when they exist.
NOTE: if you want to use single quotes (') in your texts, make sure to
escape them by adding a backslash (\) in front of them, e.g.
'Don\'t click here!'.
Template Overriding#
The portal uses templates, located in /usr/share/vpn-user-portal/views. Use
this to add your own CSS.
You can copy the base.php from this folder to
/etc/vpn-user-portal/views/base.php and modify it to override the default CSS
for example.
NOTE: It is NOT recommended to update other templates than base.php as
they MAY break future software updates. We do NOT guarantee template
compatibility!
After copying, add a new CSS line in /etc/vpn-user-portal/views/base.php
after the existing one:
<link href="<?=$this->getAssetUrl($requestRoot, 'css/screen.css'); ?>" media="screen" rel="stylesheet">
<link href="/css/my-screen.css" media="screen" rel="stylesheet">
This will then try to find the CSS file at
https://vpn.example.org/css/my-screen.css. You can look in
/usr/share/vpn-user-portal/web/css/screen.css for the default template CSS.
We have two officially supported themes, you can find the relevant files here and get inspiration:
See Portal Branding if you want to use those instead of creating your own.
If you create your own style, and consider it usable by others as well, please let us know and we might be able to provide it as an official package as well.