CSS¶

WebAcappella Fusion allows the inclusion of multi-level code/scripts.

WebAcappella FUSION is totally independent of the JQuery library, making it easy to integrate third-party code (no conflicts).

In components¶

An HTML component allows you to place code anywhere on your page.
Within each component, you can enter the name of one or more CSS classes. These classes can be defined in the page or even site properties.

The ‘magic’ selector¶

WebAcappella’s ‘magic’ .$ selector makes it easy to write CSS rules for your elements. This selector will be automatically 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 - custom HTML code section 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.

Using files within your HTML code¶

You may need to use files within your HTML code. Let’s take the example of integrating a Lottie animation file.

A Lottie animation consists of at least 2 elements on the page:

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

The code for your Lottie animation

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

In place of the URL text, you’ll be able to insert the JSON file corresponding to the animation of your choice.

You can find out more about the animations on the website:

https://lottiefiles.com/

The result will look 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>