C'est l'automne ! 
Super Brest : le site web : Différence entre versions
(→Catégorie) |
(→Variables des couleurs du site) |
||
| (25 révisions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
| − | == Qu'est-ce | + | == Qu'est-ce que c'est que ce site ?== |
C'est un SPIP, avec le squelette HTML5UP réalisé par [https://www.cousumain.info/ Cousu Main], fabricant de sites web mondiaux de Brest ! | C'est un SPIP, avec le squelette HTML5UP réalisé par [https://www.cousumain.info/ Cousu Main], fabricant de sites web mondiaux de Brest ! | ||
| Ligne 22 : | Ligne 22 : | ||
[[Fichier:PageContactSiteWebSuperBrest.png|600px]] | [[Fichier:PageContactSiteWebSuperBrest.png|600px]] | ||
| + | |||
| + | ==Configurer les couleurs du site== | ||
| + | Dans le plugin squelette super Brest, modifier les variables qu'on trouve en début de fichier /css/perso.css. | ||
| + | |||
| + | ===Variables des couleurs du site=== | ||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! Variable !! Effet sur le site !! Exemple joint !! Dans l'en-tête !! Bloc N°1 !! Bloc N°2 !! Bloc N°3 !! Pied de Page | ||
| + | |- | ||
| + | | --coul-entete || la couleur de l'entête (rouge 2021) || style="background-color:#ec6546;"| || Couleur du fond || - || Titre du bloc : "PRESENTATION" || - || Couleur du bouton au survol | ||
| + | |- | ||
| + | || --coul-entete-alpha || la couleur de l'entête avec de la transparence pour le menu || style="background-color:#ec6546;"| || - || - || - || - || - | ||
| + | |- | ||
| + | || --coul-emphase || Couleur du 1er bloc de l’accueil + certains boutons (bleu 2021) || style="background-color:#2c4a9a;"| || Couleur des textes + couleur du fond des textes au survol (qui deviennent blanc) || Couleur du fond || Couleur des titres intermédiaires || Couleur des titres et des boutons || Couleur des titres et du boutons | ||
| + | |- | ||
| + | || --coul-emphase-alpha || la 1ère couleur d'emphase avec de la transparence || style="background-color:#2c4a9a;"| || - || - || - || - || - | ||
| + | |- | ||
| + | || --coul-emphase2 || le texte du 1er bloc d'accueil + certains boutons (jaune 2021) || style="background-color:#f6ae20;"| || - || Couleur du texte et du bouton || - || - || - | ||
| + | |- | ||
| + | || --coul-emphase2-alpha || la 2nde couleur d'emphase avec de la transparence || style="background-color:#f6ae20;"| || - || - || - || - || - | ||
| + | |- | ||
| + | || --coul-fond || le couleur du 2e bloc de l'accueil et du fond des articles (beige 2021) || style="background-color:#faf2e4;"| || - || - || Couleur du fond || - || - | ||
| + | |} | ||
| + | |||
| + | Le fond du bloc N°3 est toujours Blanc. | ||
| + | |||
| + | Le fond du pied de page est Gris très sombre fixe. | ||
| + | |||
| + | Pour passer les couleurs de hex à RGBA : https://rgbacolorpicker.com/hex-to-rgba | ||
| + | |||
| + | Par exemple : | ||
| + | * #ec6546, équivaut à : | ||
| + | * rgba(236, 101, 70, 1) | ||
| + | |||
| + | ===Pages types=== | ||
| + | |||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! Page Type Accueil !! Page Type Rubrique | ||
| + | |- | ||
| + | | [[Fichier:SiteWebSuperbrest-PageTypeAccueil.png|200px]] | ||
| + | || [[Fichier:SiteWebSuperbrest-PageTypeRubrique.png|200px]] | ||
| + | |} | ||
==Configurer la bannière (page d'accueil)== | ==Configurer la bannière (page d'accueil)== | ||
| Ligne 75 : | Ligne 118 : | ||
==compte à rebours page d'accueil== | ==compte à rebours page d'accueil== | ||
| + | un jolie compte à rebours fait avec : https://www.tickcounter.com | ||
<html> | <html> | ||
| − | <div style="left:0; width:100%; height:0; position:relative; padding-bottom:25%; margin:0 auto"><iframe src="https://www.tickcounter.com/widget/countdown/ | + | <div style="left:0; width:100%; height:0; position:relative; padding-bottom:25%; margin:0 auto"><iframe src="https://www.tickcounter.com/widget/countdown/5811789" style="top:0; left:0; width:100%; height:100%; position:absolute; border:0; overflow:hidden" title="Super Brest 2024"></iframe></div> |
</html> | </html> | ||
| + | |||
| + | ==Page d'accueil== | ||
| + | |||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! 2024 !! 2023 !! 2022 !! 2021 | ||
| + | |- | ||
| + | | [[Fichier:Page site web simulation couleurs2024.png|200px]] | ||
| + | || [[Fichier:Page site web simulation couleurs2023.png|200px]] | ||
| + | || [[Fichier:Page site web simulation couleurs2022.jpeg|200px]] | ||
| + | || [[Fichier:Page site web simulation couleurs2021.png|200px]] | ||
| + | |} | ||
| + | |||
| + | ==Améliorations== | ||
| + | * mail : doublon de bas de page. | ||
| + | |||
| + | |||
==Catégorie== | ==Catégorie== | ||
[[Catégorie:Super Brest]] | [[Catégorie:Super Brest]] | ||
Version du 12 mars 2025 à 15:18
Sommaire
[masquer]Qu'est-ce que c'est que ce site ?
C'est un SPIP, avec le squelette HTML5UP réalisé par Cousu Main, fabricant de sites web mondiaux de Brest !
Vous trouvez Le tutoriel officiel du site sur Contrib.Spip
Configurer les contacts
Pour configurer les contact du site Super Brest. Il faut aller dans l'interface privé et choisir configuration>Identité du site
et configurer en fonction de ses besoins :
Pour le mail c'est ici :
Et hop !
Configurer les couleurs du site
Dans le plugin squelette super Brest, modifier les variables qu'on trouve en début de fichier /css/perso.css.
Variables des couleurs du site
| Variable | Effet sur le site | Exemple joint | Dans l'en-tête | Bloc N°1 | Bloc N°2 | Bloc N°3 | Pied de Page |
|---|---|---|---|---|---|---|---|
| --coul-entete | la couleur de l'entête (rouge 2021) | Couleur du fond | - | Titre du bloc : "PRESENTATION" | - | Couleur du bouton au survol | |
| --coul-entete-alpha | la couleur de l'entête avec de la transparence pour le menu | - | - | - | - | - | |
| --coul-emphase | Couleur du 1er bloc de l’accueil + certains boutons (bleu 2021) | Couleur des textes + couleur du fond des textes au survol (qui deviennent blanc) | Couleur du fond | Couleur des titres intermédiaires | Couleur des titres et des boutons | Couleur des titres et du boutons | |
| --coul-emphase-alpha | la 1ère couleur d'emphase avec de la transparence | - | - | - | - | - | |
| --coul-emphase2 | le texte du 1er bloc d'accueil + certains boutons (jaune 2021) | - | Couleur du texte et du bouton | - | - | - | |
| --coul-emphase2-alpha | la 2nde couleur d'emphase avec de la transparence | - | - | - | - | - | |
| --coul-fond | le couleur du 2e bloc de l'accueil et du fond des articles (beige 2021) | - | - | Couleur du fond | - | - |
Le fond du bloc N°3 est toujours Blanc.
Le fond du pied de page est Gris très sombre fixe.
Pour passer les couleurs de hex à RGBA : https://rgbacolorpicker.com/hex-to-rgba
Par exemple :
- #ec6546, équivaut à :
- rgba(236, 101, 70, 1)
Pages types
| Page Type Accueil | Page Type Rubrique |
|---|---|
|
|
Configurer la bannière (page d'accueil)
Pas à pas :
1 - se connecter à l'interface privée de SPIP
2 - vous rendre sur la page de configuratino du squelette
3 - C'est ici qu'on configure la bannière
4 - Tout en bas de la page cliquez sur enregister
5 - C'est fait !
6 - L'ancienne page d'accueil est toujours dans le cache de SPIP,
7 - Cliquez sur "recalculer cette page" : La page est mise à jour avec la nouvelle image
Pour charger un nouveau média :
Tant que je vous ais : N'oubliez pas que c'est la fin de l'abondance, n'oubliez pas de réduire la taille de vos images.
J'ai d'abord redimensionné mon image à la bonne taille en pixels(2673 × 1368) puis mis à 72 dpi (ou ppp) et enfin, j'ai utilisé : https://compressor.io/
Maintenance
Concernant les mises à jour :
- pour être informé : s'abonner au Discourse de la communauté principalement la rubrique "Annonces" https://discuter.spip.net/
- pour lancer la mise à jour, Seuls les admins peuvent le faire : aller sur https://www.superbrest.info/spip_loader.php en étant identifié et lancer la mise à jour.
- une fois la mise à jour finalisée : aller dans les plugins (menu Configuration) pour finaliser la mise jour
Il est possible d'avoir des erreur 500 (time out) due à une limitation chez l'hébergeur. Normalement, ça ne pose pas de problème, il suffit de recharger la page. Si ça ne suffit pas, connectez vous directement à l'espace privé.
compte à rebours page d'accueil
un jolie compte à rebours fait avec : https://www.tickcounter.com
Page d'accueil
| 2024 | 2023 | 2022 | 2021 |
|---|---|---|---|
|
|
|
|
Améliorations
- mail : doublon de bas de page.
