Documentation

Getting Started
Gleam Updates
Capture
Competitions
Galleries
Rewards
Installation
Advanced
Integrations
Action Types
Guides

Custom CSS

Business users have the ability to add or edit the CSS contained within the Gleam widget. This feature enables you to align the style of the campaign with your own website or branding.

Applications that support Custom CSS:

  • Competitions
  • Rewards

Site CSS or Campaign Level CSS

You are able to add your custom CSS at a site level or individual campaign level.

Site Level

Adding CSS in your Settings > Custom widget styles will cascade down through any campaigns that are created for that site.

Campaign Level

Adding CSS in your Campaign > Custom styles will only apply the CSS to that individual campaign.

Common Styles

We have catalogued all of the common style changes that you might need or want to make to your widget. For anything else, you can usually either inspect the element you want to change or contact us.

Removing Embeddable Widget Box Shadow

The box shadow that sits around our widget cannot be removed by adding custom CSS inside Gleam. You need to add some inline CSS to your page to remove this.

<style>
  .no-box-shadows *  { box-shadow: none !important;  }
</style>
<div class="no-box-shadows">
<--- INSERT WIDGET CODE --->
</div>

Using Your Own Fonts

In order to use your own fonts in the widget you will need to import them some somewhere like Google Fonts. The URL you add here must be https://.

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

body { font-family:pt sans; color:#000000;}

Remove Footer

You can completely hide the footer in the widget with the following CSS:

.footer.entry-footer {display: none; height: 0; padding: 0}

Hide Top Row of Widget

You can completely hide the top row of the Gleam widget that contains the time left or entries.

.square-row { display: none }

Hide Entries & Total Entries

If you only want to show how much time is left on a competition you can use this (you must tick the hide total entries box during competition setup for it to work):

.red-square { display: none !important }
.square-row .span6 { width: 100% }

Hide Entries Only

This CSS allows you to hide the Total Entries field on your competition:

.red-square { display: none !important }
.square-row .blue-square { width: 50% }
.square-row .purple-square { width: 50% }

Hide Prize Area

If you want to hide the prize / description area of the widget you can use this code.

.incentive-wrapper { display: none }

Hide Ways to Enter Row

If you want to hide the h2 row that contains the default text "x Ways to Enter" then use the following code.

.entry-content h2{ display: none }

Hide Action Count Box

You can hide the action tally box on the right with the following CSS.

.enter-link .tally { display: none; }

Hide Left Icon Box

.icon-wrapper {
  display: none !important;
}
.enter-link>.text, .contestant-border>.text, .other-login>.text {
  padding-left: 10px;
}

Custom Facebook Tab Background

You can override the background inside the Facebook Tab only by using the CSS below. Remember you can use the background-url also if you want it to be an image.

html.enter.facebook-page { background: #444 !important }

Increase Width Of The Widget

It's not recommended to increase the width of the widget by too much however it is possible

.popup-blocks-container, .popup-block, footer.entry-footer, .footer.entry-footer { max-width: 600px; }
html.enter, html.enter body { max-width: 610px !important; }
html.enter.enter-page { max-width: none !important }
html.enter.enter-page body .pseudo-popup-border { max-width: 600px; }

Full Class List

  • body
  • .campaign
  • .grey-bg
  • .popup-block
  • .popup-blocks-container
  • .square-row
  • .red-square
  • .blue-square
  • .purple-square
  • .incentive-wrapper
  • .incentive-banner
  • .incentive-description
  • .incentive-deseciption h3
  • .entry-content
  • .entry-content h2
  • .small-bar
  • .entry-method
  • .entry-method.question
  • .entry-method.bonus
  • .entry-method.expanded
  • .enter-link
  • .enter-link .tally
  • .contestant-border
  • .icon-wrapper
  • .tooltip-inner
  • .footer
  • .footer.entry-footer

Connect With Us