/
Styles Implementation

Styles Implementation

Owned by Sebastian Perez (Unlicensed)
Mar 07, 2018

 

1. The Styles Function (Custom-Function) can be easily created in the platform. Go to >> Inventory >> Spaces >> Custom F. Previewer

 

 

Once the style/customization is selected, the resulted code has to be retrieved and included into the AjaxV4 tag:

 

 

 

2. Add the Custom Function into the AjaxV4 Code

 

AjaxV4 Multiple (Zone)


This custom function is added before the tag this way:

 

<script language='JavaScript' type='text/javascript'><!--

Custom Function 

// -->
</script>


Ajax Tag

<script type='text/javascript'>request to the space;</script>

 

Below, the complete function is detailed:

 

<script language='JavaScript' type='text/javascript'><!--

function eplCustomShow(adsArray) {
    var r=''; pad=''; a1=false;
    // Variables para personalizar:
        var cols_per_row = 1; 
        var imgFloat = 'left';
        var code_header = 'ANUNCIOS E-PLANNING';
        var style_header = 'text-align:left;font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:10px;font-weight:normal;background-color:#FFFFFF;';
        var code_footer = '<a href='http://www.e-planning.net' style='font-family:Arial, Helvetica, sans-serif;color:#0D53B2;font-size:10px;font-weight:normal;text-decoration:none;' target='_blank'>Publica tu anuncio</a>';
        var style_footer = 'text-align:right;background-color:#FFFFFF;';
        var style_table = 'border:1px solid #CCCCCC;height:110px;width:180px;background-color:#DDDDDD;';
        var style_cell = 'border:1px solid #AAAAAA;height:85px;width:167px;background-color:#FFFFFF;padding:0px;text-align:left;';
        var style_title = 'font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:11px;font-weight:bold;text-decoration:none;';
        var style_desc = 'font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:10px;font-weight:

normal;text-decoration:none;';
        var style_url = 'font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:10px;font-weight:normal;text-decoration:none;';
        var adsStretch = false;
        var dirStretch = 2;
        var image_small_wh = [ 67 , 67 ];
        var image_large_wh = [ 100 , 100 ];

    // fin variables personalizables
    var coln = 0;
    for (var i=0; i<adsArray.length; i++) {
        var ad = adsArray[i];
        if (!ad.shown && (1==ad.t||2==ad.t||7==ad.t||8==ad.t||41==ad.t) && !(7==ad.e||8==ad.e)) {
            if (!a1) {
                r+= '<table style=''+ style_table +''>';
                if (code_header) r+= '<tr><th style=''+style_header+''>'+code_header+'</th></tr>';
                r+= '<tr><td><table border='0'>';
                a1 = true;
            } else {
                pad = 'padding-left:10px';
            }
            if (0===coln) {
                r+= '<tr>';
                coln++;
            }
            r+= '<td style=''+ style_cell +''>';
            if (41==ad.t) { // link de texto
                r+= '<a target='_blank' href=''+ ad.lU +'' style=''+ style_title +''>'+ ad.tit +'</a>';
                if (ad.desc) r+= '<br/><span style=''+ style_desc +''>'+ ad.desc +'</span>';
                if (ad.urlv) r+= '<br/><a target='_blank' href=''+ ad.lU +'' style=''+ style_url +''>'+ ad.urlv +'</a>';
            } else if (!ad.e) { // flash o imagen sin efecto
                r+= ad.getBaseTag();
            } else { // imagen+texto
                if (33!=ad.e) r+= '<a target='_blank' href=''+ ad.lU +'' style=''+ style_title +''>'+ ad.tit +'</a><br/>';
                r+= '<div'+(imgFloat?' style='float:'+imgFloat+';':'')+' position:relative;'+(adsStretch?' width:'+image_small_wh[0]+'px; height:'+image_small_wh[1]+'px;'':'')+''>';
                r+= '<div'+(adsStretch?' style='position:absolute;'':'')+'>';
                r+= '<a target='_blank' href=''+ ad.lU +''>';
                r+= '<img src=''+ ad.getURL() +'' border=0 style='width:'+image_small_wh[0]+'px; height:'+image_small_wh[1]+'px;' '+(adsStretch?'onmouseover='javascript:eplCustomStretch(this,'+image_large_wh[0]+','+image_large_wh[1]+','+dirStretch+')' onmouseout='javascript:eplCustomStretch(this,'+image_small_wh[0]+','+image_small_wh[1]+','+dirStretch+')'':'')+' />';
                r+= '</a></div></div>';
                if (34==ad.e || 35==ad.e) r+= '<br/>';
                r+= '<span style=''+ style_desc +''>'+ ad.desc +'</span>';
                if (ad.urlv) r+= '<br/><a target='_blank' href=''+ ad.lU +'' style=''+ style_url +''>'+ ad.urlv +'</a>';
            }
            r+= '</td>';
            if (coln >= cols_per_row) {
                r+='</tr>'; coln=0;
            } else {
                coln++;
            }
            ad.shown = true;        
        }
    }
    if (a1) {
        if (0!==coln) {
            while (coln <= cols_per_row) {
                r+= '<td style='display:none;'></td>';
                coln++;
            }
            r+= '</tr>';
        }
        r+= '</table></td></tr>';
        if (code_footer) r+= '<tr><th style=''+style_footer+''>'+code_footer+'</th></tr>';
        r+= '</table>';
    }
    return r;
}
function eplCustomStretch(obj,w,h,dir) {
        obj.style.width = obj.parentNode.parentNode.style.width = w+'px';
        obj.style.height = obj.parentNode.parentNode.style.height = h+'px';
        var bW = parseInt(obj.parentNode.parentNode.parentNode.style.width,10);
        var bH = parseInt(obj.parentNode.parentNode.parentNode.style.height,10);
        if (dir == 0) { obj.parentNode.parentNode.parentNode.style.top = (bH-h)+'px'; obj.parentNode.parentNode.parentNode.style.left = 0+'px'; }
        if (dir == 1) { obj.parentNode.parentNode.parentNode.style.top = (bH-h)+'px'; obj.parentNode.parentNode.parentNode.style.right = (w-bW)+'px'; }
        if (dir == 2) { obj.parentNode.parentNode.parentNode.style.top = 0+'px'; obj.parentNode.parentNode.parentNode.style.left = 0+'px'; }
        if (dir == 3) { obj.parentNode.parentNode.parentNode.style.top = 0+'px'; obj.parentNode.parentNode.parentNode.style.right = (w-bW)+'px'; }
        if (dir == 4) { obj.parentNode.parentNode.parentNode.style.top = ((bH-h)/2)+'px'; obj.parentNode.parentNode.parentNode.style.left = ((bW-w)/2)+'px'; }
}

 

