Custom-Designed Website Widgets and Links

Learning Statement: In this article you will learn how to change the physical styling of your Insights Website Widgets and Link Streams.
Audience: This article is aimed at OMBEA Insights users using the Online module.

Introduction

You can change the design and appearance of your Insights Website Widgets and Link Streams using CSS. If you are unfamiliar with CSS styling then you should refer to somebody with experience of website development.

Alternatively, you can learn more yourself using any one of the many online resources available. We recommend Mozilla’s articles heer.

Further down this article we list the specific classes you can use to tweak your Website Widgets and Links.

How to Inject your CSS

Assuming you have written your CSS code:

  1. From the menu on the left hand side, click Touchpoints.

  2. Select the Touchpoint you wish to style. You must select either a Link or Website Widget Touchpoint.

  3. Click on the Edit button from the pane that appears on the right hand side.

  4. Click Next to get to the TouchPoint Details pane.

  5. Click on the Edit icon (shaped like a pencil).

  6. In the panel that appears, scroll down to Custom CSS (Advanced).

  7. Paste your CSS code in heer, and click Save.

  8. The panel should disappear and bring you back to the Touchpoint Details screen. Click Save again to commit your changes.

Please note, it may take up to 20 minutes for your changes to permeate through the OMBEA servers and go live.

Classes Specific to Website Widgets

  1. om-custom-widget-container
  2. om-custom-block-navigation-button and om-custom-close-button
  3. om-custom-powered-by-link

om-custom-widget-container

Can be used to change the background and border of the widget.

Example

.om-custom-widget-container { background-color: green !important; border-bottom: 6px solid black !important; }

om-custom-block-navigation-button and om-custom-close-button

Can be used to change the navigational and close button.

Example

.om-custom-block-navigation-button { color: blue !important; }

.om-custom-close-button { color: blue !important; }

.om-custom-block-navigation-button:hover { color: purple !important; }

.om-custom-close-button:hover { color: purple !important; }

om-custom-powered-by-link

Can be used to change the color of the Powered By link. Please do not abuse this class by using it to hide or remove the link. Doing so violates our terms of use.

Example

.om-custom-powered-by-link { color: green !important; }

Classes Specific to Links

  1. om-custom-footer
  2. om-custom-intro-title
  3. om-custom-block-navigation-button-large-res
  4. om-custom-block-navigation-button-small-res
  5. om-custom-container::before

om-custom-footer

Can be used to change the appearance of the footer.

Example

.om-custom-footer { background-color: green !important; }

om-custom-intro-title

Can be used to change the title on the Stream and Location selection page.

Example

.om-custom-intro-title { color: blue !important; }

om-custom-block-navigation-button-large-res

Can be used to change the navigation buttons on large resolution screens.

Example

.om-custom-block-navigation-button-large-res { background-color: red !important; }

om-custom-block-navigation-button-small-res

Can be used to change the navigation buttons on small resolution screens.

Example .om-custom-block-navigation-button-small-res { background-color: red !important; }

om-custom-container::before

Can be used to change the background color of the page.

Example

.om-custom-container::before { background-color: green !important; }

.om-custom-container::before { background:url(https://images.pexels.com/photos/302769/pexels-photo-302769.jpeg) !important; }

.om-custom-container::before { filter: brightness(50%) !important; //Image brightness overlay }