Website branding #

Making your online presence reflect your brand's identity is crucial in making your users' experience the best possible. By branding your website in an effective manner you can establish a clear connection between all of your activities and your website, making it stand out amongst the other and easilly recognized. RevasOS is based around the concept of high quality web visual design delivered trough themes that can then be customized by the website creator. This makes for the highest level of end user experience and ease of use for the website creator. In this guide you will learn how to choose a theme for your website and customize it by adding you own brand's colors, logos and fonts to ruly make it your own.

Branding in RevasOS #

In RevasOS branding is managed at the site-group level, so it can be reflected in all the internationalized versions all at once.

Theme selection ⭐️ #

RevasOS offers a collection of highly curated and optimized themes that can adapt to every website's need. To slect a theme for your website group follow these steps:

1. Open the Websies app in RevasOS;
2. Locate the website group you want to edi the theme of;
3. Click on the "Theme design" button located on the top bar of the website group after the name and the domain;
4. Click on "Change theme" in the first section of the menu that opens up;
5. You can now preview all the themes;
6. After you have selected the most suitable theme click "select theme and customize" if you want to change other detailf oth the website branding or "Select theme" if you want to directly apply the change to the website group;
7. Click "Save" on the top right corner to apply changes;

Logo and favicon customization #

Crucial to a brand's identity on a website is the selection of a logo and a favicon, te difference being that the logo will be displayed prominently on the actual website and the favicon will instead be used on the tab of the browser if supported. This is why we recommend the use of smaller files (32x32 pixels) for the favicons whereas logos can be bigger. To add a logo and a favicon to your website group follow these steps:

1. Open the Websies app in RevasOS;
2. Locate the website group you want to edi the theme of;
3. Click on the "Theme design" button located on the top bar of the website group after the name and the domain;
4. Click on "Upload favicon" and select the favicon file;
5. Click on "Upload logo" and select the logo file;
6. Click "Save" on the top right corner to apply changes;

Accent color selection #

RevasOS also gives you the ability to choose your accent color based on your brand's identity. This color will be used in all the accent elements of your website group. To add the accent color to the website group follow these steps:

1. Open the Websies app in RevasOS;
2. Locate the website group you want to edi the theme of;
3. Click on the "Theme design" button located on the top bar of the website group after the name and the domain;
4. Click on the accent color hex code;
5. Add you own color's hex code;
6. Click "Save" on the top right corner to apply changes;

Font selection #

Another way you can personalize your website and make it more reconizable is by adding your brand's font. This will be used in all the pages of the website group. To personalize the font of your website group follow these steps:

1. Open the Websies app in RevasOS;
2. Locate the website group you want to edi the theme of;
3. Click on the "Theme design" button located on the top bar of the website group after the name and the domain;
4. If you want to choose between one of the RevasOS fonsts click on the font name under the "Template font" section and select one form the drop down list;
5. If you know the Google fonts URL to your brand's specific font click on the "Advanced configuration" button under the font name in the "Template font" section and paste the url in the field that appears;
6. Click "Save" on the top right corner to apply changes;

Other customizations #

RevasOS gives you the ability to further customize theme elements like the "Shape rounding" paramter and other advancd settings that can be accessed by clicking on the "Advanced operations" button in the Design and theme menu.