Skip to Content

Change Font Size for Entire Panel

You can change the default font size for an entire panel by using a Custom Theme and associating the Theme to the panel. In this example we will create a Custom Theme to control Font, which in turn allows you to configure information for Font Family, Font Size, Font Weight, and Font Height.

How to Configure

Step 1: Configure a Custom Theme

  1. Navigate to Look & Feel for a Collection your app is associated with. Example: Customer
  2. Click + Theme
  3. Assign a Theme Name. For example: Panel Font Size
  4. Click Save
  5. Select Panel from the Components
  6. Click + Style from the Style panel
  7. Select Content as the Area value
  8. Select Font as the Style Type

  9. Configure any of the Values as appropriate:

    • Font family
    • Font size
    • Font weight
    • Line height

  10. Click Save

Step 2: Apply Custom Theme to Panel

  1. Navigate to the page containing the panel
  2. Go to Action Drawer > Live Designer
  3. Click the Edge Case tab for the panel
  4. Expand Look and Feel
  5. Set the Theme value to the Custom Theme configured in Step 1
  6. Click Save
  7. Confirm update from the app view

Step-by-Step Guide

You can change the default size for an entire Panel by using a Theme and creating a Style for the Panel's Contents area and a 'Font Advanced' Style Type. This allows you to set the Font Family (generally the specific fonts or a style like Sans-Serif), the Font Size, and the Font Weight (bold, narrow, etc). To do this:

  1. Navigate to the main Vinyl IDE page and choose Define your look & feel under the Create menu
  2. Locate the Name of your Vinyl app, and click on the paintbrush Themes icon
  3. Find the Theme for the application you are using. If you do not have a theme for this app yet, create a new one from this page.
  4. Click on the Advanced Settings button for the Theme
  5. On the left under Real Estate Areas, click on Panel
  6. In the bottom panel on the right, click Create to create a new style for this part of the theme
  7. Select Contents section underInterface , which represents the main inner section of the panel
  8. Select Font Advanced for Style Type . Font Advanced allows you to configure various font styles. Value1 is used for font names. Value2 is font size. This can be any unit of measure. Value3 is the boldness. Example:

font-family: {0}; font-size: {1}; font-weight: {2};
2018 04 10 09 05 09 Style Implementation Vinyl Ide

Note: You can also choose Header to change the properties of the Panel's Header bar, or Container to change properties of the Panel's outer box such as border color or thickness