Vous souhaitez apporter quelques améliorations graphiques à votre site, quel que soit le CMS (Wordpress, Joomla...). Vous pouvez les sous-traiter à un prestataire mais cela impose que vous ayez déterminé une liste exhaustive des modifications à mettre en place, et que vous n'en ayez plus à réaliser ultérieurement. C'est bien sûr peu probable car votre site va évoluer. 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.

Les connaissances de base pour réaliser 90% des modifications graphiques d'un site internet sont simples à acquérir, et ne nécessitent absolument pas d'être informaticien.

Nous adaptons le rythme et la durée de la formation selon vos connaissances et vos besoins. La formation est donc sur mesure pour vous permettre de faire évoluer votre site.

En complément, sur des points précis et plus complexes, je peux intervenir pour finaliser vos améliorations graphiques, et vous expliquer la démarche.

Durée : entre 1h30 et 4/5h 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 d'heures de formation pour devenir un spécialiste très pointu. Ce n'est pas l'objet de mes formations en css qui s'adressent à des néophytes (ou presque). Il existe de nombreuses ressources sur le net pour se spécialiser sur le sujet des css.

Les informations ci-dessous donnent 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).
  • En quoi 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

  • Connaitre et savoir écrire les principales balises HTML (c'est très simple)
  • Identifier les propriétés graphiques de ces balises HTML et comprendre comment elles sont gérées : sections, classes, Id...
  • Comprendre l'ordre, la hiérarchie et la priorité, ainsi que le "poids" de chaque propriété css.
  • Maîtriser quelques règles d'écriture (c'est facile et logique).
  • Comment tricher avec l'exception !important mais il ne faut pas en abuser!

Sous Joomla l'utilité de l'éditeur JCE pour :

  • gérer les classes css
  • aligner des éléments horizontalement ET responsive (les blocs se positionneront les uns en-dessous des autres automatiquement en vue mobile), ci-dessous un exemple avec 2 blocs insérés avec une simple icône en proportion 2/3 - 1/3. Il s'agit d'une procédure ultra-simple et efficace, qu'on peut rendre encore plus performante en comprenant comment cela se traduit dans le HTML (ce n'est pas difficile).

contenus responsive joomla

3- Quelques modifications graphiques rapides à maîtriser

  • Modifier la couleur d'une police de caractères
  • Modifier la couleur de fond d'un bloc
  • Modifier la taille d'un titre ou du site en entier
  • Gérer les marges externes (margin) ou internes (padding) d'un bloc
  • Créer un bouton pour habiller un lien, comme ci-dessous:

    Contact pour votre projet de formation graphique

  • Placer une bordure autour d'un bloc avec des coins arrondis
  • Gérer l'affichage d'une liste
    etc...

Ci-dessous quelques astuces pour aller plus loin:

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)

pour un effet ci-contre de 50% d'opacité

Exemple 2 blocs en bas de https://www.archilog.net/

css 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, padding-right ...)

UN DESIGN DE BLOCS ELEGANT

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

box-shadow pour un ombré visible mais discret (nombreux exemples sur ce site https://getcssscan.com/css-box-shadow-examples)

 

4- Conventions d'écriture des css

Apprendre les css nécessite un peu de rigueur. Celle-ci consiste à bien respecter et savoir lire les 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
  • Comment créer des css spécifiques à 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.plateformesante.fr/, l'icône info 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 place les boutons "EN SAVOIR +" à la même hauteur par rapport au bas du bloc parent, 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 affichage avec des onglets pour desktop, et qui, (avec "display: contents") se transforme pour mobile en affichage en accordéon - voir sur 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. C'est très pratique, même s'il existe d'autres solutions plus optimales en termes de performance.

 

7- Pseudo-classes : comment les utiliser

Voici les principales pseudo-classes utilisées couramment:

  • la propriété transition pour appliquer un changement d'effet en douceur (par exemple entre le survol puis le non survol d'un bouton)
  • :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.
  • :last-child pour styler le dernier élément d'une liste et :nth-child(n) pour styler l'élément n d'une liste.
    Exemple sur https://www.lamaisondezelie.net/ : 
    .g-main-nav .g-toplevel>li:last-child{
    background:#302237
    }
    pseudo element css last child

 

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

