RevasOS Learn

English

Italiano

English

Italiano

Appearance

How to change the template style ​

  1. Open the Websites app in RevasOS;
  2. Find the site group you want to make changes to;
  3. Click on the button with the name of the template (for example Default template) that is next to the domain on the site group bar;

Now that you are on the page you can change the following elements:

Logo and favicon ​

The logo is displayed prominently on the actual website, while the favicon is used in the browser tab, if supported. For the favicon it is recommended to use smaller files (32x32 pixels), while the logos can be larger.

To add a logo and a favicon to the website follow these steps:

  1. Click on the "Upload icon" button and select the favicon file;
  2. Click on the "Upload logo" button and select the logo file;
  3. Click Update Preview or Save and Proceed to apply the changes.

Accent Color ​

This color is used in all accent elements of the website group.

To change it, select the default color you want to use from the drop-down menu next to Accent Color. Or activate the Use Custom Configuration checkbox to use a specific value. In this case, follow these steps:

  1. Click on the color preview next to Accent Color;
  2. In the color picker that opens, choose the color using the following methods of your choice:
  • moving the cursor over the color spectrum;
  • clicking the pipette to pick it from an element on the screen;
  • entering the RGB, HEX or HSL code.
  1. Click Update Preview or Save and Proceed to apply the changes.

Font ​

The font is used on all pages of the group of websites and allows you to customize the typographic character of each website

To change it, select the default font you want to use from the drop-down menu next to the Font item. Or activate the Use custom configuration checkbox to use a specific value. In this case, follow these steps:

  1. In the first field under the Font label, enter the name of the font;
  2. In the second field, enter the link that leads to the font package
  3. Click Update preview or Save and proceed to apply the changes.

Google Fonts ​

Google Fonts is a free library of fonts for the web. You can use them to improve the design of your site, making your content more visually appealing.

  1. Go to the official Google Fonts website: https://fonts.google.com,
  2. Use the search bar at the top left to search for the font name, for example "Roboto".
  3. Once found, click on the font to open its page.
  4. Click Get font and then Embed code,
  5. To find the font name, go to the [Font name]: CSS classes section and copy the text after the font-family entry, then paste it into the first field under the Font label. For example, for the Roboto font you will find this code font-family: "Roboto", sans-serif; so the text to copy is "Roboto", sans-serif;,
  6. To find the link, go to the section Embed code in the <head/> of your html, find the third element that begins with <link/> and copy only the element between the quotes after the href entry. For example, for Roboto the third link is <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"/> therefore the URL to copy is https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap.
  7. On Revas, copy it into the second field under the Font label.
  8. Click Update Preview or Save and Proceed to apply the changes.

Adobe Fonts ​

  1. Go to the official Adobe Fonts website: https://fonts.adobe.com
  2. Use the search bar at the top right to search for the font name, for example "Proxima Nova".
  3. Once you have found it, click on the font to open its page.
  4. Click on the Activate Fonts button to activate the font in your Adobe account.
  5. Go to the Web Project section: after activating the font, click on Add to Web Project or access the Web Projects tab from your Adobe Fonts account.
  6. To find the name of the font, open the copied link in a browser. You will see a CSS file with font-family rules. For example, for Proxima Nova you will find a line similar to this: font-family: "proxima-nova", sans-serif;"
  7. Copy the text after the font-family entry, then paste it in the first field under the Font label inside RevasOS.
  8. To find the link, go to the Web Projects tab, copy the code that starts with <link/>. For example: <link rel="stylesheet" href="https://use.typekit.net/abcd123.css"/> so the URL to copy is https://use.typekit.net/abcd123.css..
  9. On Revas, copy it into the second field under the Font label.
  10. Click Update preview or Save and proceed to apply the changes.

::tip Other fonts In this guide you will find examples for Google Fonts and Adobe Typekit but you can insert any type of font as long as you have an external link containing the CSS of the font to connect on Revas. :::

Adding more than one font ​

Thanks to the font editor you can add a font used by the entire site, but you can also use multiple fonts and apply them to different elements of the site. For example, you can connect a font only for the titles that is different from the font of the body text.

You can do this thanks to the injection of codes and custom style.

Find out how here:

Rounding ​

Rounding allows you to define how rounded the corners of buttons and tabs are throughout the site. Maximum value: 100px. To change it, follow these steps:

  1. Find the Rounding item;
  2. Move the slider to the right or left to get to the rounding you want. You can see the exact measurement in the gray box on the right.
  3. Click Update preview or Save and proceed to apply the changes.

RevasOS

Copyright © 2018-present Revas SRL Società Benefit