Following the implementation of the new design, allowing a further personalization of promotions, some minor modifications have been made in the visual part of the promotion, to unify their elements.

For all these changes, we provide the CSS codes in case you would like to revert the design of your promotion and have it more alike to what it was before the change. These CSS codes should be added, if you want to apply any, in the Editor > Design > Advanced > CSS section of your promotion.

Customization via CSS codes is only available in promotions created in the White Label version.

Table of contents:

• Generic changes

  • Text and elements selection

  • Opacity of the promotion container

• Promotion Header

  • Menu icons and social media icons

• Text

  • Paragraphs and headers H1, H2 and H3

  • Text color of H1 headers

• Buttons

  • Generic

  • Linear style

• Background image

  • Generic

• Floating layers

  • Share promotion / participation

• Quiz

  • Pagination (progress bar mode)

Generic changes:

Text and elements selection:

The selection of texts and other items with the cursor is now made using the main color of the promotion with total opacity, and not at 20% opacity as before. The color of the text of the selected elements automatically becomes black or white, depending on the clarity of the background color of the selection, to ensure its readability.

The reason for this change is that, depending on the specific settings of the promotions, that selection was sometimes not visible or difficult to read.

This should be done from the editor of your promotion > Design > Appearance > Others.

Opacity of the promotion container:

The selection of the opacity of the container must now be made from the color selector for the container.

The reason for this change is that we now allow custom background color to the container in RGBA, which implies that the opacity is already selected within the color format.

The selection must be done from the promotion Editor > Design > Appearance > Colors.

Promotion header:

Menu icons and social media icons:

Icons will have the same color as the one selected in the Editor > Design > Links > Text color.

The reason for this change is that, now, both the header and the links included in it can use their own custom color and, for consistency reasons, all links have the same color.

You can use the following CSS code to revert to the prior visual style:
If the promotion header is white:

    .header_cont .gui_square_button {
    --text-color:0, 0, 0, 1;
 

} If the promotion header is dark:

    .header_cont .gui_square_button {
    --text-color:255, 255, 255, 1;
    }
  

Text:

Paragraphs and headers H1, H2 and H3:

All text blocks have been unified across all promotion pages in terms of font size, spacing and element separation.

The reason for this change is that you can now customize the font size, spacing and color of the H1, H2 and H3 headers independently.

You can return to the visual style prior to the change by applying a CSS code.
In this case the code will depend on the page and text.

Text color of H1 headers:

H1 headers are displayed in the secondary color.

This change was applied to gain visibility in the H1 headers.

To revert to the origin style, you can apply the following CSS code:

  .root {
  --h1-color:var(--text-color-sec);
  }

Buttons

Generic:

The following configuration option has been removed:

• Button type selector: Solid/linear. This change must now be made by combining different color and opacity options in the Editor > Design > Appearance > Buttons section.

The changes applied for each type of button are listed below:

• Solid buttons:
  • Background color: main color of the promotionn
  • Text color: text color of buttons specified in previous editor settings
• Linear buttons:
  • Background color: transparent
  • Text color: main color of the promotion
  • Border width: 2px
  • Border color: main color of the promotion
  • Background color in HOVER state: Promotion main color, 20% opacity
  • Text color in HOVER state: Promotion main color, 80% opacity

Linear style:

The arrow icon on the linear type buttons has been removed.

The change allows the unification and rationalisation of buttons, to offer advanced customizations.

To revert to the original visual style, apply the following CSS code:

 .flex_button a:not(.vote_button)::after {
   font-family:"knk-icons";
   content:"\2666";
   font-size:1.6em;
   position:absolute;
   right:var(--grid-1);
   margin-inline-end:0;
   padding-block-start:3px;
   top:calc(50% - 10px);
   transition:right 0.2s ease-in-out;
}

@media (hover:hover) {
   .flex_button a:not(.vote_button):hover::after {
       right:0;
   }
}

Background image:

Generic:

The following configuration options have been removed:

- Predefined background image: it is now necessary to upload your own image. Promotions that were already activated with predefined images will still have that background image, but if you want to apply any changes, you will need to upload your own image. If needed, you will be able to download the current predefined image to continue using it.
- Opacity of the background color: you will select the opacity using the color selector directly. If the background image is set to "Full screen", the background color option will not appear (as the background image will occupy the entire available space). An ink (corresponding to a solid color above the background image) can be applied to edit the color of your image.

Floating layers:

Share promotion / participation:

From now on, social media icons will have the same color as the one selected in the Editor > Design > Links > Text Color section.

As both the header and the links in it can have a custom color, for consistency reasons, all links now have the same color.

You can apply the following CSS code to revert to the original style:

 .share_on_social.is_facebook {
   --text-color:var(--facebook-color);
}

.share_on_social .is_twitter {
   --text-color:var(--twitter-color);
}

.share_on_social .is_pinterest {
   --text-color:var(--pinterest-color);
}

.share_on_social .is_linkedin {
   --text-color:var(--linkedin-color);
}

.share_on_social .is_mail {
   --text-color:var(--mail-color);
}

.share_on_social .is_whatsapp {
   --text-color:var(--whatsapp-color);
}

.share_on_social .is_line {
   --text-color:var(--line-color);
}

.share_on_social .is_telegram {
   --text-color:var(--telegram-color);
}

Quiz:

Pagination (progress bar mode):

The progress bar in quizzes is now located above the question, and not below.

This edit allows the repositioning effect between questions of different heights to be avoided.

Apply the following CSS if you would like to revert to the original style:

  .quiz_progress {
  order:1;
  margin:1em 0 0;
  }