Modal Offer Tag Custom CSS

[oneflash]

Does anyone have a good example of how to alter the CSS of the popup within the Modal Offer tag? As an example, even when I use custom CSS it seems the Tealium system has a default style sheet that overrides my custom settings. Just looking for a working example to see what I might be doing wrong.

[BenStephenson]

Hi @oneflash

I've used the modal offer extensively for a couple of different clients.

I tend to always set an impossible load condition (usually "page_name equals DO NOT AUTOLOAD" or something similar), and then add a "controller" extension with code similar to:

var cookieController = new window.TEALIUM.CookieHandler();
if( utag.data.aaPageName == "appropriate:pagename" && 
    cookieController.cookie.get("welcomeMessage") == null )
{
  utag.ut.loader({src: utag.cfg.path + 'utag.modalExt_XX.js?utv=' + utag.cfg.v,cb: function() { utag.extn.mdlW.load(); }});
  cookieController.cookie.set("welcomeMessage", 1);
  /*cookieController.cookie.set("welcomeMessage", 1, 365);  //number of days of cookie expiration */
}

replace XX with the UID of your modal extension.

The cookie is to stop it appearing every time.  You don't need that if you want it to load every time. The Cookie Handler library was supplied by Tealium a while back, your account manager should be able to give you the code (if not I can send it over)

Then the CSS looks like this:

media screen and (max-width: 609px) {
    #_tealiumModalWindow {
    width: 310px;
    height: 400px;
    position: relative;
    margin: 100px auto;
    background-color: #fff;
    border: 3px solid #0079c8;
    border-radius: 15px;
  } 
}
@media screen and (min-width: 610px) {
  #_tealiumModalWindow {
    width: 575px;
    height: 300px;
    position: relative;
    margin: 100px auto;
    background-color: #fff;
    border: 3px solid #0079c8;
    border-radius: 15px;
  } 
}
#_tealiumModalHeader {
    position: absolute;
    width: 90%;
    padding: 25px;
    overflow: hidden;
    font-size: 1em;
    text-align: left;
    font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
} 
#_tealiumModalBody {
    position: absolute;
    top: 28%;
    width: 95%;
    overflow: hidden;
    padding: 10px;
    text-align: left;
    font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
} 
#_tealiumModalBody p {
  padding-left: 5px;
  margin: 12px;
  font-size: 15px;
}
#_tealiumModalBody ul li {
    list-style: initial;
    margin-left: 30px;
  font-size: 15px;
}
#_tealiumModalClose {
    background: #0079c8;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
    cursor: pointer;
} 
#_tealiumModalClose:hover { background : #CCC; }

and the code looks like this:

<div id="_tealiumModalWindow">
  <div id="_tealiumModalHeader">
    <p>Thank you for your patience while we improve the new site.</p>
  </div>
  <div id="_tealiumModalBody">
    <p>Content paragraph.</p>
    <p>Content Paragraph</p>
  </div>
  <div id="_tealiumModalClose" class="tClsIcn" onclick="s.tl(true, \'o\', \'linkid:cta:dismiss\'); utag.extn.mdlW.dismiss()">X</div>
</div>

This was used as a pop up on a landing page.

If you need it to be multi language, then create a separate modal offer for each language with localised content, each with a DO NOT AUTOLOAD condition, then use a controller JS extension something like this (this JS not be totally perfect as I've edited to shorten it in this window rather than in a JS editor, but you should get the idea):

window.reasonText = window.reasonText || {};
window.reasonText = 
  {
    "popUpCookieName" : "NoticeSeen", 
    "popUpExtensionId" : "698",
    "bannerText" : "IMPORTANT MESSAGE: blah blah blah."
  };

if(b["language"].toLowerCase() == "fr")
{
  window.reasonText = 
  {
    "popUpCookieName" : "NoticeSeen",  
    "popUpExtensionId" : "699",
    "bannerText" : "MESSAGE IMPORTANT : blah blah in french"
  };
}
else if(b["language"].toLowerCase() == "de")
{
//repeat as necessary
}



if( b.pageName == "reason_pagename" && 
    b.reason == true && 
    cookieController.cookie.get(window.reasonText.popUpCookieName) == null )
{
  utag.ut.loader({src: utag.cfg.path + 'utag.modalExt_' + window.reasonText.popUpExtensionId + '.js?utv=' + utag.cfg.v,cb: function() { utag.extn.mdlW.load(); }});
  cookieController.cookie.set(window.reasonText.popUpCookieName, 1);
}

Hope that helps...

[BenStephenson]

Something else to look out for - if you put the modal extension into custom mode, and then click into another tab (ie tags or data objects) when you come back to the extensions tab your custom content will have been removed.  This is a bug.  And it's really annoying if you forget.

So make sure you close up the modal extension before switching tabs.

[kathleen_jo]

Great solution @BenStephenson! 

@oneflash we use something similar to this internally here at Tealium. Let us know if you have any other questions.