06 ‐ Styliser l'application pour votre établissement

Il est possible via l'utilisation de variables CSS de modifier l'apparence de votre instance. Ces modifications de CSS sont à réaliser dans le fichier public/css/local.css. Ce fichier n'est pas versionné et ne sera par conséquent pas écrasé lors des montées en version.

Les propriétés par défaut sont défini dans public/css/default.css et peuvent servir d'exemple pour les modification que vous désirez appliquer. Ce fichier default.css est chargé avant local.css ainsi toute propriété déclarée dans local.css remplacera celle par défaut.

Le logo

Le logo de l'établissement en pied de page est encapsuler dans un div dont il est possible de jouer sur la propriété backgound-image pour indiquer celui que l'on désire.

En jouant avec les propriétés CSS vous pouvez ajuster celui-ci comme vous l'entendez. Voici un exemple :

footer div#etablissement {
    /** positionnement du logo **/
    position: relative;
    top: 50px;
    display: inline-block;
    height:85px;
    width:160px;
    /** lien et propriétés basiques **/
    background-repeat: no-repeat;
    background-image: url('../img/logo-universite.png');
    /** redimensionnement **/
    background-size: 160px 60px;
}

Note: Ici le chemin ../img/logo-universite.png fait référence au répertoire public/img une bonne pratique est de déposer votre logo dans ce même répertoire.

Les couleurs

Les couleurs des portails EMC2 et Mes Formations sont adaptables à vos chartes graphiques via la manipulation de variables CSS.

La stylisation de EMC2 est encapsulé dans un bloc unistrap-th-emc2 et pour mes formations unistrap-th-formations. Dans ces blocs vous pouvez redéfinir les couleurs de bases habillant le site.

.unistrap.unistrap-th-emc2 {
    --unistrap-color-main: rgb(55, 104, 155);
    --unistrap-color-dark: rgb(15,64,95);
    --unistrap-color-light: rgb(155, 204, 255);

    --bs-success: rgb(0, 100, 0);
    --bs-success-rgb: 0, 100, 0;
    --bs-danger: rgb(200, 0, 0);
    --bs-danger-rgb: 200,0,0;
    --bs-info: rgb(0, 0, 100);
    --bs-info-rgb: 0,0,255;
    --bs-warning: Sienna;
    --bs-warning-rgb: 160, 82, 45;
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary: #6c757d;
    --bs-secondary-rgb: 108, 117, 125;
}

Les polices de caractères

Il est possible de déclarer des polices spécifiques en CSS afin de pouvoir les référencer dans vos CSS par la suite. Vous pouvez déclarer celle-ci dans le fichier public/css/local-font.css qui est chargé par l'application. Ce fichier n'est pas versionné et ne sera par conséquent pas écrasé lors des montées en version.

Exemple de déclaration :

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/ubuntu-v15-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/ubuntu-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/ubuntu-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/ubuntu-v15-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/ubuntu-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/ubuntu-v15-latin-300.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

Note: Tous les formats de police ne sont pas nécessaires ; vous pouvez vous limiter aux formats à votre disposition.

Ensuite, vous pouvez référencer celles-ci dans le fichier local.css dans les balises font-family.

h1.page-header {
    font-family: "Ubuntu", Arial;
    color: rgb(40,40,40);
}

Pour changer globalement la police sur le site vous pouvez aussi vos référer la propriété bs-body-font-family, comme c'est le cas dans les déclarations des thèmes unistrap-th-emc2 et unistrap-th-formations.

Changements au fil des versions

4.4.8

• Le fichier logo.css semblait redondant avec le fichier local.css, les deux ont été fusionnés dans local.css
• Retrait de local.css du versionning.

Quelques exemples de stylisation

À la UNISTRA (17/04/2024)

Fichier font-local.css

/* ubuntu-300 - latin */
@font-face {
    font-family: 'UnistraA';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/UnistraA-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'UnistraA';
    font-style: italic;
    font-weight: 300;
    src: local(''),
    url('../fonts/UnistraA-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'UnistraA';
    font-style: normal;
    font-weight: bold;
    src: local(''),
    url('../fonts/UnistraA-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'UnistraC';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/UnistraC-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'UnistraC';
    font-style: normal;
    font-weight: bold;
    src: local(''),
    url('../fonts/UnistraC-Bold.woff2') format('woff2');
}

Fichier local.css

footer div#etablissement {
    position: relative;
    top: 50px;
    height:85px;
    width:160px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url('../img/logo_unistra.png');
    background-size: 160px 61px;
}

.unistrap {
    --bs-body-font-family: "UnistraA", cursive;
}

.unistrap.unistrap-th-formations {
    --unistrap-color-main: rgb(205, 169, 114);
    --unistrap-color-dark: rgb(155, 119, 64);
    --unistrap-color-light: rgb(255, 220, 220);
}

.unistrap-th-formations h1.title,
.unistrap-th-formations .navbar.navbar-main .nav-link{
    font-family: "UnistraC", Arial;
    color: rgb(40,40,40);
    font-weight: bold;
}


.unistrap-th-formations h1.page-header {
    font-family: "UnistraC", Arial;
    color: rgb(40,40,40);
}

Rendu