CSS¶

WebAcappella Fusion permet l’inclusion de code/scripts à plusieurs niveaux

WebAcappella FUSION est totalement indépendant de la librairie JQuery ce qui facilite l’intégration de codes tiers (absence de conflits)

Dans les composants¶

Un composant HTML permet de placer un code à n’importe quel endroit de sa page
Au sein de chaque composant, vous pouvez renseigner le nom d’une ou plusieurs classes css.

La définition de ces classes pourra être faite dans les propriétés de la page ou même du site.

Le sélecteur “magique”¶

Le sélecteur “magique” .$ de WebAcappella permet de faciliter l’écriture de régle CSS pour vos éléments.

Ce sélecteur sera remplacé automatiquement par le sélecteur correspondant au composant courant.

Astuce

Exemple dans une page publiée avec Webacappella et un composant image

.$
{
        filter: sepia(1);
}

Le résultat sera l’application d’un filtre “sépia” sur votre image.

Dans les pages¶

Dans chaque page, la section propriétés - code HTML personnalisé permet de renseigner du code CSS/JS

Dans le site Web¶

Dans la section des propriétés générales du site - la section de code HTML personnalisé permet de renseigner du code CSS/JS

Chaque code sera automatiquement intégré sur l’ensemble des pages.

Utilisation de fichier au sein de vos codes HTML¶

Vous pouvez avoir besoin d’utiliser des fichiers au sein de vos codes HTML.

Nous allons prendre l’exemple de l’intégration d’un fichier d’animation “Lottie”.

Une animation “Lottie” se compose au minimum de 2 éléments dans la page

Le code du lecteur “Player” Lottie
A placer dans le code HEAD de votre page ou même dans le HEAD des propriétés générales du site.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Le code de votre animation “Lottie”

<lottie-player src="URL" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

Vous allez pouvoir insérer à la place du texte “URL” le fichier JSON correspondant à l’animation de votre choix.

Vous trouverez entre autres des animations sur le site:

https://lottiefiles.com/

Ce qui donnera en résultat un code ressemblant à ceci:

<lottie-player src="{{WA_FILE 9744-sample-animation.json}}" background="transparent"  speed="1"  style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>