Editing the visual of LGT using CSS styles
- Customer Service
- Oleg Padalko (Unlicensed)
UA | US | RU
|
|---|
If you're missing the editor's built-in capabilities to change the appearance of built-in LGT forms, widgets, and popups on your site and want full integration with your site's design, you can follow a few simple steps:
CSS styles are edited from the LGT settings in the "Traffic" tab, in the "Script for the HEAD tag" window.
In order to change styles, you need to write the following code<style> // Place to insert your styles</style>
Consider a situation in which we want to remove the shadow from a form for better integration into the overall design of your site:
An example of the code that needs to be inserted into the “Script for the HEAD tag” on how to remove the shadow from LGT:
<style>
#leadgentool-card .adaptive-container {
box-shadow: none !important;
}
</style>
Decoding the code:
#leadgentool-card - A unique identifier for our LGT, not a class.
adaptive-container - LGT container class
box-shadow - Style defining the shadow for the component; its parameter none - disables the shadow. (For more information on styles, see the Help at the end of the document)
!important - Added at the end of the parameter, indicates that this setting is given priority and that this parameter will always be used. Not required, but if when adding a style, the style is not applied, it is better to specify it.
Other classes of LGT components:
.video
.top-image
.text-block
.social-button
The main styles are:
background - change background
color - change text color
box-shadow - adding shadow
padding or margin - adding padding to an element
width - element width
height - element height
font-size - text size
Basic parameters for styles:
Color in hex - #FF0000 or rbg - rgb(255,0,0)
Dimensions in pixels, for example 16px
CSS (Styling) Reference:CSS Справочник и примеры элементы