Assistance graphique et formation css pour site Joomla

Évaluer cet élément
(0 Votes)

Vous souhaitez apporter quelques améliorations graphiques à votre site. Vous pouvez les sous-traiter à un prestataire mais cela impose que vous connaissiez exactement toutes les modifications à réaliser et que vous n'en ayez plus à réaliser. C'est bien sûr peu probable, il vous faut alors maîtriser les bases de la gestion graphique de votre site, à savoir les css, pour apporter vous-mêmes des modifications au fil de vos idées.

Nous adaptons le rythme et la durée de la formation selon vos connaissances et vos besoins.
La formation est donc spécifique pour faire évoluer votre site Joomla.


Durée : entre 1h30 et 4h selon vos connaissances/besoins. 

Tarif : 40€ / heure (pas de TVA)

Précision importante : le sujet des css est inépuisable et peut donner lieu à des dizaines/centaines d'heures de formation pour devenir un spécialiste très pointu. Ce n'est pas l'objet de cet article qui s'adresse à des néophytes (ou presque) en donnant quelques idées de ce que peut apporter une formation à la carte.

1- Notions de base des css

Le stockage des styles css se situe dans un fichier dédié. Il est dès lors très facile de les copier d'un site vers un autre (d'un site de test en local vers le site de production par exemple).
Pourquoi une bonne gestion des css a un impact sur la qualité donc le référencement global du site.
L'utilisation de la console Chrome/FF et ses subtilités.

2- Les sélecteurs

Les balises HTML, les sections (template Gantry), les classes, les Id... et leur "poids".
Les règles d'écritures et les hiérarchies.
L'exception !important
L'utilité de l'éditeur JCE de Joomla pour :
. gérer les classes
. aligner des éléments horizontalement ET responsive

3- Quelques propriétés simples et utiles

CENTRER A COUP SÛR AVEC LES 2 PROPRIETES
text-align: center
margin: x auto

 

COULEUR DE FOND ET OPACITE

background : rgba(0,0,0,0.5)

Exemple sur https://www.famillejaume.com/, en survol de l'élément ci-dessous

background opacite

 

PLACER UNE IMAGE DE FOND

toutes les propriétés associées à background-image ou background

ci-contre 2 notions d'image de background : le dégradé ET l'image des points reliés entre-eux

 

SOULIGNEMENT AJUSTÉ Á LA LARGEUR DU CONTENU ET NON DU CONTENEUR

border-bottom: 1px solid #9a1915    et
width: fit-content

si on ne fait pas appel à "width: fit-content" le soulignement va s'étendre à toute la largeur du conteneur du titre

 

PLACER ET STYLER UNE ICONE DE LISTE

En 2 étapes :

sur ul ne pas afficher les puces standard du HTML
puis
par li:before paramétrer les propriétés de l'icône (font-family, taille, couleur ...)

 

UN DESIGN DE BLOCS ELEGANT

border-radius pour faire en sorte que les coins soient moins "aigus"

box-shadow (nombreux exemples sur ce site https://getcssscan.com/css-box-shadow-examples)

4- Conventions d'écriture

Définir une variable (par exemple pour un code hexadécimal de couleur),
Raccourcis de codes hexadécimaux de couleur
Possibilités de raccourcis pour margin et padding
Du css spécifique à une page
Comment placer des commentaires
Quelques classes courantes : even/odd pour styler les éléments pairs et impairs d'une liste, les classes bootstrap
Guillemets ou simples cotes sont équivalents : font-family:"Trade-Gothic-Next" ou font-family:'Trade-Gothic-Next'
Appliquer pour "width" des unités (px ou rem) ou bien des % ?

5- Propriété "position" et principe du flux

Par défaut, le flux HTML positionne les éléments les uns à côté des autres, de gauche vers la droite, tant qu'ils ont de la place dans le conteneur global. Lorsqu'il n'y a plus de place à droite, le dernier élément se positionne logiquement en-dessous. Il est possible de s'affranchir du flux par défaut et de disposer certains blocs exactement où on le souhaite, et comment on le souhaite.

Exemple 1 : position : fixed permet de positionner de façon fixe un élément, indépendamment du scroll


Exemple sur ce site https://www.interstices-auvergnerhonealpes.fr/, l'icône de connexion ne bouge pas si on scrolle vers le bas.

css position fixed

Exemple 2 : position : absolute permet de positionner des éléments de façon ordonnée au sein d'un conteneur. Par exemple dans l'exemple ci-joint sur la page https://www.mora-int.fr/, on aligne les boutons "EN SAVOIR +" à la même hauteur, indépendamment de la longueur du texte.

css position absolute

 

6- Propriété "display"

Très pratique cette propriété css peut permettre de forcer le flux d'affichage des éléments les uns en-dessous des autres, les uns à côté des autres.

Exemple 1:

Voici une illustration d'un ajustement pour mobile (avec "display: contents") de l'affichage par onglets sur desktop - page https://www.interstices-auvergnerhonealpes.fr/le-programme-regional/demarche-historique

css display onglets pour mobile

Exemple 2:

Une propriété très pratique pour le responsive : "display:flex". Par exemple, associée à "flex-direction:column", les éléments seront affichés en colonne au lieu de l'alignement horizontal standard. De plus la taille des éléments sera ajustée selon la taille de l'écran.

Egalement l'alignement vertical entre 2 éléments côte à côte de hauteur différente sera géré le plus facilement avec "display:flex" et "align-items:center".

Exemple 3:

La propriété "display:none" permet dans de nombreux cas de ne pas afficher un élément inutile. Très pratique.

7- Pseudo-classes : comment les utiliser

:hover pour styler un survol
:after et :before pour styler avant ou après un élément, souvent pour placer une icône
On peut bien sûr combiner :hover:after.
:nth-child(n) pour styler l'élément n d'une liste
la propriété transition pour styler le changement d'effet en douceur

8- Gestion des affichages mobile, desktop et tailles intermédiaires

Les pseudo-classes hidden-phone, visible-phone etc... 
Les bonnes pratiques pour un affichage optimum des images (fixes, diaporama) sur mobile.
Comment utiliser @media.
Les inconvénients de la propriété float sur mobile.
Les propriétés display:flex ET flex-direction :column-reverse utiles pour mobile pour un affichage image/texte/image/texte alterné sur mobile.

9- Un exemple d'effet en survol avec les css

Vous êtes un professionnel

Eclats d'Arômes est votre partenaire idéal pour votre Evénement

Dernière modification le 05 06 2022