Codes "head" ACTUEL (affichage photo au survol de souris)

<style>.linkpopover .blockpopover{display:none !important;}.linkpopover:hover .blockpopover{display:inline-block !important;position: absolute;background-color: #fff;}</style>

Codes CSS ACTUEL

/* Police Roboto */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6  {
font-family: 'Roboto', Arial, sans-serif;
}

/* Pour dimensionnement des images (responsive) */
img {
  max-width: 100% !important;
  object-fit: contain !important;
}

Insérer le code suivant dans le "code source HTML" (en haut ou en bas de page) :

<p style="text-align: center;"><a style="position: fixed; right: 15px; bottom: 15px; font-size: 35px; color: #fffff; display: block; width: 75px; background: rgba(255,255,255,0.5); border-radius: 100%; height: 75px; line-height: 65px; padding: 0; text-align: center;" href="/267-apercu.html#top"> ↑ </a></p>

Astuce un peu technique, mais terriblement efficace.
Pour consulter votre site avec un thème graphique compatible mobiles, saisissez dans la barre d'adresses de votre navigateur, après le nom de domaine de votre site, ceci

<p style="text-align: center;"><a style="position: fixed; right: 15px; bottom: 15px; font-size: 35px; color: #fffff; display: block; width: 75px; background: rgba(255,255,255,0.5); border-radius: 100%; height: 75px; line-height: 65px; padding: 0; text-align: center;" href="/267-apercu.html#top"> ↑ </a></p>

Par exemple : https://www.lescygnes63.fr/?designid=b3_ceruleanbiginverse12

La modification est temporaire et n'est visible que par vous.

appuyez sur la touche F12 de votre clavier et cliquez sur le bouton représentant un téléphone et une tablette.
ou réduire la fenêtre Windows aux proportions d'un smartphone

• Tous les éléments possédant une largeur fixe sont susceptibles de briser la mise en page
• Tous les éléments placés dans des éléments plus larges que la page sont susceptibles d'être plus larges que la page
• Les images sont programmées pour ne jamais être plus grandes que l'écran, sauf cas exceptionnels ; si une hauteur est définie, les images sont susceptibles d'être déformées

Astuce :

• Lorsque vous définissez les paramètres d'une image, dans la mesure du possible, ne définissez pas de hauteur.
• Si vous utilisez des tableaux simplement pour mettre en page (pour aligner ou disposer des éléments côte à côte), remplacez-les par des colonnes. Voir https://blog.onlinecreation.me/Astuces/p606a417271209-Lastuce-pour-dynamiser-la-mise-en-page-d.html
• Pour les tableaux utilisés pour présenter des données, ne définissez pas de largeur et réduisez autant que possible le nombre de colonnes.

utiliser l'outil "Insérer ici" => "Afficher l'image" (grâce au code CSS  img {max-width: 100%...}
il y a la possibilité d'interdire la déformation de l'image en CSS de la façon suivante :
Insérer le code CSS

img {
  max-width: 100% !important;
  object-fit: contain !important;
}

Ainsi, quel que soit le mode d'insertion ou de dimensionnement de l'image, elle n'est jamais déformée et a toujours une largeur maximale à 100%. Ce code a cependant des effets secondaires, entre autres relatifs à la position verticale de l'image.
LA MEILLEURE MANIERE EST OUTIL "Insérer ici" "AFFICHER L'IMAGE"oooo

utiliser l'outil "Insérer ici" => "Afficher l'image" (grâce au code CSS  img {max-width: 100%...}

Bonnes dimensions d'image pour éviter les surprises d'affichage : 1920px X 980px

Conseil de Raphaël 2000px X 2000px

Dans les options d'insertion, choisissez l'alignement Parallax pour forcer un affichage réduit en hauteur (recommandé lorsque vous souhaitez séparer des éléments) ou Parallax plein écran pour forcer l'affichage plein écran (recommandé en écran d'accueil).

écrire simplement quelque part sans la page : TransparentMenu entre crochets [...]

À insérer dans Configuration > Configurer votre site > Feuille de style CSS.

