Create a New Template

Overview

In a template, you can supply an HTML header and footer (FormBuilder creates the body of your pages), or, you can clone and modify one of five out-of-the-box templates included in the FormBuilder Rx package.

Out-of-the-Box Templates

Follow these steps to use one of our pre-built templates.

  1. In the Environments List, click to expand the caret beside the name of your Environment, then click on the name of the Version, which will load the Version configuration into the Template Builder and Page Builder subtabs, then click on the Template Builder subtab.
  2. Create a Template for the Registration and Login pages (these are Sites pages).
  3. Upload your logo as a static resource (visit this page for instructions)
  4. Click the New Template button. This will open the New Template dialog
  5. Choose Use ERX Templates (learn more about "Build Your Own" in this section)
  6. Select from five pre-built, customizable template themes:
    1. ERX Template 1 'Light' Theme
      ErxTemplate1Light Theme
    2. ERX Template 2 'Dark' Theme
      ErxTemplate2Dark Theme
    3. ERX Template 3 Theme
      ErxTemplate3 Theme
    4. ERX Template 4 Theme
      ErxTemplate4 Theme
    5. ERX Template 5 Theme
      ErxTemplate5 Theme
  7. Give your template a name and description and select the Logo that you uploaded as a static resource:

  8. Click Save
  9. Next, click the pencil icon next to the name of your new template to launch the Edit Template dialog.

  10. If this template is for use in a Site, scroll to the bottom of the dialog window and in the section called "Display Criteria Main Template," check the Active and Set Default checkboxes.
  11. If this template is for use in a community, scroll to the bottom and in the section called “Display Criteria Login Template," check the Active and Set Default checkboxes.
  12. Customize the fonts and colors used in the template
    Scroll down in the template to this pane:

    Click here to view these style customizations in more detail and learn about what each field controls.

  13. Customize the color of the hyperlinks in the footer
    • Insert this code into the <style> tag of the template: footer .foot_top_left ul li a { color: #ec1212; }

Use dynamically generated tabs and logout button

Previously, you needed to have separate templates for pre-login and post-login, because the “Logout” button and tabs are needed inside the community but not on the login and registration pages. Now, as of Summer 2020, we automate generation of the “Logout” button and tabs after a user logs in, and we suppress these before the user is logged in. Therefore, a single template can serve both pre- and post- login pages. Of course, you can still maintain separate templates for pre- and post-login (and there are often good reasons to do so), but it is no longer necessary.

If you currently use an ERx Theme Template in your communities, we recommend that you replace it with a new one so that we can automatically generate the “Logout” button and Tabs using the Create a Tab (and Tab Label & Tab Order) functionality.

How to redirect the dynamically generated logout button

You can customize the dynamically generated Logout button in an ERx theme template to redirect to the page of your choice. If you use different FormBuilder templates for different campuses, for example, you can redirect Portal users to the appropriate template after they log out.

Following are the steps:
  1. From the FormBuilder Rx tab, click on the Environment you want to modify and click the Template Builder tab.
  2. Click on the yellow pencil icon next to the name of the appropriate template to launch the Edit Template dialog.
  3. In the Template Header section of the Edit Template dialog, find this block of HTML: <div class="top_nav pull-right"><a href="/secur/logout.jsp" target="_self" class="link_logout">LOG OUT</a></div> and add the following highlighted text directly after logout.jsp and before the quotation marks (replace "param=value" in this example with your template name):

  4. Click the Save button to save your changes and close the dialog window. The above steps will prevent auto-generation of the link.

Changing the Logout URL if You Are Using DXP and FormBuilder

If you're using an out-of-the-box template with DXP and FormBuilder, the steps are slightly different for changing the logout URL.

  1. Go to Setup > type "All Sites"in the Quick Find field
  2. Click the "All Sites" link when it appears in the list under the field - this will open the Digital Experiences list on the All Sites page

    .
  3. On the All Sites/Digital Experiences page, click Builder next to the community/portal you want to modify - this will open the Experience Builder tool

  4. To modify the head markup, click Settings > Advanced and then click the Edit Head Markup button to launch a dialog window

  5. Copy and paste the JavaScript code below into the Head Markup field 
    
<script>
const myTimeout = setTimeout(myGreeting, 5000);
function myGreeting() {
const div = document.createElement('div');
div.className = 'top_nav';
div.innerHTML = '<a href="/secur/logout.jsp" target="_self" class="link_logout">LOG OUT</a></div>';
document.genElementsyClassName('main-nav')[0].appendChild(div);
}
</script>


  6. Click Save

Tips on building your own template

If you choose to build your own template, then, in the popup window, input the template name and description, as well as header and footer HTML code.

  • You can store images, CSS, and Javascript libraries in Static Resources for use in your header and footer. Click on the Add Resource button in the Add New Template dialog to select a static resource to include in the header file.

  • To reference a static resource file in a zip file, the subpath must be specified. For example, to reference the “jquery-ui.js” file in a zipped file “jqueryui.zip".

  • You must populate the Subpath field when you add the resource, like this:

  • At the bottom of the Edit Template page, you will see the controls for when the template is called into action.
  • In the Action Column, you'll see icons to Edit, Preview, Copy and Delete the template.

Warning:
Do not add JQuery to your template except as the static resource that is included with FormBuilder. If you want to do this, you need to select Javascript/JQuery in resource type and provide an alias. If you cannot avoid adding JQuery separately (i.e., separate from the included static resource), you must also check a box labeled “Handle JQuery” in order to prevent a conflict.