(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


  3. Click Add Widget.


Procedure

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


  2. On the Content tab, click Raw HTML Raw HTML icon.


  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.



  4. Click Add

    Page Builder shows the Raw HTML widget.



  5. Click Save.


Step 2: Create a CSS File

Create a CSS file to hold your styles.

How to Start

  1. Click Library Library icon.


  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.



  2. Click Add.

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



Step 3: Enter the CSS Code

  1. Click Edit CSS Edit CSS icon.


  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;
    }


  3. Click Save And Commit Save And Commit icon.


Step 4: Add CSS to Custom Page

  1. Click Page Designer Page Designer icon.


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


  3. On your custom page, Edit Style Edit Style icon.


  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.



  5. Click Save and Close.

    The Page Builder shows the Custom Page Design screen.



  6. Click the right side vertical line of the row or column.


  7. Click Edit Column Properties Edit Column Properties icon.


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


  9. Click Save and Close.

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



Step 4: Publish the Custom Page

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


  2. Click Publish.


  3. On the Publish screen, click Publish.


    The Page Builder shows the 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


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


    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.



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