(Example) Custom CSS in Page Builder

This example shows how to create and use a custom CSS snippet in Page Builder.

Background and Setup

Examples

Prerequisites

Good to Know

  • This example shows how to create and use a custom CSS snippet that changes the styles in a Raw HTML widget.
  • These are the widgets and properties where you can use custom CSS:
    • Raw HTML widget
    • Heading widget
    • Rich Text widget
    • Row widget
    • Column properties
    • Row properties
  • These elemets are not supported in the Raw HTML widget:
    • <html>
    • <body>
    • <head>
    • <style>
    • <meta>
    • <link>
    • <title>
  • This is a simple example. It is not intended as a real-world use case.

Step 1: Create a Raw HTML Widget

Add a Raw HTML widget to the custom page.

How to Start

  1. Do one of these:
  2. On the Custom Page Design screen, click Add Row

    Custom Page screen
  3. Click Add Widget.

    Custom Page Design screen

Procedure

  1. On the Pick A Widget screen, click the Content tab.

    Pick A Widget screen
  2. On the Content tab, click Raw HTML Raw HTML icon.

    Select Raw HTML
  3. On the New Widget - Raw HTML screen, in HTML Content field, enter these codes.

    This example uses the following code:

    <p class="headingText">Data Entities</p>
    <p class="description">Data Entities are software components that are modeled 
    after real-life objects or concepts. App developers can mimic real-life 
    relationships by defining relationships between entities. This approach offers the 
    following unique benefits.</p>
    <ul class="indentedList">
      <li>It simplifies the creation of powerful form-based data-driven 
      applications that draw data from multiple sources.</li>
      <li>It simplifies the creation of end-to-end process-based applications.</li>
    </ul>

    In this example code, the classes of the <p> and <ul> tags provide reference classes that can be used to create a CSS classes.


    Raw HTML Widget
  4. Click Add

    Page Builder shows the Raw HTML widget.


    Raw HTML Custom Page
  5. Click Save.

    Save Raw HTML Custom Page

Step 2: Create a CSS File

Create a CSS file to hold your styles.

How to Start

  1. Click Library Library icon.

    Home Page Library
  2. On the Library screen, do one of these:
    • In the left pane, click CSS > Ellipses (...) > Add CSS Add CSS icon.
    • In the left pane, click CSS
      • In the right pane, clickAdd CSS Add CSS icon.

Procedure

  1. On the Add New CSS File, in the Display Name field, enter Main Content.

    When you click the Internal Name field, this field completes by default based on the value you enter in Display Name field. You can also specify your own internal name. After the internal name is created, you can not change it.


    Add New CSS File screen
  2. Click Add.

    The Main Content empty CSS file is added to the CSS library.


    Main Content CSS file

Step 3: Enter the CSS Code

  1. Click Edit CSS Edit CSS icon.

    Edit CSS
  2. On the right pane, add these CSS classes to your custom CSS snippet.

    The yellowBGBlueFont class gives the style for the container, which can be either a row or a column.

    The headingText, description, and indentedList classes give the style for the elements that reference classes in the Raw HTML widget.

    To get the CSS class names from the custom page, refer to How to Get the CSS Class Names for a Custom Page.

    .yellowBGBlueFont{
      background: rgb(255,255,204);
      color: rgb(51,51,255);
      padding: 10px;
    }
              
    .headingText{
      font-weight: bold;
      font-size: 125%;
      margin-bottom:20px;
    }
              
    .description{
      margin-bottom: 10px;
    }
              
    .indentedList{
      list-style-type: disc;
      padding-left: 45px;
    }

    Add CSS content
  3. Click Save And Commit Save And Commit icon.

    Save CSS file

Step 4: Add CSS to Custom Page

  1. Click Page Designer Page Designer icon.

    Page Designer screen
  2. On the Page Designer screen, click the page that you created in this example for Raw HTML Widget.

    Raw HTML Widget
  3. On your custom page, Edit Style Edit Style icon.

    Edit Style
  4. On the Edit Styles - Properties screen, in the CSS Files list, select Main Content.

    The Main Content is a CSS file where the CSS classes are configured in this example.


    Edit Styles screen
  5. Click Save and Close.

    The Page Builder shows the Custom Page Design screen.


    Custom Page Design screen
  6. Click the right side vertical line of the row or column.

    Click RH Line
  7. Click Edit Column Properties Edit Column Properties icon.

    Edit Column Properties
  8. On the Column - Properties screen, in the CSS > CSS Classes list, select yellowBGBlueFont.

    Column Properties screen
  9. Click Save and Close.

    The Page Builder shows the Raw HTML widget with CSS format.


    Raw HTML widget with CSS

Step 4: Publish the Custom Page

  1. On the Custom Page Design screen, click Check In Check In icon.

    CheckIn Page
  2. Click Publish.

    Click Publish
  3. On the Publish screen, click Publish.

    Publish screen

    The Page Builder shows the published custom page screen.


    Published Custom Page screen

Step 5: View the Published Page

  1. On the right side of a page, click Ellipses (...) > Publish History Publish History icon

    Publish History
  2. On the Publish History screen, click Ellipses (…) > View View icon

    View Page

    Your custom page opens in a new browser tab.

    This view gives the production URL for the page. You can copy this URL to use in other locations, such as menus or links on other web sites.


    Published Custom Page

How to Get the CSS Class Names for a Custom Page

This examples shows how to get the CSS class names from the custom page in Page Builder.

Prerequisites

Good to Know

  • These are the widgets and properties where you can use custom CSS:
    • Raw HTML widget
    • Heading widget
    • Rich Text widget
    • Row widget
    • Column properties
    • Row properties
  • AgilePoint does not provide documentation for the CSS style names in eForms, custom pages in Page Builder, or other customizable web elements. You must get the CSS style names from the forms or pages at runtime or through a runtime preview.
  • This example uses the Google Chrome web browser. The procedures are different for different web browsers.
  • This example shows how to get the CSS class name for one element in the My Menu Page custom page. Use a similar procedure to get the CSS class names for other elements in the custom page.

How to Start

  1. Click Build Pages Build Pages icon.

    Build Pages
  2. On the Page Builder Home screen, in the left pane, click Page Designer Page Designer icon.

    Page Designer

Procedure

  1. On the Page Designer screen, click My Menu Page.

    My Menu Page
  2. Publish the custom page.

    The My Menu Page custom page opens in a new browser tab


    Published Menu Page
  3. On the new browser tab, right-click on the custom page, and click Inspect.

    Inspect Published page
  4. On the source code pane in Google Chrome, select the pointer.

    Select Pointer
  5. Place the pointer over the element of the custom page.

    The CSS class name for the specified element is highlighted on the source code.


    Highlighted Source Code