.navbar-nav > li > a {
  text-shadow: 0.2em 0.2em 0.2em #000;
}

https://www.color-hex.com/ou https://color.adobe.com/

Couleur de font à un "Jumbotron" insérer le code couleur comme suit

<div class="jumbotron" style="text-align: center; background-color: #ffe5c2;"><img src="https://static.onlc.eu/images/default-webpages/sakura.png" style="display: block; max-width: 100%; margin: 10px auto 10px auto;" width="145" height="145">
<h2>guyfaverdintest</h2>
<p class="lead">Pour tester les possibilités de OnlineCreation</p>
</div>
ATTENTION : la couleur n'apparait que dans la visualisation de la page en réel.

insérer le code couleur comme suit :

<div class="h1 alert alert-warning" style="text-align: center; background-color: #cfd5ff;"><span style="font-size: 1em;">Texte saisi dans la ligne</span></div>

<h4 class="font_7" style="background-color: #ebdb5e;"><span style="color: #000000;"><span style="font-size: 0.8em; font-family: Arial, 'Open Sans', sans-serif;">Texte saisi dans la ligne.</span><br><span style="font-size: 0.8em; font-family: Arial, 'Open Sans', sans-serif;">Texte saisi dans la ligne</span><br><span style="font-size: 0.8em; font-family: Arial, 'Open Sans', sans-serif;">Texte saisi dans la ligne</span></span></h4>
<p style="text-align: center;"><strong>Message de guide</strong></p>

Intégrer une image de fond : voici les codes CSS à insérer pour modifier le fond de votre site

/* Image en fond */
body {
  background-image: url('https://static.onlc.eu/guyfaverdinNDD/168697827565.jpg');
  background-size: 100vh;
  background-attachment: fixed;
  background-position: 0;
}

ou

/* Couleur de fond */
body {
  background: #EBAE99;
}

Choisissez l'un des deux codes et procédez ainsi :

1. Rendez-vous sur https://adminv3.onlc.eu et identifiez-vous si nécessaire.
2. Cliquez sur Configuration.
3. Cliquez sur Configurer votre site.
4. Coller le code dans le cadre Feuille de style CSS.
5. Cliquez sur Mettre à jour
6. Testez

Pour annuler la modification, supprimez le code du cadre Feuille de style CSS.

Pour choisir une autre couleur, vous devez fournir le code hexadecimal de la couleur.

Si l'explication vous intéresse, il s'agit d'un code qui représente la quantité de rouge (les deux premiers chiffres), de vert (les deux chiffres du milieu) et de bleu (les deux derniers chiffres) dans la couleur, où pour chaque couleur 00 est le minimum (par de couleur, noir) et le maximum FF (à cause de la notation hexadécimale, où l'on compte de la façon suivante : 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 etc. jusqu'à FF).

Quelques exemples :

• #000000 : noir (aucune couleur)
• #FFFFFF : blanc (toutes les couleurs)
• #FF0000 : rouge vif (rouge au maximum, pas d'autre couleur)

• #FFFF00 : jaune vif (rouge et vert au maximum, pas d'autre couleur)

  Notez qu'il s'agit ici de couleurs lumineuses, les couleurs qu'émet votre écran. Il n'y a pas de lien avec les couleurs en peinture.

Ceci dit, inutile de faire des maths pour choisir une couleur : tout le monde utilise des outils tels que https://www.color-hex.com/ ou https://color.adobe.com/ pour choisir les couleurs et obtenir leur code. Remplacez simplement le code #EBAE99 par le code de la couleur de votre choix.

Coller le code suivant dans le cadre (configuration du site) Feuille de style CSS (ici couleur blanche de texte)

/* Couleur de texte */
body {
  color: #ffffff;
}

Importer des image si possibles de même dimension, puis Insérer le code suivant en HTML :

