• Product

    Document Studio

    Generate, Sign, and Automate Salesforce documents with real-time sync

    Document Generation
    eSign
    Files
    CLM

    Experience Studio

    Build portals, apps, and forms directly in Salesforce with Dynamic data flow and adaptability

    Forms
    Flows
    Portals
    Surveys

    Go Unlimited

    Portals & Web Apps
    High-Volume Doc Gen
    Forms & Synced Surveys
    eSign & Contract Lifecycle
    Enterprise Compliance
    All-in-One Suite
    Book a demo
  • Solutions
    Financial Services
    eCommerce
    Legal
    Tech
    Insurance
    Nonprofit
    Manufacturing
    Education
    Healthcare
Log In Slack sales

Titan Support

How can we help you?

Platform

Solid Color Styling

Business Background

You can style the color of the Titan elements to complement your brand and business needs. The following options are available under Fill:

  • Solid Color: The Color option allows you to set an element’s solid background color. You can select from a color palette or provide a HEX color code.
  • Gradient Color
  • Use Image
  • Opacity

How to Guide

Use the Solid color option to style a Titan element in Web projects.

Solid color

Solid color
# Option Function
1 Solid color Change the solid color of the element.
2 Color block When the project was created, a theme was selected. The theme has certain colors associated with it, which are shown here.
3 Color slider To change the color, click on the color slider or drag the white dot to select a color.
4 Shade slider Use the shade slider to change the color’s shade.
5 HEX code Paste a HEX color code in the field. This is the default option.
Hex color codes start with a pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue.
6 Arrows Use the arrows to select either RGBA (Red, Green, Blue, and Alpha) or HSLA (Hue, Saturation, Lightness, and Alpha). Add the relevant color codes to the fields.
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
7 Theme selector When the project was created, a theme was selected. The theme has certain colors associated with it, which are shown here.
8 Recent colors The five recent colors that were selected are shown here.
9 Palette Create your own color palette with up to sixteen unique colors. These colors can be applied to the entire project.
10 Edit icon The Edit icon changes to a Save icon when you add colors to the palette. Once you have added all the required colors, click the Save icon.
11 Delete button Delete a color that was applied to the element by clicking this button.

Real-Life Example of How to Use Solid Color

Join us as we examine one of the many ways you can style a strip using the Solid Color setting. Alternatively, contact us today if you have a specific business use case in mind.

The example below shows how to use Solid Color on a strip element.

  1. Click the Styling icon to open the Styling panel.
  2. Select the relevant option, such as Column.
    • The option depends on the type of element.
  3. Click the Fill option to expand it, and then click the Solid color icon. The Solid tab opens.

Solid color icon

Solid color icon
  1. Configure a solid color using one of the methods that follow:
    • Drag the Color slider to change the color; or
    • Click on the Color block to select the specific color; or
    • Add the HEX code.
    • Alternatively, click a color next to Theme or Recent.

Note:

You selected the theme when you created the project.

Browse to Project > Theme. Different default themes are shown on the right of the screen.

  • You can change the default theme by selecting a different theme in the list.

This image has an empty alt attribute; its file name is image-353-1024x569.png

  1. If necessary, drag the Shade slider to change the shading of the selected color.

Note:

  • The HEX code changes (next to the Solid color icon).
  • The RGBA code is added.
  • The element’s color changes.

Shade slider

Shade slider

Do the following to add colors to the palette.

  1. Paste a HEX code in the field.
  2. Click the + icon to add the color to the palette. The Edit icon changes to a Save icon.
  3. Add all the colors you need and click the Save icon.
  4. If necessary, click on a color to select it and click the Delete color option to remove the color from the palette.

Palette

Palette

The Only Forms Solution Built 100% in Salesforce.

Slack an expert