Web Themes

Web themes allow you to adjust the look and feel of the following public-facing applications:

  • Event Portal
  • Online Space Booking
  • Online Event Ordering
  • Account Portal
  • Web Lead Forms
  • Version 2 Payment Portals*
  • E-Payments Portals

All other public-facing applications use web skins. See Web Skins for more information.

 

Web Themes allow you to:

  • Apply color schemes
  • Choose fonts
  • Apply logos and banners
  • Upload custom CSS and  HTML section files (if you are familiar with web development)

You can further customize your public-facing applications we themes if you know the basics of web development. As always, you can also work with Enterprise to customize the application for you.

 

Add a Web Theme

To add a web theme:

  1. Click the Web Themes link from the Main Menu. This will open a new browser window for Public Facing Site Configuration.
  2. Click +Create New Theme. The Web Themes Configuration page opens.
  3. Select the tab for the public facing application for which you are creating the web theme:
    • Event Portal - Settings specific to the Event Portal.
    • Online Space Booking - Settings specific to Online Space Booking.
    • Web Form Lead - Settings specific to Web Lead Forms.
    • Suites- Settings specific to the Invitation App within Suites.
    • E-Payment- Settings specific to E-Payment Portals.
    • Payment Portal- Settings specific to v1 Payment Portals.*
    • Membership Portal- Settings specific to the Membership Portal.
    • Online Event Ordering- Settings specific to Online Event Ordering.
    • Account Portal- Settings specific to the Account Portal.
    • Universal Theme Settings- Settings apply to all public-facing applications using the web theme. It is recommended to use an application specific theme whenever possible.
  4. The Settings and Preview Panes will display on the page. The preview only displays General options such as color, button styles and button placement. To preview advanced options such as CSS, JavaScript and HTML, save the web theme and apply it to the appropriate public-facing application configuration in Enterprise backoffice.
  5. In the Settings Pane, select your theme options:
    • Primary Color- When selected, the color scheme will be created using four (4) shades of the selected color, 2 lighter and 2 darker, and applied to pre-determined areas. Grayscale colors are preset and applied to pre-determined areas.
    • Font- Choose an available font from the dropdown field. For custom fonts, please contact Momentus to discuss.
    • Button Styles- Use the slider to choose your desired button corner style.
    • Button Positioning- Choose whether the buttons should appear on the left side or right side of the application page. Some applications enforce a standard button positioning.
    • Logo Upload- Upload the Logo image file you wish to display by either dragging and dropping into the upload box or click choose file to open your File Explorer window. 
    • Logo Alternative Text- This text is read aloud by screen readers for accessibility requirements.
    • Banner Upload- For applicable application, upload the image file you wish to display in the banner area of the page.
    • Advanced Options- Advanced Options are available to add custom content to the public-facing application. Web Development knowledge is highly recommended when using these options.*
      • CSS URL - Link to an external CSS file. This allows you to house CSS files and images outside of your database. Any styles loaded here overwrite the default styles.
      • JavaScript URL - Link to an external JavaScript file. You should only use this if you are an experienced web developer.
      • Custom Font Link - Link to an external font.  
      • Custom Font Family - Font family to use.
      • Custom CSS Field - Add CSS or copy and paste CSS. 
      • Custom HTML Field - Add custom HTML. You should only use this if you are an experienced web developer. 

 

Edit a Web Theme

Changes made to an existing web theme will be immediately applied to all public-facing application pages using that web theme. To edit an existing web theme:

  1. Click the Web Themes link from the Main Menu. This will open a new browser window for Public Facing Site Configuration.
  2. Select the theme to edit from the list and click Edit.  The Web Themes Configuration Page opens.
  3. Edit the web theme as needed.
  4. Click Save.

 

Note:

  • The payment portal version can be found by showing the Payment Portal Version field in the Payment Portal Configurations page results grid.

  • For experienced web developers, find more information on Common CSS Class Naming Conventions in the Knowledge Base.

Related articles

Comments

6 comments

Date Votes
  • Polina Zhitomirsky

    Do you have more information about Custom HTML Field? Where will it be displayed on what it can be? Do you have a sample code and page to understand it better?

    2 upvotes

  • Alex Weidenbenner

    HI Polina,

    HTML is a web language, there are many classes on the internet about it.  We do not have any articles teaching people HTML. 

    In Ungerboeck, most of the public facing apps (ESC, EXP, EP, etc) allow custom HTML to change the look and feel of the page.  This is open to all clients, so if an admin already knows HTML they can customize their wesbite to their wishes.  If an admin does not know HTML but still wants to customize their pages, our services department is able to help bridge that gap. 

    Thank you,

    Alex

    0 upvotes

  • Rob Bodart

    When I access "Web Themes", an additional browser window opens.  The new window is blank.  No tabs or options.

     

    1 upvotes

  • Mike Engelhardt

    Hi Rob, that seems like a bug. Is it still happening?

    0 upvotes

  • Brett Ward
    • Edited

    We get the blank page as well. 

    0 upvotes

  • Sam Wilson

    Hi Brett,

    Please enter a ticket so our Support and/or Development teams can assist.

    Regards,

    Sam

    0 upvotes

Please sign in to leave a comment.