VEC Template Edits | Community
Skip to main content
May 28, 2025
Question

VEC Template Edits

  • May 28, 2025
  • 1 reply
  • 313 views

Hi, I am using the lightbox target experience template and can't figure out what part of the code needs to be edited in order to have the blue box have more space on the top and bottom. I have tried changing the 42px (in orange below) but that does not change anything. Does anyone have any ideas? 

 

 

<script>
// Lightbox
var att_config = {
// =========================== USER DEFINED CONFIGURATION ===========================
// Removed for space //
// =========================== END USER DEFINED CONFIGURATION ===========================
};
(function(){"use strict";var title=null!=att_config.title&&att_config.title?att_config.title:"",subtitle=null!=att_config.subtitle&&att_config.subtitle?att_config.subtitle:"",buttonText=null!=att_config.buttonText&&att_config.buttonText?att_config.buttonText:"",buttonLink=null!=att_config.buttonLink&&att_config.buttonLink?att_config.buttonLink:"",declineText=null!=att_config.declineText&&att_config.declineText?att_config.declineText:"",template='\n<div id="att_lightbox">\n <div class="att_lightbox_background"></div>\n <div class="att_popup">\n <div class="att_lightbox_left">\n </div>\n <div class="att_lightbox_right">\n <div class="att_lightbox_right_contents">\n <h1 class="att_lightbox_header">'+title+'</h1>\n <p class="att_lightbox_subhheader">'+subtitle+'</p>\n <a href="'+buttonLink+'" class="att_lightbox_button" rel="nofollow noopener">'+buttonText+'</a>\n <a id="att_lightbox_close" href="#">'+declineText+"</a>\n </div>\n </div>\n </div>\n</div>\n",bgImage=null!=att_config.imageUrl&&att_config.imageUrl?"background-image: url("+att_config.imageUrl+");":"",style="\n#att_lightbox {\n display: none;\n justify-content: center;\n align-items: center;\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1000;\n width: 100vw;\n height: 100vh;\n margin: 0;\n padding: 0;\n}\n.att_lightbox_background {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: black;\n opacity: 0.75;\n z-index: 1000;\n margin: 0;\n padding: 0;\n}\n.att_popup * {\n font-family: Helvetica, Arial, sans-serif;\n}\n.att_popup {\n max-width: 800px;\n max-height: 500px;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: row;\n z-index: 1001;\n border-radius: 1px;\n}\n.att_lightbox_left {\n max-width: 540px;\n width: 100%;\n height: 100%;\n background-color: white;\n "+bgImage+"\n background-size: auto 100%;\n background-position: center;\n}\n.att_lightbox_right {\n background-color: white;\n display: block;\n width: 100%;\n height: 100%;\n position: relative;\n}\n.att_lightbox_right_contents {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin: 20px;\n height: calc(100% - 40px);\n width: calc(100% - 40px);\n}\n.att_lightbox_header {\n text-align: center;\n font-size: 32pt;\n color: #221E1F;\n margin: 0;\n padding: 1rem;\n line-height: 1.35;\n}\n.att_lightbox_subhheader {\n font-size: 14pt;\n text-align: center;\n color: #221E1F;\n line-height: 1.35;\n margin: 20px 30px;\n padding: 0;\n}\n.att_lightbox_button {\n height: 42px;\n width: auto;\n min-width: 80%;\n background-color: #4CAF50;\n color: white;\n border-radius: 2px;\n text-decoration: none;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 11pt;\n margin: 10px;\n}\n.att_lightbox_button:hover {\n background-color: #388E3C;\n text-decoration: none;\n cursor: pointer;\n}\n.att_lightbox_button:active {\n background-color: #4CAF50;\n text-decoration: none;\n cursor: pointer;\n}\n.att_lightbox_button[disabled=disabled],\n.att_lightbox_button:disabled {\n background-color: #D8D8D8;\n text-decoration: none;\n}\n#att_lightbox_close {\n font-size: 12pt;\n color: #4A4A4A;\n text-align: center;\n text-decoration: none;\n margin: 10px;\n font-weight: 300;\n}\n#att_lightbox_close:hover {\n text-decoration: underline;\n}\n@media (max-width: 801px) {\n .att_popup {\n margin: 20px;\n }\n .att_lightbox_left {\n display: none\n }\n}\n",handlers=function(){var t=null!=att_config.delay&&att_config.delay?att_config.delay:5;function n(){document.getElementById("att_lightbox").style.display="none"}!1!==att_config.delay&&setTimeout(function(){att_config.fired||(document.getElementById("att_lightbox").style.display="flex",att_config.fired=!0)},1e3*t),document.getElementById("att_lightbox_close").addEventListener("click",function(t){t.preventDefault(),n()}),document.querySelector(".att_lightbox_background").addEventListener("click",function(t){att_config.clickBackgroundToClose&&(t.preventDefault(),n())})};injector({template:template,style:style,handlers:handlers});
"use strict";function injector(e){var t=null!=e.el&&e.el?e.el:document.body,l=document.createElement("div");e.templateClass&&l.classList.add(e.templateClass),l.innerHTML=null!=e.template&&e.template?e.template.replace(/(\r\n\t|\n|\r\t)/gm,""):"",t.appendChild(l);var n=document.createElement("style");n.innerText=null!=e.style&&e.style?e.style.replace(/(\r\n\t|\n|\r\t)/gm,""):"",document.head.appendChild(n),null!=e.handlers&&"function"==typeof e.handlers&&e.handlers()}})();
</script>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

kandersen-1
Community Advisor
Community Advisor
June 10, 2025

Hi @katiema14 ,

Have you tried to edit these two?

.att_lightbox_button { height: 42px; width: auto; min-width: 80%; background-color: #4CAF50; color: white; border-radius: 2px; text-decoration: none; display: flex; justify-content: center; align-items: center; font-size: 11pt; margin: 20px 10px; /* <- try to update this line */ } ... .att_lightbox_right_contents { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 40px 20px; /* <- or this one*/ height: calc(100% - 40px); width: calc(100% - 40px); }

Hope this helps!

I share weekly Adobe tips on LinkedIn—connect with me!Every Wednesday: &#34;Something a client recently asked...&#34;LinkedIn Profile