3.4 KiB

Czysty Wina Historia

Customize the Funkwhale frontend

You can customize the look and behavior of the Funkwhale UI using a JSON configuration file. This file enables you to make very basic changes to the Funkwhale web app.

Set up your custom configuration

Create your configuration file

To customize your Funkwhale pod, you need to serve a {file}settings.json file at https://yourinstanceurl/settings.json. Follow these steps to set up your configuration file:

SSH into your Funkwhale server.
Navigate to your /srv/funkwhale folder
```
cd /srv/funkwhale
```
Create a new custom directory for your file.
```
mkdir custom
```

Create a new config file and populate it with placeholder settings.

cat <<EOF > custom/settings.json
{
"additionalStylesheets": [],
"defaultServerUrl": null
}
EOF


```{list-table}
:header-rows: 1

* - Parameter
   - Data type
   - Description
   - Example

* - `additionalStylesheets`
   - Array<URL>
   - A list of URLs (relative or absolute) pointing to stylesheets.
   - `["https://test/theme.css"]`

* - `defaultServerUrl`
   - URL
   - The URL of the API server you want to connect the frontend to. Defaults to the current domain.
   - `"https://api.yourdomain.com"`

```

Configure your reverse proxy

Once you've created your {file}settings.json file you need to configure your reverse proxy to serve it.


Add the following snippet to your {file}`/etc/nginx/sites-available/funkwhale.conf` config file:

```
location /settings.json {
   alias /srv/funkwhale/custom;
}
```


Add the following snippet to your webserver configuration:

```
Alias /settings.json /srv/funkwhale/custom/settings.json
```

Reload your webserver. You should be able to see the contents of your configuration file at https://yourinstanceurl/settings.json.

Add a custom theme

You can use a custom stylesheet to theme your Funkwhale pod. To do this:

Navigate to your {file}/srv/funkwhale/custom directory.
```
cd /srv/funkwhale/custom
```

Copy your CSS file to this directory, or create a new one.

# A basic CSS file. Turns the pod's background red.

cat <<EOF > custom.css
body {
background-color: red;
}
EOF

Add the location of your CSS file to the additionalStylesheets parameter in your {file}settings.json file.

nano settings.json

# Add ["/front/custom/custom.css"] to the additionalStylesheets parameter
# The resulting file looks like this:
# {
#   "additionalStylesheets": ["/front/custom/custom.css"],
#   "defaultServerUrl": null
# }

Add the whole {file}custom dir to your webserver configuration.


Add the following to your {file}`/etc/nginx/sites-available/funkwhale.conf` file:

```
location /custom {
   alias /srv/funkwhale/custom;
}
```


Add the following to your webserver configuration file.

```
Alias /custom /srv/funkwhale/custom

<Directory "/srv/funkwhale/custom">
Options FollowSymLinks
AllowOverride None
Require all granted
</Directory>
```

Restart your webserver.

Refresh your Funkwhale app. The background should now be red.

3.4 KiB Czysty Wina Historia