(Insérer "[" au début du code et "]" à la fin du code)
Slideshow style="height: 421px; width: 281px;" class="my-slideshow"] [image url="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619321.png" link="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619321.png" caption="La Revue de l'au-delà"] [image url="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619350.png" link="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619350.png" caption="LR"] [image url="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619448.png" link="https://guyfaverdintest.onlc.fr" caption="LR"] [image url="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619557.png" link="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619557.png" caption="La Revue de l'au-delà"]  [image url="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619582.png" link="https://static.onlc.eu/guyfaverdintestNDD/optimised/169276619582.png" caption="La Revue de l'au-delà"]  [/Slideshow

Détails :
  style="height: 421px; width: 281px;" définit les dimensions H x L
[Slideshow style="" class="my-slideshow" fullscreen] class="celle-de-mon-choix" fullscreen pour plein écran.
[image url="l'adresse des images"
link="le lien sur lequel elle pointe"
caption="le texte qui s'affiche en bas de l'image"

Seul le code s'affiche dans l'éditeur

Adapter le contenu comme sur l'exemple (supprimer les # en début de code - sans modifier la taille de police de caractère sans caractère gras) :

#[#add-to-calendar-button name="NOM DE L'ÉVÉNEMENT" description="DESCRIPTION DE L'ÉVÉNEMENT" startDate="DATE DE DEBUT FORMAT YYYY-MM-DD" endDate="DATE DE FIN FORMAT YYYY-MM-DD" startTime="HEURE DE DEBUT FORMAT HH:MM" endTime="HEURE DE FIN FORMAT HH:MM" timeZone="Europe/Paris" location="LIEU DE L'ÉVÉNEMENT" options="'Apple','Google','iCal','Outlook.com','Yahoo'" buttonStyle="text" language="fr"]

Exemple :
#[#add-to-calendar-button name="Conférence - les cygnes" description="« Conférence et médiumnité avec ANTONY »" startDate="2024-03-31" endDate="2024-03-31" startTime="15:00" endTime="18:30" timeZone="Europe/Paris" location="61 rue du ressort, 63000 Clermont-Ferrand" options="'Apple','Google','iCal','Outlook.com','Yahoo'" buttonStyle="text" language="fr"]

(Apparait en blanc dans l'éditeur)

hr {
  border: 0;
  border-top: 1px solid #000000;
  color: transparent;
}

Explications :

• border: 0; permet de supprimer la décoration par défaut, une bordure avec un effet de relief datant de l'esthétisme des années 1990.
• color: transparent; permet d'éviter toute couleur parasite qui pourrait être ajoutée par le navigateur.
• border-top: 1px solid #000000; définit précisément ce que l'on attend : une ligne horizontale de 1 pixel d'épaisseur, continue (solid), de couleur #000000 (noir).

Il est possible de remplacer solid par (entre autres) dotted (pointillets), dashed (tirets), double (deux traits), groove (bicolore, effet sillon) ou ridge (bicolore, effet relief).

Il est possible de changer la valeur 1px pour créer des lignes plus épaisses.

Bouton ombragé avec coins arrondis

box-shadow: grey 0.5em 0.5em 0.3em
Coins arrondis : padding-top: 15px; padding-bottom: 15px; border-radius: 30px; text-align: center; font-size: 2.0em

<p class="h1" style="background-color: #2884e4; padding-top: 15px; padding-bottom: 15px; border-radius: 30px; text-align: center; box-shadow: grey 0.5em 0.5em 0.3em;"><span style="color: #ffffff; font-family: Times New Roman;">Bouton ombragé</span></p>

Texte ombragé

text-shadow: black 0.2em 0.2em 0.2em

<p style="background-color: #054c94; padding-top: 15px; padding-bottom: 15px; border-radius: 30px; text-align: center; font-size: 2.0em;"><a href="/267-apercu.html#Texte_ombragé"><span style="text-align: left; color: #ffffff; text-shadow: black 0.2em 0.2em 0.2em;">Texte ombragé</span></a></p>

Bouton et texte ombragés

<p class="h1" style="background-color: #2884e4; padding-top: 15px; padding-bottom: 15px; border-radius: 30px; text-align: center; box-shadow: grey 0.5em 0.5em 0.3em; text-shadow: black 0.2em 0.2em 0.2em;"><span style="color: #ffffff;">Bouton et texte ombragés</span></p>