English (US) Español

Menu

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

Avatar
Marc Mateos - Easypromos
  • Updated

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 >  Design > Advanced > CSS Code, where you'll see the field "Insert your own code". Insert the code without using the tag <style> (the application will add it automatically).

CSS_code.jpg

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?

Yes. You can import the files of the typography you want to use in a custom server with HTTPS secure connection enabled. Then, you need to import them to the promotion with some code.

You will have to include this code under Editor > General > Design > Advanced > CSS Styles:

@font-face {
font-family: “CustomFont”;
src: url(“url_of_the_font”);
}

The font files can be in the following formats .otf, .ttf, .woff y/o .woff2:

@font-face {
...
src: src: url("custom-font.ttf"),
url("custom-font.otf") format("opentype"),
url("custom-font.woff") format("woff"),
url("custom-font.woff2") format("woff2");
}

Additionally, you can insert further descriptions to the font:

  1. Define how the font should be stretched with “font-stretch”.
  2. Define how the font should be styled with “font-style”.
  3. Define the boldness of the font with “font-weight”.
  4. Define the range of unicode characters the font supports with “unicode-range”.

You can see how to implement this in the following example:

@font-face {
...
font-stretch: expanded;
font-style: italic;
font-weight: bold;
unicode-range: U+26;
}

In case you have the font in different files:

  custom-font-bold.otf

  custom-font-light-italic.otf

  custom-font-medium.otf

  custom-font-regular.otf

The CSS code will look like this:

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-bold.otf”) format("opentype");

  font-weight: bold;

  font-style: normal;

  }

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-light-italic.otf”) format("opentype");

  font-weight: light;

  font-style: italic;

  }

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-medium.otf”) format("opentype");

  font-weight: medium;

  font-style: normal;

  }

  @font-face {

  font-family: “CustomFont”;

  src: url(“custom-font-regular.otf”) format("opentype");

  font-weight: normal;

  font-style: normal;

  }

Using this method, when you use the font in your CSS code, you can use the font with the same name and variations. 

Lastly, under this code, you need to indicate to which elements of the promotion you want to assign this new typography.

For example, to use it in all the elements with the main typography, this would be the CSS code:

  .awesome * {

    --main-font:"CustomFont", sans-serif;

  }

And, to use it in all the elements with the secondary typography, this would be the CSS code:

  .awesome * {

    --secondary-font:"CustomFont", sans-serif;

  }

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
  • Final: .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", "Final" 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 final 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 {
    overflow:hidden;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    border-radius:50px;
}

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

    .dates_mod {
    display:none;
}

  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 {
        display:none;
    }
}

  2. Swap the Enter and Vote for Entries buttons in the landing page

    .entries_button_flex {
    -webkit-box-ordinal-group:-1;
    -moz-box-ordinal-group:-1;
    -ms-flex-order:-1;
    -webkit-order:-1;
    order:-1;
}

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>');
    });
</script>

    In the fields Editor > Appearance > CSS styles:

    .new_promo {
    display:inline-block;
    padding:0 10px;
    background:#FF0000;
    margin-bottom:5px;
    position:relative;
    top:-5px;
}

  2. Change the text of all Share buttons

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

    <script type="text/javascript">
    $(document).ready(function() {
        $('.gui_share_button a').html('SHARE');
    });
</script>
    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);

        EP.charCount({
            container:$('.charCounter'),
            input:$(field_selector+' textarea'),
            target:$('#charCounter'+feed),
            max:field_max_length,
            over:$('#overLimit'+feed),
            submit:$('#botosubmit'+feed)
        });
    });
</script>

  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() {
        $('.legal_text').appendTo('.register_call_to_action_flex');
    );
</script>

Related articles

Comments

0 comments

Please sign in to leave a comment.