CSS¶

WebAcappella Fusion allows the inclusion of code/scripts at several levels

WebAcappella FUSION is totally independent from the JQuery library, which facilitates the integration of third-party codes (no conflicts)

In the components¶

An HTML component allows you to place a code anywhere on your page
Within each component, you can enter the name of one or more css classes.

The definition of these classes can be done in the properties of the page or even the site.

The ‘magic’ selector¶

WebAcappella’s ‘magic’ .$ selector makes it easy to write CSS rules for your elements.

This selector will automatically be replaced by the selector corresponding to the current component.

Tip

Example in a page published with Webacappella and an image component

.$
{
        filter: sepia(1);
}

The result will be the application of a ‘sepia’ filter to your image.

In the pages¶

In each page, the properties section - custom HTML code allows you to enter CSS/JS code

On the website¶

In the general site properties section - the custom HTML code section allows you to enter CSS/JS code

Each code will be automatically integrated on all pages.

Use of files within your HTML codes¶

You may need to use files within your HTML codes.

Let’s take the example of the integration of a ‘Lottie’ animation file.

A ‘Lottie’ animation consists of at least 2 elements in the page

The Lottie ‘Player’ code
To be placed in the HEAD code of your page or even in the HEAD of the general site properties.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

The code of your animation ‘Lottie

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

Instead of the text ‘URL’, you can insert the JSON file corresponding to the animation of your choice.

Among other things, you will find animations on the site:

https://lottiefiles.com/

This will result in code that looks like this:

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