Introduction to the promotion customization with CSS styles and HTML/Javascript code

In case of using a White Label promotion, you can use the options to insert your own HTML code and Javascript code, as well as use your own CSS styles. These options are not available for promotions created with Premium or Basic versions.

These options allow to modify and customize the default design layout of Easypromos promotions, the Premium Template, even though it also applies to the Basic Template. In this way, administrators will be able to overwrite the default styles by using their own CSS styles, hide elements by using CSS, insert their own HTML code, and use Javascript and jQuery to position HTML elements, replace text of the system, show alert popups or, for example, reorder elements of the screen. With these tools a programmer or web developer will be able to modify the Easypromos layout in order to achieve a more customized layout. The limit will depend on the skills of the programmer when using these tools to get the desired effect or design.

Note: this tutorial is aimed at developers and web programmers with advanced skills on CSS, HTML and Javascript.


This article has been written as an introduction to the methodology that we recommend to web programmers who wish to customize the Easypromos template. The tutorial is presented as frequently asked questions, and at the end we provide examples of HTML/CSS/Javascript codes for most frequent changes and modifications.


Frequently asked questions about CSS


List of CSS selectors to customize the styles conditionally


Frequently asked questions about Javascript


Examples of custom CSS code


Examples of custom Javascript code


Frequently asked questions about CSS

Where can I insert the CSS code?

CSS codes are generic to all pages of the promotion (the same style code will be applied to all the elements that comply with the CSS route specified on them). These codes have to be applied by going to Editor > General > Design > CSS Styles, where you'll see the field "Insert your own code". Insert the code without using the tag <style> (the application will add it automatically).



How can I obtain the route of an HTML element to use it on my CSS code?

You can use some tools for developers, such as the Inspect Element on GoogleChrome, or the free add-on Firebug for Firefox.

Click on the right button on the element you want to edit and select the option "Inspect element" (or similar).

You will see the HTML console inspector with the element highlighted. Sometimes the element can be displayed in an inferior level, so we will need to analyze the code until we see exactly which is the element we want to edit.

In the CSS edit area of the Inspector we will obtain the route. Generally, if you edit an element whose class starts with gui_ or hb_ it means that it is a generic element that can appear in several places within the platform. Therefore, if you only need to edit a specific element, there's always a more specific class (even at a higher level) in order to specifically select it.

We can also apply styles or changes to already existing ones temporarily (upon refreshing the browser these changes will restore) and changes will be reflected on the web page in real time.


What can and what can not be changed by using CSS?

Basically, any property with a visual effect can be modified by using CSS, with the exception of contents. That is, backgrounds, positions, margins, paddings, rounded corners, borders, colors, opacity, visualization, and plenty of other parameters.

Any other thing that implies content (the text of a button, for example) or add new elements to a page, can not be done with CSS. On the contrary, it can be achieved with Javascript.


Can I use a font not included in the list on Editor > Design?

No. Only system fonts and the entire GoogleFonts catalog can be used. Fonts hosted on own servers are not supported.


Can I relocate an element within a same page with CSS?

Yes, but with some exceptions. Take into account that the pages of the platform are responsive, which means that you can not be completely sure at which resolution will users view the promotion, since this will depend on the width of their device screen.

Our recommendation is that you only modifiy the position of an element if you verify all widths available in the preview section of the promotion and verify that is is correctly displayed.

CSS attributes such as float or position:absolute must be used with caution since they have a direct effect on the vertical distribution of the elements within a page.


How can I customize the styes for mobile devices?

Styles can be customized by using MediaQueries according to the width of the user's device, thus improving their experience with your promotion.

In order to apply MediaQueries simply add to the end of all custom CSS your own instructions for all widths you may need to make everything look perfect.

The break points we use in Easypromos are for the following widths (in brackets we indicate the equivalent to mobile devices, but these styles also apply depending on the width of the screen regardless of the device, or if in desktop version):

  • 1024px (iPad and Kindle landscape mode)
  • 810px (Facebook tab)
  • 768px (iPad vertical mode)
  • 685px (Samsung Galaxy landscape mode)
  • 600px (Kindle vertical mode)
  • 568px (iPhone 5 landscape mode)
  • 550px (intermediate measure)
  • 480px (iPhone 4 and below landscape mode)
  • 414px (iPhone 6 Plus vertical mode)
  • 380px (Samsung Galaxy vertical mode)
  • 320px (iPhone 5 and below vertical mode)
  • 240px (minimum promotion width)

View example of use


List of CSS selectors to customize the styles conditionally

By page (in #ep-contents)

  • Welcome: .promoview_page
  • Quiz: .quiz_page
  • Form: .formadd_page
  • Thank you: .success_page
  • Already participating: .success_page.already_page
  • Entries list: .entries_page
  • Single entry: .voteme_page
  • Winners: .winners_page
  • Custom section: .custom_section_page

By browser (in html)

  • Google Chrome: .is_chrome
  • Mozilla Firefox: .is_firefox
  • Apple Safari: .is_safari
  • Opera: .is_opera
  • Microsoft Edge: .is_msie

By device (in html)

  • Desktop: .is_desktop
  • Mobile: .is_mobile
  • iPhone: .is_mobile.is_iphone
  • iPad: .is_mobile.is_ipad
  • Android: .is_mobile.is_android
  • WindowsPhone: .is_mobile.is_windows

By language (in html)

  • Language: .is_{lang_code}

By origin (in html)

  • Microsite (by default): [none]
  • Within a widget (or Facebook Tab): .in_widget.in_iframe


Frequently asked questions about Javascript

Where can I insert the Javascript code?

HTML or Javascript code must be applied in each of the pages of the promotion, allowing different behaviors in each of them, or adding tracking pixels in different parts of the promotion. Javascript codes must be applied by going to Editor > {page} > Advanced, where you'll see the field "Javascript, HTML and your own code" for the pages "Welcome", "Entry form", "Thank you" and "Gallery":



How can I obtain the route of an HTML element to use it on my Javascript code?

Read the frequently asked question about CSS.


Can I use Javascript libraries as jQuery?

By default, the application imports and uses jQuery 1.8.3 library, which can be used in custom JavaScript code without any problem.

If you need to import some other library, you can use the import code below in the first line of the custom code (adapting the path to the file you need). It is important that the file is hosted on a server that supports HTTPS):

