HTML / CSS Code

Each Popup of WordPress Popup plugin by Supsystic has it’s HTML content and CSS style. It consists of static data – HTML tags and CSS styles, and variables – to display dynamic content (like colors, texts, etc.). Also our render engine use Twig to prepare Popup content. You can use there some our internal variables, or Twig syntax. Edit HTML and CSS code of popup on CSS/HTML Code plugin tab.

For example, our internal variables can be:

1. [ID] – this is not actually Popup ID in database, this is view ID – unique ID to display our Popup without problems and conflicts
2. [width], [heights] – width and height params, height is used not for all templates
3. [width_measure] – can pe percents (%) or pixels (px)
4. [bg_type_0] – can be [bg_color_1], [bg_color_2], etc., this is background type – none, color or image, – corresponding color from Design -> Appearance section
5. [bg_color_0] – can be [bg_color_1], [bg_color_2], etc., this is background color, corresponding color from Design -> Appearance section
6. [bg_img_0] – can be [bg_img_1], [bg_img_2], etc., this is background image URL, corresponding color from Design -> Appearance section
7. [enb_label] – label text is enabled or not
8. [label] – label text itself
9. [enb_txt_0] – can be [enb_txt_1], [enb_txt_2], etc., this parameter show – is text field, corresponding from Texts section, enabled or not
10. [txt_0] – can be [txt_1], [txt_2], etc., this is actually text field, corresponding from Texts section
11. [enb_subscribe] – subscribe is enabled in Design -> Subscribe or not
12. [sub_form_start] – start of build-in plugin subscribe form – mean actually HTML form tag with all required for selected subscribe method parameters. If you want to build-in your own form – remove this from code.
13. [enb_sub_name] – name field is enabled or not for subscribe
14. [sub_btn_label] – subscribe button name from admin area
15. [sub_form_end] – end tag for subscribe form, generated by plugin. If you want to build-in your own form – remove this from code.
16. [enb_sm] – enable Social Media buttons in Design -> Social section or not
17. [sm_html] – generated by plugin Social Media HTML code
18. [enb_foot_note] – foot note from Texts section is enabled or not
19. [foot_note] – foot note itself

As you can see – all our internal variables of WordPress Popup plugin use square brackets – [] – in template. There are also some other variables – but list is too long. If you need some other variables clarifications – you can contact us – and we will try to help you.

You can also use some conditions in Popup plugin by Supsystic, for simple condition – like if(some_variable) – you can use our syntax, like:

[if enb_sm]
// Do something
[endif]

For more complicated – it’s better to use Twig syntax:

{% if popup.params.tpl.enb_subscribe or popup.params.tpl.enb_foot_note or popup.params.tpl.enb_sm %}

As you can see in Twig syntax direct call in template code you should use not just variable name, but it’s path in Popup parameters structure:

popup.params.tpl.

Actually – that’s why we created our internal syntax: to make work with our templates of popup plugin easier for you.

Also, you can see from code – that we use internal function – adjust_brightness(). It serves us to create some variations of one color – make it lighter or darker. It take 2 parameters as arguments: first – base color, second – steps for adjustments, number from -255 to 255, if value is less then 0 – it will make base color darker, else – lighter.

If you created new pretty template, and want it to be included in our plugin – you can contact us in our contact form, add to your subject – “Add my Popup to Your Plugin”, with screenshot of your template – and we will review it to be included in our plugin.