Custom CSS

Applications that support Custom CSS:

• Competitions
• Rewards

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

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

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

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.

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>

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

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

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

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

.square-row { display: none }

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% }

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% }

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

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

.incentive-wrapper { display: none }

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 }

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

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

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

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 }

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

If you wish to increase the width of an embedded widget, you also need to add this code alongside our embed code:

<style>
html body .e-widget-preloader, html body iframe.e-embed-frame { max-width: 600px !important; }
</style>

• body
• .campaign
• .grey-bg
• .popup-block
• .popup-blocks-container
• .square-row
• .red-square
• .blue-square
• .purple-square
• .incentive-wrapper
• .incentive-banner
• .incentive-description
• .incentive-description 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