Quick tutorial : How to edit YunoHost Portal main color?

Discuss Tutorials
,
1

Français

For english version, see below.

Voici un court tutoriel pour vous montrer comment changer la couleur principale de l’interface utilisateur YunoHost, le portail. Par défaut, il s’agit du violet. Je n’ai pas trouvé de tutoriel sur le forum ou dans la documentation et je trouve que cela manque, alors je me lance.

Allez dans l’interface administrateur YunoHost Admin, puis dans Domaines, choisissez le domaine pour lequel changer la couleur. Le portail YunoHost est paramétrable domaine par domaine et peut donc avoir plusieurs thèmes, plusieurs logos ou applications en fonction du domaine.

Dans l’onglet Fonctionnalités (affiché par défaut), tout en bas de la page, dans CSS personnalisé, entrez le code suivant :

.btn-primary {
    background-color: #286566 !important;
    border-color: #286566 !important;
    color: #eaf0f0 !important;
}

Dans mon exemple, j’ai choisi une couleur bleu-vert #286566 que j’ai appliquée sur le fond du bouton (background) et sur son contour (border). Etant donné que cette couleur est foncée, j’affiche le texte en gris très clair #eaf0f0 (color). Ces couleurs sont “codées” dans le format hexadécimal. Le mot clé !important permet d’outrepasser le style de base de YunoHost.

Enregistrez puis allez sur le portail SSO YunoHost. Pensez à tester l’affichage en mode navigateur sombre et en mode clair.

English

Pour la version française, voir ci-dessus.

Here’s a short tutorial to show you how to change the main color of the YunoHost user interface, the portal. By default, it’s purple.

Go to the YunoHost Admin interface, then to Domains, and select the domain for which you want to change the color. The YunoHost portal can be configured on a per-domain basis and can therefore have multiple themes, logos, or applications depending on the domain.

In the Features tab (displayed by default), at the very bottom of the page, under Custom CSS, enter the following code:

.btn-primary {
    background-color: #286566 !important;
    border-color: #286566 !important;
    color: #eaf0f0 !important;
}

In my example, I chose a blue-green color #286566 and applied it to the button’s background and border. Since this color is dark, I’ve set the text color to very light gray #eaf0f0. These colors are “coded” in hexadecimal format. The !important keyword overrides YunoHost’s default styling.

Save your changes, then go to the YunoHost SSO portal. Be sure to test the display in both dark and light browser modes.

5 Likes