Change the design of Website Widget, Link, and ExpressTab Streams

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 of your Insights Anywhere, Website Widget, and ExpressTab Streams. For example, you might want to match your in-house brand. There are two options when it comes to making changes:

  1. Simple Styling
  2. Advanced Styling (requires a Professional or Enterprise subscription)

Simple Styling allows you to change colours and fonts. Advanced styling gives you much greater control, including custom logos and background images.

Access the Styling Options

  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, at the top, click Design.

  7. You can now choose between Simple and Advanced styling modes.

Simple Styling Options

  1. Adjust the settings within the panel to your desired colours and fonts.
  2. Click Done.
  3. The panel should disappear and bring you back to the Touchpoint Details screen. Click Save again to commit your changes.
  4. Please note, it may take up to 20 minutes for your changes to permeate through the OMBEA servers and go live.

Advanced Styling Options

Advanced Styling uses CSS. If you are unfamiliar with CSS styling, then you should refer to somebody with experience of website development. You may also contact the OMBEA support team for assistance.

Assuming you have written your CSS code:

  1. Paste your CSS code in the box.
  2. Click Done.
  3. The panel should disappear and bring you back to the Touchpoint Details screen. Click Save again to commit your changes.
  4. Please note, it may take up to 20 minutes for your changes to permeate through the OMBEA servers and go live.

You can learn about CSS styling using any one of the many online resources available. We recommend Mozilla’s articles here.

Below, we list the specific classes you can use to tweak your Website Widgets and Links.

CSS 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.

.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.

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

}

CSS Classes Specific to the Anywhere Module

  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.

.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.

.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.

.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.

.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.

.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

}