// -->
</script>

 >>>>> Here the Multiple  Ajax V4 tags starts<<<<<<<

<script language='JavaScript' type='text/javascript'><!--
var eplDoc = document; var eplLL = false;
var eS1 = 'us.img.e-planning.net';var eplArgs = { iIF:1,sV:'http://ads.eu.e-planning.net/',vV:'4',sI:'455',sec:'Deportes',eIs:['Header'] };
function eplCheckStart() {
    if (document.epl) {
        var e = document.epl;
        if (e.eplReady()) {
            return true;
        } else {
            e.eplInit(eplArgs);
            if (eplArgs.custom) {
                for (var s in eplArgs.custom) {
                    document.epl.setCustomAdShow(s, eplArgs.custom[s]);
                }
            }
            return e.eplReady();        
        }
    } else {
        if (eplLL) return false;
        if (!document.body) return false; var eS2; var dc = document.cookie; var ci = dc.indexOf('EPLSERVER=');
        if (ci != -1) {
            ci += 10; var ce = dc.indexOf(';', ci);
            if (ce == -1) ce = dc.length;
            eS2 = dc.substring(ci, ce);
        }
        var eIF = document.createElement('IFRAME');
        eIF.src = 'about:blank'; eIF.id = 'epl4iframe'; eIF.name = 'epl4iframe';
        eIF.width=0; eIF.height=0; eIF.style.width='0px'; eIF.style.height='0px';
        eIF.style.display='none'; document.body.appendChild(eIF);
        
        var eIFD = eIF.contentDocument ? eIF.contentDocument : eIF.document;
        eIFD.open();eIFD.write('<html><head><title>e-planning</title></head><bo'+'dy></bo'+'dy></html>');eIFD.close();
        var s = eIFD.createElement('SCRIPT'); s.src = 'http://' + (eS2?eS2:eS1) +'/layers/epl-41.js';
        eIFD.body.appendChild(s);
        if (!eS2) {
            var ss = eIFD.createElement('SCRIPT');
            ss.src = 'http://ads.eu.e-planning.net/egc/4/b';
            eIFD.body.appendChild(ss);
        }
        eplLL = true;
        return false;
    }
}
eplCheckStart();
function eplSetAdM(eID,custF) {
    if (eplCheckStart()) {
        if (custF) { document.epl.setCustomAdShow(eID,eplArgs.custom[eID]); }
        document.epl.showSpace(eID);
    } else {
        var efu = 'eplSetAdM(''+eID+'', '+ (custF?'true':'false') +');';
        setTimeout(efu, 250);    
    }
}

