Customize the template's graphic style

RevasOS Website Builder allows you to create fully customizable websites, thanks to a system that assigns CSS classes to each element of the site. This feature allows you to write your own custom CSS to adapt the style of the site to your specific needs. You can add your styles directly inside a <style> tag or import an external CSS file.

• How it works
• Style
  • Insert Custom CSS
  • Insert external style
  • Available classes
  • Available Attributes
• Scripts
  • Inserting custom scripts
  • Insert external scripts

How it works

Each element within a RevasOS template has a default CSS class, which you can use to apply your styles. The structure is designed to be modular and intuitive, making it easy to modify without compromising the stability of the overall design.

Style

Insert Custom CSS

You can add your CSS code directly into the page code using a <style> tag. Example:

<style>
.custom-header {
background-color: #f4f4f4; 
color: #333;
 padding: 20px;
 font-size: 1.5rem;
 }
</style>

Learn more

Read the guide on how to add custom style

Insert external style

If you prefer to use an external CSS file to manage styles, you can do so by linking the style sheet via the tag:

<link rel="stylesheet" href="https://example.com/tuo-stile.css"/>

Learn more

Read the guide on how to insert external style sheets

Available classes

You can find the list of all available classes in this guide

Available Attributes

You can find the list of all available classes in this guide

Scripts

Scripts also allow you to change the graphic style of a template. With scripts you can execute advanced logic and write functions.

‼️‼️ Check the safety of a script ‼️‼️

Scripts execute arbitrary code on your website. If you are writing a script or inserting external packages, you MUST ALWAYS make sure before publishing that they are not executing malicious code and that the external links are safe. Read the code injection security best practices guide

Inserting custom scripts

You can add your script directly into the page code using a <script> tag. Example:

<script><!-- some code and logic --></script>

Learn more

Read the guide on how to add custom script

Insert external scripts

If you prefer to use an external CSS file to manage styles, you can do so by linking the style sheet via the tag:

<script src="iltuoscript.js"></script>

Learn more

Read the guide on how to insert external scripts