Themes

    Umbraco Uno provides a lot of features and options designed to customize your website to be exactly what you need it to be.

    In this article you will find more information about how to work with themes, fonts and colors in your Umbraco Uno project.

    Theme Editor

    When you're previewing the content you're working with, you can use the Theme Editor to change colors on the website, set different fonts for the headings and text as well as customize various other aspects of the website.

    To access the Theme Editor, follow these steps:

    1. Select a piece of content from the Content tree
    2. Use the Preview feature at the bottom of the page
    3. Access the Theme Editor by selecting the green pencil-button in the right side of the screen

    Theme Editor on Sample site

    The Theme Editor contains the following sections:

    • Colors: Define the colors being used throughout the website
    • Text: Change the fonts used for headings and the main body of text
    • Header: Customize how the header of the site should look
    • Footer: Change the theme and size of the Footer
    • Grid: Define various size-dimensions for the Grid widget
    • Forms: Set the border radius for buttons in forms on the website

    Any changes made and saved through the Theme Editor will automatically be saved to the Theme settings.

    Theme Settings

    All available options in the Theme Editor is also available from the Theme settings which can be found under Settings in the Content tree.

    In the Uno-pedia you will find a thorough list of all available Theme settings

    Logos

    Umbraco Uno provides a set of different options for you to add your company logo to your website.

    On Theme settings, you can define logos for both dark and light backgrounds, upload a favicon as well as choose an app icon for your website.

    We recommend that you upload SVG files for the logos and PNG files for both the favicon and the app icon.