function eplAD4M(eID,custF) {
    document.write('<div id='eplAdDiv'+eID+''></div>');
    if (custF) {
        if (!eplArgs.custom) { eplArgs.custom = {}; }
        eplArgs.custom[eID] = custF;
    }
    eplSetAdM(eID, custF?true:false);
}
function eplSetAd(eID) {
    if (eplCheckStart()) {
        var opts = (eplArgs.sOpts && eplArgs.sOpts[eID]) ? eplArgs.sOpts[eID] : {};
        if (opts.custF) { document.epl.setCustomAdShow(eID,opts.custF); }
        document.epl.setSpace(eID, opts);
    } else {
        setTimeout('eplSetAd(''+eID+'');', 250);    
    }
}
function eplAD4(eID, opts) {
    document.write('<div id='eplAdDiv'+eID+''></div>');
    if (!opts) opts = {t:1};
    if (!eplArgs.sOpts) { eplArgs.sOpts = {}; }
    eplArgs.sOpts[eID] = opts;
    eplSetAd(eID);
}
//--></script>


<script type='text/javascript'>eplAD4M('Frame1',eplCustomShow3);</script>

 

In the space request, indicate the name of the corresponding custom function after the name of the space.

You can select one, some or all the spaces of the page to apply these styles.

<script type='text/javascript'>eplAD4M('Frame1',eplCustomShow3);</script>


More than 1 Ad per Space

Add the maximum quantity of ads, beside the name of each space:
 

Example: 3 Ads