Ci-dessous une liste non exhaustive d'astuces css à connaitre pour un affichage mobile performant:

  • Comment visualiser à 99% fiable, l'affichage mobile dans les consoles Chrome et FF
  • 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

 

10- Mode avancé

Des exemples très bien expliqués (en anglais) de syntaxes que l'on peut trouver : https://techbrij.com/css-selector-adjacent-child-sibling

 

Ils me font confiance...

nosyweb

NosyWeb - acteur important du monde de Joomla en France

  • réalisation de sites et maintenance pour le compte de NosyWeb (graphisme, conception, rédactionnel, référencement)
  • rédaction de tutos spécifiques au CMS Joomla (conseils de sécurité, procédures de migration, trucs et astuces, ...)
  • formation des utilisateurs (plus de 20 clients)

Dextra Transport

Dextra Transports : maquettage et refonte graphique du site, ergonomie spécifique pour une double présentation projets / activités, nombreuses animations dont une vidéo en background.

PETR maconnais sud bourgogne

PETR - Mâconnais Sud Bourgogne : refonte graphique du site, mise en place des actualités et de la gestion des téléchargements, formation des utilisateurs, sécurisation du site et RGPD.

Assistance et formation Joomla Bourgogne, optimisation et sécurité site Joomla

Centre de Formation en Kinésiologie : création du site, formation à la gestion des événements (inscription avec paiement en ligne), blog professionnel et SEO, formation au référencement naturel pour chaque page événement.

gites entre loire et cher

Gites Entre Loire et Cher (4 gites, 2 chambres d'hôtes) : création du site, formation à l'administration des hébergements de tourisme avec le composant Rentalot Plus (réservations avec paiement en ligne), formation au référencement naturel.

gite proche Mercurey Chalon

Gites La Maison de Zélie : création du site multi-langues, administration des hébergements de tourisme avec le composant Rentalot Plus, newsletters, blog professionnel et SEO.

drone71 démoussage par drone

Drone71 : analyse et création du site, intégration d'animations dont une vidéo en background, intégration avis clients postés sur Google, nombreux types de visuels

groupe mora

MORA International : création du site, multi-langues, formation de 4 personnes (mettre à jour le site, faire évoluer les modules, la gestion des formulaires de candidatures,  référencement naturel).

mercurey bio domaine virot

Mercurey bio - Domaine Virot : création du site, carte des terroirs de Mercurey cliquable pour afficher les vins, portfolio et animations, référencement Mercurey bio et Mercurey 1er Cru bio.

Mary Sweeties pâtisseries Nice boutique en ligne

Mary's Sweeties : boutique en ligne de pâtisseries sous J2Store (paiement Stripe, options et variantes multiples), migration de Joomla3 vers Joomla5 et refonte fonctionnelle et graphique.

Le chant védique

École Francophone de Chant Védique : formation css avancée en vue d'être autonome pour tous types d'ajustements graphiques.

SIWArelations

SIWArelations : refonte du site depuis Joomla 3 vers Joomla 4, formation des utilisateurs à la mise à jour des contenus et au référencement naturel.

Compagnie de théâtre et musique en Bourgogne

Compagnie AuFildesChats : création du site, formation à la gestion des contenus y compris les diaporamas et galeries photos, gestion des événements (lieux avec géolocalisation, modules d'événements).

Formation Joomla

Cabinet Bouchara (Wordpress) : formation au référencement naturel, blog professionnel et SEO, conseil/assistance pour l'architecture du site et son ergonomie.

Formation Joomla

Litigimmo (Wordpress) : formation au référencement naturel, mise en place d'un blog, formation à la rédaction des contenus pour un site internet.

La Marmite de Caro

La Marmite de Caro (Wordpress) : déblocage du site en erreur, ajustements graphiques css.

ISPC Synergies

ISPC Synergies : formation css avancée en vue d'être autonome pour tous types d'ajustements graphiques.

Association Laïque des Sables d'Olonne

Association Laïque des Sables d'Olonne : refonte du site depuis Joomla 2.5 vers Joomla 4, formation enthousiaste des utilisateurs !

Association Laïque des Sables d'Olonne

Val d'Or Paysage : création du site, référencement local.

Pascale Pénellon kinésiologue 84

Profession libérale kinésiologue : création du site, référencement local, blog pour référencement naturel