Custom CSS in Portal

This feature allows you to fully customize the visual appearance of your widget with custom CSS.

This feature is for advanced users only. Please bear in mind that your custom CSS might not be compatible with the future releases of Retino widget, although we’ll do our best to preserve backward compatibility whenever possible.

Basics

You can overwrite our default styles with your own CSS as long as you make your rules more specific than ours with #retino (which is the id of <body> element). For example like this:

#retino .r-button.r-primary {
    color: orange;
    border-radius: 0;
}

Just button.primary might not work.

In a few cases adding #retino might not be enough. Then you need to add !important:

#retino .r-link.r-primary {
    color: orange !important;
}

If you just want to change the primary color, then we made a little template for you (just copy this code into custom css field and test it):

#retino .r-button.r-primary {
    /* This selector matches all primary (blue) buttons */
    background-color: orange; /* this sets the background color */
}

#retino .r-link.r-primary {
    /* This selector matches all primary (blue) link */
    color: orange; /* this sets the text color */
}

We have also added a few classes to allow you more control and make more advanced customizations simple.

Currently supported classes

Basic UI classes

These classes are used everywhere in the widget and they describe to basic UI elements.Most basic UI elements have multiple types like .r-primary and .r-secondary. To target all types just omit the specifier like this:

#retino .r-button {
    border-radius: 0;
}

Or you can target them separately:

#retino .r-button.r-primary {
    background-color: green;
}

#retino .r-button.r-primary {
    background-color: yellow;
}

This applies also to headers, links and buttons.

Headers

All headers have .r-h class and we use 4 types .r-h1, .r-h3, .r-h4, .r-h5.

/* Default values */

#retino .r-h {
    font-weight: 700;
}

#retino .r-h.r-h1 {
    font-size: 1.7em;
}

#retino .r-h.r-h3 {
    font-size: 2em;
}

#retino .r-h.r-h4 {
    font-size: 1.5em;
}

#retino .r-h.r-h5 {
    font-size: 1.28571429em;
}

Paragraph

Whenever we use a paragraph of text we give it a .r-p class.

/* Default values */

#retino .r-p {
  font-size: 1.15em;
  line-height: 1.5;
}

Buttons

All buttons are marked with .r-button and there are 2 types of buttons:

.r-primary
.r-secondary

/* Default values */

#retino .r-button.r-primary {
    font-size: 1rem;
    background-color: #2185d0;
    color: #fff;
}

#retino .r-button.r-secondary {
    font-size: 1rem;
    background: transparent none!important;
    color: rgba(0,0,0,.6)!important; 
}

Links

All links are marked with .r-link and we have 2 types of them:

.r-primary
.r-secondary

/* Default values */

#retino .r-link.r-primary {
    color: #4183c4;
    font-weight: 400;
    text-decoration: none;
}

#retino .r-link.r-secondary {
    color: #9a9a9a !important;
    font-weight: 400 !important;
    text-decoration: underline;
}

Segments

A segment is the last basic UI component we use in the widget. It is marked with .r-segment class it is used mostly for wrapping forms in the widget. The default style is implemented through SemanticUI.

/* Default values */

#retino .r-segment {
    border: 1px solid #d4d4d5;
    font-size: 1rem;
    background: #fff;
    border-radius: .28571429rem;
}

Background

You can use an element with .r-background to set the background color of the widget like:

#retino .r-background {
    background-color: #f8f8f8;
}

Retino specific classes

This section is for advanced customizations. If you just want to change font or primary color then Basic UI classes should be enough.We support classes for every step. And some of those steps have elements with specific classes.