<script language='JavaScript' type='text/javascript'><!--
var eplDoc = document; var eplLL = false;
var eS1 = 'us.img.e-planning.net';var eplArgs = { iIF:1,sV:'http://ads.eu.e-planning.net/',vV:'4',sI:'455',sec:'Sports',eIs:['Header:3'] };
function eplCheckStart() {

Result:


AjaxV4 Space

If the Custom Function is implemented in an Space AjaxV4, the implementation is the following:

<script language='JavaScript' type='text/javascript'><!--


Custom Function


// -->
</script>

Space AjaxV4 Tag

 

The complete implementation will look like this:
 

 

<script language='JavaScript' type='text/javascript'><!--

function eplCustomShow(adsArray) {
    var r=''; pad=''; a1=false;
    // Variables para personalizar:
        var cols_per_row = 1; 
        var imgFloat = 'left';
        var code_header = 'ANUNCIOS E-PLANNING';
        var style_header = 'text-align:left;font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:10px;font-weight:normal;background-color:#FFFFFF;';
        var code_footer = '<a href='http://www.e-planning.net' style='font-family:Arial, Helvetica, sans-serif;color:#0D53B2;font-size:10px;font-weight:normal;text-decoration:none;' target='_blank'>Publica tu anuncio</a>';
        var style_footer = 'text-align:right;background-color:#FFFFFF;';
        var style_table = 'border:1px solid #CCCCCC;height:110px;width:180px;background-color:#DDDDDD;';
        var style_cell = 'border:1px solid #AAAAAA;height:85px;width:167px;background-color:#FFFFFF;padding:0px;text-align:left;';
        var style_title = 'font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:11px;font-weight:bold;text-decoration:none;';
        var style_desc = 'font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:10px;font-weight:normal;text-decoration:none;';
        var style_url = 'font-family:Arial, Helvetica, sans-serif;color:#000000;font-size:10px;font-weight:normal;text-decoration:none;';
        var adsStretch = false;
        var dirStretch = 2;
        var image_small_wh = [ 67 , 67 ];
        var image_large_wh = [ 100 , 100 ];

    // fin variables personalizables
    var coln = 0;
    for (var i=0; i<adsArray.length; i++) {
        var ad = adsArray[i];
        if (!ad.shown && (1==ad.t||2==ad.t||7==ad.t||8==ad.t||41==ad.t) && !(7==ad.e||8==ad.e)) {
            if (!a1) {
                r+= '<table style=''+ style_table +''>';
                if (code_header) r+= '<tr><th style=''+style_header+''>'+code_header+'</th></tr>';
                r+= '<tr><td><table border='0'>';
                a1 = true;
            } else {
                pad = 'padding-left:10px';
            }
            if (0===coln) {
                r+= '<tr>';
                coln++;
            }
            r+= '<td style=''+ style_cell +''>';
            if (41==ad.t) { // link de texto
                r+= '<a target='_blank' href=''+ ad.lU +'' style=''+ style_title +''>'+ ad.tit +'</a>';
                if (ad.desc) r+= '<br/><span style=''+ style_desc +''>'+ ad.desc +'</span>';
                if (ad.urlv) r+= '<br/><a target='_blank' href=''+ ad.lU +'' style=''+ style_url +''>'+ ad.urlv +'</a>';
            } else if (!ad.e) { // flash o imagen sin efecto
                r+= ad.getBaseTag();
            } else { // imagen+texto
                if (33!=ad.e) r+= '<a target='_blank' href=''+ ad.lU +'' style=''+ style_title +''>'+ ad.tit +'</a><br/>';
                r+= '<div'+(imgFloat?' style='float:'+imgFloat+';':'')+' position:relative;'+(adsStretch?' width:'+image_small_wh[0]+'px; height:'+image_small_wh[1]+'px;'':'')+''>';
                r+= '<div'+(adsStretch?' style='position:absolute;'':'')+'>';
                r+= '<a target='_blank' href=''+ ad.lU +''>';
                r+= '<img src=''+ ad.getURL() +'' border=0 style='width:'+image_small_wh[0]+'px; height:'+image_small_wh[1]+'px;' '+(adsStretch?'onmouseover='javascript:eplCustomStretch(this,'+image_large_wh[0]+','+image_large_wh[1]+','+dirStretch+')' onmouseout='javascript:eplCustomStretch(this,'+image_small_wh[0]+','+image_small_wh[1]+','+dirStretch+')'':'')+' />';
                r+= '</a></div></div>';
                if (34==ad.e || 35==ad.e) r+= '<br/>';
                r+= '<span style=''+ style_desc +''>'+ ad.desc +'</span>';
                if (ad.urlv) r+= '<br/><a target='_blank' href=''+ ad.lU +'' style=''+ style_url +''>'+ ad.urlv +'</a>';
            }
            r+= '</td>';
            if (coln >= cols_per_row) {
                r+='</tr>'; coln=0;
            } else {
                coln++;
            }
            ad.shown = true;        
        }
    }
    if (a1) {
        if (0!==coln) {
            while (coln <= cols_per_row) {
                r+= '<td style='display:none;'></td>';
                coln++;
            }
            r+= '</tr>';
        }
        r+= '</table></td></tr>';
        if (code_footer) r+= '<tr><th style=''+style_footer+''>'+code_footer+'</th></tr>';
        r+= '</table>';
    }
    return r;
}
function eplCustomStretch(obj,w,h,dir) {
        obj.style.width = obj.parentNode.parentNode.style.width = w+'px';
        obj.style.height = obj.parentNode.parentNode.style.height = h+'px';
        var bW = parseInt(obj.parentNode.parentNode.parentNode.style.width,10);
        var bH = parseInt(obj.parentNode.parentNode.parentNode.style.height,10);
        if (dir == 0) { obj.parentNode.parentNode.parentNode.style.top = (bH-h)+'px'; obj.parentNode.parentNode.parentNode.style.left = 0+'px'; }
        if (dir == 1) { obj.parentNode.parentNode.parentNode.style.top = (bH-h)+'px'; obj.parentNode.parentNode.parentNode.style.right = (w-bW)+'px'; }
        if (dir == 2) { obj.parentNode.parentNode.parentNode.style.top = 0+'px'; obj.parentNode.parentNode.parentNode.style.left = 0+'px'; }
        if (dir == 3) { obj.parentNode.parentNode.parentNode.style.top = 0+'px'; obj.parentNode.parentNode.parentNode.style.right = (w-bW)+'px'; }
        if (dir == 4) { obj.parentNode.parentNode.parentNode.style.top = ((bH-h)/2)+'px'; obj.parentNode.parentNode.parentNode.style.left = ((bW-w)/2)+'px'; }
}

 

// -->
</script>

 >>>>> Here the Space Ajax V4 tag starts<<<<<<<

<!-- e-planning v4 - Comienzo espacio Header _ home _ blogmundial -->
<script language='JavaScript' type='text/javascript'><!--
var eplDoc = document; var eplLL = false;
var eS1 = 'us.img.e-planning.net';var eplArgs = { iIF:1,sV:'http://ads.e-planning.net/',vV:'4',sI:'8fa2',kVs:{}};
function eplCheckStart() {
    if (document.epl) {
        var e = document.epl;
        if (e.eplReady()) {
            return true;
        } else {
            e.eplInit(eplArgs);
            if (eplArgs.custom) {
                for (var s in eplArgs.custom) {
                    document.epl.setCustomAdShow(s, eplArgs.custom[s]);
                }
            }
            return e.eplReady();        
        }
    } else {
        if (eplLL) return false;
        if (!document.body) return false; var eS2; var dc = document.cookie; var ci = dc.indexOf('EPLSERVER=');
        if (ci != -1) {
            ci += 10; var ce = dc.indexOf(';', ci);
            if (ce == -1) ce = dc.length;
            eS2 = dc.substring(ci, ce);
        }
        var eIF = document.createElement('IFRAME');
        eIF.src = 'about:blank'; eIF.id = 'epl4iframe'; eIF.name = 'epl4iframe';
        eIF.width=0; eIF.height=0; eIF.style.width='0px'; eIF.style.height='0px';
        eIF.style.display='none'; document.body.appendChild(eIF);
        
        var eIFD = eIF.contentDocument ? eIF.contentDocument : eIF.document;
        eIFD.open();eIFD.write('<html><head><title>e-planning</title></head><bo'+'dy></bo'+'dy></html>');eIFD.close();
        var s = eIFD.createElement('SCRIPT'); s.src = 'http://' + (eS2?eS2:eS1) +'/layers/epl-41.js';
        eIFD.body.appendChild(s);
        if (!eS2) {
            var ss = eIFD.createElement('SCRIPT');
            ss.src = 'http://ads.e-planning.net/egc/4/40a4';
            eIFD.body.appendChild(ss);
        }
        eplLL = true;
        return false;
    }
}
eplCheckStart();
function eplSetAd(eID) {
    if (eplCheckStart()) {
        var opts = (eplArgs.sOpts && eplArgs.sOpts[eID]) ? eplArgs.sOpts[eID] : {};
        if (opts.custF) { document.epl.setCustomAdShow(eID,opts.custF); }
        document.epl.setSpace(eID, opts);
    } else {
        setTimeout('eplSetAd(''+eID+'');', 250);    
    }
}
function eplAD4(eID, opts) {
    document.write('<div id='eplAdDiv'+eID+''></div>');
    if (!opts) opts = {t:1};
    if (!eplArgs.sOpts) { eplArgs.sOpts = {}; }
    eplArgs.sOpts[eID] = opts;
    eplSetAd(eID);
}
//--></script>


<script>eplAD4('c1ba1469f7b01a17',{t:1,timeout:0,ma:1,custF:eplCustomShow,sd:'8fa2!!http://ads.e-planning.net/!!'});</script>
<!-- e-planning v4 - Fin espacio Header _ home _ blogmundial-->

More than 1 Ad per Space
 Add the maximum quantity in the ma: parameter::


<script>eplAD4('c1ba1469f7b01a17',{t:1,timeout:0,ma:3,custF:eplCustomShow,sd:'8fa2!!http://ads.e-planning.net/!!'});</script>

 

Important!
 

Styles cannot be implemented in spaces where 3rd Party Tags are associated. If this occurs, the ads won`t appear and an error will be registered:

 

If you have any further question about obtaining the Multiple Ajax V4 tags from the interface, please review the document “Multiple Ajax V4 - Implementation”

Related content