artus/mystic_forest
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

updates readme.md

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-26 14:48:40 +02:00
parent 652fec2637
commit 66e6402ebb
1 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@@ -1,25 +1,22 @@
# Mystic Forest # Mystic Forest
Thème pour le portail SSOWat Thème pour le portail SSOWat.
## Description ## Description
Un thème personnalisé pour le portail SSOWat qui tire grand profit des propriétés CSS Flex. La répartition des éléments est modifiée de la manière suivante : Ce thème est basé sur le thème par défaut et tire profit de CSS Flex pour personnaliser l'interface.
1. Page d'identification : le logo est collé au formulaire. Avec une image sur mesure et quelques couleurs modifiée, cela rend plutôt bien. 1. Page d'identification : utilise un bloc visuel pour l'identification, avec une image personnalisée en entête.
2. Page du portail : la boîte utilisateur reprend la structure de la boîte d'identification. La liste des applications est placée en vis-à-vis de la boite utilisateur. 2. Page du portail : la boîte utilisateur est semblale au bloc d'authentification. La liste des applications est placée en vis-à-vis de la boite utilisateur.
## Personnaliser l'image ## Personnaliser le thème
Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran). Les sources contiennent une base pour le logo. Pour mon usage personnel, j'ai ajouté le nom de mon instance (cf captures d'écran).
Il ne devrait pas être trop difficile d'utiliser une image complètement différente. J'ai défini des variables afin de faciliter l'utilisation d'une image différente. *Normalement,* il devrait être possible d'avoir l'affichage désiré en modifiant seulement la valeur des variables.
**Voici quelques notes si vous souhaitez vous y essayer.** ### Explication des variables
Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.
L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.
(...)
Une fois l'image modifiée, il faut adapter les dimensions de la boîte. Une fois l'image modifiée, il faut adapter les dimensions de la boîte.
1. Renseigner la taille exacte `{ width: ...px, height: ...px }` pour la page d'identification et c'est bon. 1. Renseigner la taille exacte `{ width: ...px, height: ...px }` pour la page d'identification et c'est bon.
2. Pour la boîte "utilisateur", c'est un peu plus complexe. 2. Pour la boîte "utilisateur", c'est un peu plus complexe.
@@ -27,4 +24,10 @@ Une fois l'image modifiée, il faut adapter les dimensions de la boîte.
b. Il faut également modifier l'attribut `margin-left` des éléments de la boîte utilisateur. La valeur de celui-ci correspond à la distance entre le bord gauche de l'image de fond et le début de la ligne de base de 336px. Pour peu qu'elle soit bien centrée, ce qui est de toute façon nécessaire, c'est simplement b. Il faut également modifier l'attribut `margin-left` des éléments de la boîte utilisateur. La valeur de celui-ci correspond à la distance entre le bord gauche de l'image de fond et le début de la ligne de base de 336px. Pour peu qu'elle soit bien centrée, ce qui est de toute façon nécessaire, c'est simplement
```(largeur de l'image - 336) / 2``` ```(largeur de l'image - 336) / 2```
### Notes sur l'image
Nous avons conservé la taille originale de la boîte d'authentification, soit *21em ou 336px*. Ainsi, l'image utilisée en entête doit avoir une base de 336px pour conserver l'effet de bloc.
L'image peut être plus large, comme c'est le cas ici par exemple, mais il faut alors faire attention à bien centrer les 336 pixels de la dernière ligne qui seront collés aux autres éléments d'interface.
Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit. Le conteneur flex de l'image est paramétré pour ne pas rétrécir (flex-shrink: 0), afin de ne pas casser l'interface quand l'écran est trop petit.