3 — modification des templates

Le Deal du moment : -21%

LEGO® Icons 10329 Les Plantes Miniatures, ...

Voir le deal

39.59 €

3 — modification des templates

GHOSTLY DAZE :: CODES DU LIBRE SERVICE :: installation du thème et ses codes :: prise en main

@ poesiescendrees

Admin

Messages : 132
Date d'inscription : 24/11/2020

Sam 9 Jan - 22:45

adapter les codestemplates et messages

Si vous voulez pour une raison ou pour une autre modifier les templates au-delà des petits changements visuels (polices d'écritures, couleurs & co) ou créer des nouveaux codes de templates ou messages à partir de ceux présents, vous pouvez lire les posts ci-dessous expliquant la structure générale des templates.

me contacter

@ poesiescendrees

Admin

Messages : 132
Date d'inscription : 24/11/2020

Dim 10 Jan - 0:26

les classes esthétiques

Certaines classes sont données aux éléments afin que ces derniers adoptent certains comportements ou certains aspects. On peut aisément cumuler ces classes afin d'obtenir le rendu voulu. Par exemple je dote un div des classes class="simple dark highlight" pour qu'il ait des marges intérieures & extérieures (simple), pour qu'il ait un background foncé (dark) et que quand on le survole la couleur change légèrement (highlight).

Ca nous donne ce div-là.

Code:: <div class="simple dark highlight">texte</div>

Il vous suffit de créer un div (ou autre élément html) et de lui rajouter les classes que vous souhaitez pour additionner des effets d'apparence. Basiquement, mis à part pour la class .highlight, toutes les classes se cumulent comme vous le souhaitez.

Liste des classes :

simple : marges intérieures et extérieures
simple small (cumulés) : marges intérieures plus petites
light : background discret, coins arrondis & shadow
middle : background moyen, coins arrondis & shadow
dark : background foncé, coins arrondis & shadow
highlight (cumulé avec light, midde ou dark) : background qui change au survol

uppercase : tout en majuscule
lowercase : tout en minuscule

left-align : texte aligné à gauche
center-align : texte centré
right-align : texte aligné à droite

Je vous fournis la liste des classes "d'esthétique" en spoiler avec les exemples:

me contacter

@ poesiescendrees

Admin

Messages : 132
Date d'inscription : 24/11/2020

Dim 10 Jan - 0:41

les classes de comportement

Même principe que les classes d'apparence et cumulables avec elles mais peut-être plus difficiles à utiliser :

— la balise de scroll : si vous voulez définir une certaine taille à vos blocs, ne mettez pas overflow: auto dans le CSS mais placez une balise < scroll> juste dans le bloc, comme ceci :

Code:: <div class="bloc_dune_certaine_taille"><scroll>texte</scroll></div>

ça vous évitera que la marge intérieure du bloc ne se fasse bouffer par le overflow: auto (oui c'est une différence minime mais c'est pas très beau mdrrr, surtout quand e sont de grandes marges). si vous voulez checker la différence :

utilise overflow:auto Aliquam non tortor metus. Vestibulum non ultricies mauris. In hac habitasse platea dictumst. Integer accumsan ante sit amet orci fringilla dictum. Integer maximus velit vitae libero lacinia eleifend. Donec augue erat, efficitur suscipit tincidunt et, aliquet eget augue. Suspendisse consequat arcu a sapien blandit, nec ultrices urna pellentesque. Nullam tristique ut nibh ac placerat. Proin eu felis sed tortor ullamcorper suscipit ut congue turpis. Curabitur dignissim enim odio, quis convallis felis efficitur at. Nulla commodo mi nec dictum mollis.

utilise une balise scroll Aliquam non tortor metus. Vestibulum non ultricies mauris. In hac habitasse platea dictumst. Integer accumsan ante sit amet orci fringilla dictum. Integer maximus velit vitae libero lacinia eleifend. Donec augue erat, efficitur suscipit tincidunt et, aliquet eget augue. Suspendisse consequat arcu a sapien blandit, nec ultrices urna pellentesque. Nullam tristique ut nibh ac placerat. Proin eu felis sed tortor ullamcorper suscipit ut congue turpis. Curabitur dignissim enim odio, quis convallis felis efficitur at. Nulla commodo mi nec dictum mollis.

— la class "table_js" : elle permet d'aligner verticalement au centre un texte, comme ça par exemple pour un div qui a une hauteur de 200px :

texte

Code:: <div class="table_js" style="height: HAUTEURpx;">texte</div>

N'hésitez pas à ajouter une classe center-align pour que ça soit parfaitement centré :

texte

Code:: <div class="table_js center-align" style="height: HAUTEURpx;">texte</div>

De plus, je vous conseille de rajouter une balise scroll à l'intérieur au cas où il y a beaucoup de texte et qu'il finisse par être plus grand. Comme ça, il sera centré sur le milieu et scrollera si plus long :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer venenatis nibh a felis euismod vehicula. Cras condimentum eros sapien, ac pharetra felis suscipit id. Aenean pulvinar est at diam porttitor, fringilla tempor nulla tempus. Etiam congue felis ut pretium eleifend. Nulla in pretium turpis. Proin vulputate tellus quis felis fermentum molestie. Pellentesque vulputate neque sit amet turpis convallis auctor. Nulla facilisi. Morbi mollis sit amet dolor vel sollicitudin.

Pellentesque viverra id nibh non sagittis. Etiam non rhoncus justo, eget bibendum mauris. Sed mattis ut sapien sit amet rhoncus. Vivamus purus diam, porttitor sit amet feugiat id, bibendum ultrices mi. Curabitur vel enim vestibulum, molestie massa eu, placerat leo. Suspendisse tempus lobortis risus non tempus. Nunc vel turpis lectus. Etiam ex augue, rutrum nec nisl a, bibendum tincidunt eros. Curabitur mollis turpis nunc, eu elementum massa eleifend sed.

Ut vel erat a nulla eleifend fermentum at id nisi. Vestibulum at risus eget mauris pellentesque fringilla. Nunc ut nisl vestibulum, eleifend sapien a, blandit sapien. Vestibulum ullamcorper consequat iaculis. Nulla molestie nibh metus, quis consectetur dolor tristique at. Integer libero lectus, varius vel nulla eu, posuere viverra ligula. Aenean laoreet ornare diam. Suspendisse sit amet feugiat felis. Aliquam maximus et erat eu lobortis.

Nulla facilisi. Phasellus rutrum laoreet dui elementum fermentum. Nunc eget interdum ligula, nec scelerisque augue. Nullam tincidunt placerat viverra. Aenean eu pharetra mauris. Pellentesque et orci augue. Phasellus a blandit lectus. Sed eget tortor id neque aliquet porttitor ac vitae mi. Sed volutpat augue leo, et tristique tellus tempus nec. Nunc iaculis nunc in dignissim blandit. Pellentesque feugiat cursus ante sed varius. Vivamus sollicitudin interdum mauris eget cursus. Etiam magna leo, sodales vulputate purus et, semper pretium sapien. Proin cursus ipsum a lorem tempor, tincidunt elementum metus ornare. Vestibulum suscipit est elit, vel dapibus ante faucibus sed. In hac habitasse platea dictumst.

Quisque rhoncus velit non ligula iaculis, eu fermentum felis cursus. Aliquam augue lorem, tempor ac suscipit ut, sollicitudin sed risus. Proin a laoreet elit, sit amet ullamcorper ipsum. Nulla suscipit tortor sed nisl molestie imperdiet. Vivamus eget justo eu mauris pellentesque pulvinar. Integer mi ligula, pharetra euismod risus quis, cursus semper ex. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer sed ante tincidunt dolor egestas fermentum. Ut cursus ligula sit amet magna varius, nec vulputate tortor commodo. Aliquam venenatis neque at turpis tincidunt, vitae faucibus arcu convallis. Vestibulum mollis viverra vestibulum.

Code:: <div class="table_js center-align" style="height: HAUTEURpx;"><scroll>texte</scroll></div>

— la class "flexrow" : ça vous pemet d'aligner autant d'éléments que vous voulez sur une seule ligne comme au-dessus, deux ou plus. Vous créez un div "flexrow" et ses enfants directs (que ce soient des div, des liens, images ou autres) se partagent l'espace à l'intérieur comme ça :

texte texte texte texte texte texte texte texte texte texte texte

texte

Code:: <div class="flexrow"><div class="simple middle">texte</div><div class="simple middle">texte</div><div class="simple middle">texte</div></div>

Je ne l'ai pas précisé au-dessus mais n'oubliez pas de mettre une balise scroll dans les enfants du coup, vu que le texte dépassera sûrement la hauteur du bloc. D'ailleurs si vous voulez qu'ils aient une certaine hauteur, mentionnez style="--height: HAUTEURpx;" dans le div parent (elle est automatiquement fixée à 200px). Ca vous donne :

texte texte texte texte texte texte texte texte texte texte texte

texte

Code:: <div class="flexrow" style="--height: HAUTEURpx;"><div class="simple middle"><scroll>texte</scroll></div><div class="simple middle"><scroll>texte</scroll></div><div class="simple middle"><scroll>texte</scroll></div></div>

Dernière précision à propos de cela, il est possible de définir la taille d'un bloc enfant(les autres se partageront l'espace restant) en lui ajoutant la class no-extend et en ajoutant style="height: HAUTEURpx;". Par exemple si nous voulons que le bloc du milieu du code ci-dessus soit en réalité une image de 80*80px, on met :

texte

Code:: <div class="flexrow" style="--height: HAUTEURpx;"><div class="simple middle"><scroll>texte</scroll></div><img src="URL_IMAGE" class="no-extend" style="width: LARGEURpx;"/><div class="simple middle"><scroll>texte</scroll></div></div>

On peut cumuler les blocs à la largeur forcée, tant qu'au moins 1 puisse "s'étendre" pour combler l'espace restant.

texte

Code:: <div class="flexrow" style="--height: HAUTEURpx;"><div class="simple middle"><scroll>texte</scroll></div><img src="URL_IMAGE1" class="no-extend" style="height: LARGEUR1px;"/><img src="URL_IMAGE" class="no-extend" style="height: LARGEUR2px;"/></div>

me contacter

@ Contenu sponsorisé

me contacter

Sujets similaires

permissions de ce forum

Vous ne pouvez pas répondre aux sujets dans ce forum

GHOSTLY DAZE :: CODES DU LIBRE SERVICE :: installation du thème et ses codes :: prise en main