Arborescence des pages

Vous regardez une version antérieure (v. /wiki/display/ES/Personnalisation+visuelle) de cette page.

afficher les différences afficher l'historique de la page

« Afficher la version précédente Vous regardez la version actuelle de cette page. (v. 12) afficher la version suivante »

Modifier le logo de l'établissement

Vous pouvez faire apparaitre en bas de page le logo de votre établissement.

Pour cela, placez votre logo dans le dossier `pod/main/static/custom/img`, et indiquez son chemin dans le fichier settings_local.py :

TEMPLATE_VISIBLE_SETTINGS = {
...

'LOGO_ETB': 'custom/img/logo_mon_etab.svg',
...
}

Si vous avez un logo d'établissement coloré

Nous vous invitons à prévoir également une 2e version "mode sombre" de votre logo, qui sera suffisamment contrastée sur fonds foncés. Placez le fichier dans le même dossier que le premier, puis dans votre fichier CSS personnalisé indiquez ceci :

[data-theme="dark"] .pod-footer-logo {
  background-image: url('/static/custom/img/logo_mon_etab_blanc.svg') !important
}

Si votre logo d'établissement est monochrome

Vous pouvez n'utiliser qu'un fichier, et en inverser les couleurs dans votre CSS personnalisé ainsi :

data-theme="dark"] .pod-footer-logo {
  filter: invert(100);
}


Changer les couleurs principales de Pod

Pour personnaliser le look de votre serveur Pod, vous pouvez ajouter votre propre feuille de style, en indiquant ceci dans le fichier settings_local.py :

TEMPLATE_VISIBLE_SETTINGS = {
...
'CSS_OVERRIDE''custom/theme-mon_etab.css',
...
}

Placez alors un fichier `theme-mon_etab.css` dans le dossier `pod/main/static/custom/`

Dans ce dernier, vous pouvez modifier les couleurs de Pod. Voici quelques exemples :

Vert Lillois
/*** Esup Pod custom CSS ***/
:root {
/* exemple vert univ-lille.fr 2022 */
--pod-primary: #1F8389;
--pod-primary-lighten: #08b0a0;
--pod-primary-darken: #18575D;

/* Mode sombre */
--pod-primary-dark: #1F8389;
--pod-primary-lighten-dark: #18575D;
--pod-primary-darken-dark: #08b0a0;
}


Rose "Pod v2"
/*** Esup Pod custom CSS ***/
:root {
/* exemple rose "pod v2" */
--pod-primary: #ae2573;
--pod-primary-lighten: #d782b3;
--pod-primary-darken: #93326a;

/* Mode sombre */
--pod-primary-dark: #ae2573;
--pod-primary-lighten-dark: #db258e;
--pod-primary-darken-dark: #93326a;
}


violet "BS 5"
/*** Esup Pod custom CSS ***/
:root {
/* exemple violet "BS 5" */
--pod-primary: #7952b3;
--pod-primary-lighten: #ad76ff;
--pod-primary-darken: #6528e0;

/* Mode sombre */
--pod-primary-dark: #7952b3;
--pod-primary-lighten-dark: #ad76ff;
--pod-primary-darken-dark: #6528e0;
}


bleu "default"
/*** Esup Pod custom CSS ***/
:root {
/* exemple bleu "default" */
--pod-primary: #0052cc;
--pod-primary-lighten: #0065ff;
--pod-primary-darken: #0048b4;

/* Mode sombre */
--pod-primary-dark: #0052cc;
--pod-primary-lighten-dark: #0065ff;
--pod-primary-darken-dark: #0048b4;
}





Voir cette page de configuration pour plus d'infos.

  • Aucune étiquette