mirror of
https://github.com/YunoHost/doc.git
synced 2024-09-03 20:06:26 +02:00
67 lines
2.4 KiB
Markdown
67 lines
2.4 KiB
Markdown
|
# Customize the appearance of the user portal
|
||
|
|
|
||
|
|
## Using a theme
|
||
|
|
|
||
|
|
Since YunoHost 3.5, you can change the theme of the user portal - though for now it requires tweaking via the command line.
|
||
|
|
|
||
|
|
You can list the available themes with :
|
||
|
|
|
||
|
|
```bash
|
||
|
|
$ ls /usr/share/ssowat/portal/assets/themes/
|
||
|
|
```
|
||
|
|
|
||
|
|
Then you can use `nano /etc/ssowat/conf.json.persistent` to enable the theme you choose like this :
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"theme": "light",
|
||
|
|
...other lines...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
<div class="alert alert-info" markdown="1">
|
||
|
|
You might need to force the refresh of your browser's cache for the theme to fully propagate. You can do so with Ctrl+Shift+R on Firefox.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
## Adding someone else's theme
|
||
|
|
|
||
|
|
You may add themes created by other people by downloading and extracting the corresponding files in a new folder `the_theme_name` in `/usr/share/ssowat/portal/assets/themes/`.
|
||
|
|
|
||
|
|
<div class="alert alert-warning" markdown="1">
|
||
|
|
**Beware** that adding third-party themes from random strangers on the internet **is a security risk**. It is equivalent to running someone's else code on your machine, which can be used for malicious purpose such as stealing credentials !
|
||
|
|
</div>
|
||
|
|
|
||
|
|
## Creating your own theme
|
||
|
|
|
||
|
|
You can create your own theme by copying the existing theme of your choice. For instance starting from the light theme :
|
||
|
|
|
||
|
|
```bash
|
||
|
|
cp -r /usr/share/ssowat/portal/assets/themes/{light,your_own_theme}
|
||
|
|
```
|
||
|
|
|
||
|
|
Then, edit the files the css and js files in `/usr/share/ssowat/portal/assets/themes/your_own_theme` according to what you want to do :
|
||
|
|
|
||
|
|
- `custom_portal.css` can be used to add custom CSS rules to the user portal ;
|
||
|
|
- `custom_overlay.css` can be used to customize the small YunoHost button overlay, displayed on apps page which includes it ;
|
||
|
|
- `custom_portal.js` can be used to add custom JS code to be ran both on the user portal or when injecting the small YunoHost button / overlay.
|
||
|
|
|
||
|
|
You can also add your own images and assets which can then be used by the CSS and JS files.
|
||
|
|
|
||
|
|
### Example : customizing the logo
|
||
|
|
|
||
|
|
You may create your own theme simply to change the "branding" of the Yunohost user portal and replace the YunoHost logo with you own !
|
||
|
|
|
||
|
|
To do so, upload your logo to `/usr/share/ssowat/portal/assets/themes/your_own_theme/`, and use the following CSS rules :
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* Inside custom_portal.css */
|
||
|
|
#ynh-logo {
|
||
|
|
background-image: url("./your_logo.png");
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inside custom_overlay.css */
|
||
|
|
#ynh-overlay-switch {
|
||
|
|
background-image: url("./your_logo.png");
|
||
|
|
}
|
||
|
|
```
|