<script type="text/javascript" src="https://absolute-path-to-file.js"></script>


What can and what can not be done by using Javascript?

Perhaps the most common use of this feature is the addition of custom pixel tracking to map the route of users within a promotion.

You can also add some HTML elements, considering that it is always added to the bottom of the page and must then be positioned with CSS (see "Can I relocate an element within a same page with CSS?" for more information).

The best way to add an HTML element is by using JavaScript and the function append() or prepend()of jQuery for the element that should contain it.

You can also edit the content of an item (such as its text) by using the function html() of jQuery. In thi way, the default text of the platforms can be modified (view example).


Can I apply CSS styles to elements added by using Javascript

Of course. CSS styles are applied to all items that meet their selectors at any time. Thus, you can add an HTML element to a page by using Javascript and assign it a CSS class to be defined in the CSS section and that will be applied automatically when the dynamic HTML appears on the page.

It is not a good practice to add CSS styles in a style attribute directly in HTML, or in the same HTML element created via Javascript. The best option is always to add a class to that element and customize it by CSS.


Why I see the Javascript code as text on the web?

In order to be interpreted as executable code and not as a text, any Javascript code must go inside a tag  <script type="text/javascript"></script>.


Why is my Javascript code not executing?

This can be caused by different reasons. The most common is that it does actually apply but not in the Editor (which only shows content previews and not real content). To verify that the code is actually not running, go to the preview section of the promotion.

It may also happen that the code has been entered in any other page that the one it should be applied. The Javascript code depends on the page we are (thus, the home page has a code which is different than the entry form, the thank you page or the entries list page). The code must be applied to all the pages where we want it to be executed, even if it means entering the same code on every page.

It may even happen that the code is executed before the elements to be modified exist. Therefore, it is important to insert all of the code in a function ready() of jQuery (view example).

If the code keeps being ignored, verify that the code entered is correct and that there is any error in the Javascript console (visible in the Inspector of Elements, for example), in which case, correct the error and try again.

For example, in the picture above the Javascript fails because the code entered ($('.enter').htm("ENTER");) contains a jQuery function that does not exist (it is actually $().html(); and not$().htm();).


Examples of custom CSS code

  1. Add rounded borders to the Enter button

    .enter {
  2. Hide the registration dates and keep the Enter button visible

    .dates_mod {
  3. Change the color of the promotion title

    .promo_desc .promotion_title {
        color:#FF0000 !important;
  4. Show a red background for registration fields that present errors

    .form_register .text .form-error,
    .form_register .file .form-error,
    .form_register .select .form-error {
        background:rgba(255, 0, 0, 0.3) !important;
  5. Hide the main picture in the landing page for widths below 480px

  1. /* Rest of the custom code CSS here */
    @media screen and (max-width:480px) {
        .promoview_page .main_img_promo {
  2. Swap the Enter and Vote for Entries buttons in the landing page

    .entries_button_flex {


Examples of custom Javascript code

  1. Add a "NEW" tag above the promotion title

    In the fields Editor > Landing page > Javascript, HTML and your own code:

    <script type="text/javascript">
        $(document).ready(function() {
            $('.promo_desc').prepend('<h5 class="new_promo">NEW</h5>');

    In the fields Editor > Appearance > CSS styles:

    .new_promo {
        padding:0 10px;
  2. Change the text of all Share buttons

    In the fields Editor > Landing page | Entry form page | Thank you page | Entries list page > Javascript, HTML and your own code:

    <script type="text/javascript">
        $(document).ready(function() {
            $('.gui_share_button a').html('SHARE');
    Note: In case that you need to modify a system text that is not editable from the promotion Editor, we recommend you to create a Dictionary, which will allow you to customize any text of any screen of the promotion. Learn here how to create a Dictionary to use it in your promotions.
  3. Add a characters counter to an additional text field on the registration form

    In the fields Editor > Registration form > Javascript, HTML and your own code:

    <script type="text/javascript">
        $(document).ready(function() {
        	// the fields class (that must be unique) must be found in the <div> that contains the textarea to be edited:
        	var field_selector = '.field_UserCustomField1';
        	// Maximum characters allowed:
        	var field_max_length = 500;
        	// Add a unique identifier so that the code can recognise where to display the data:
        	var feed = 'ag8qj7';
    	// Do not edit the code from now on unless you have it clear:
            $(field_selector).append('<div class="charCounter condensedTypography hb_secondaryFont"><div id="overLimit'+feed+'" class="maxChars">Maximum '+field_max_length+' characters: </div><div id="charCounter'+feed+'" class="counter"><span id="char-counter'+feed+'">'+field_max_length+'</span></div></div>');
    	$(field_selector+' textarea').attr('maxlength', field_max_length);
                input:$(field_selector+' textarea'),
  4. Move the Legal Disclaimer under the Register button

    In the fields Editor > Registration form > Javascript, HTML and your own code:

    <script type="text/javascript">
        $(document).ready(function() {
Have more questions? Submit a request


Please sign in to leave a comment.