CUSTOM SCRIPTS ADD CSS v2.0

Transkript

1 CUSTOM SCRIPTS ADD CSS v2.0

2 INHALT 1. BESCHREIBUNG EINBAU EINSCHRÄNKUNGEN

3 1. BESCHREIBUNG Bei dem ADD CSS Script handelt es sich um ein Custom Script, welches Stylesheets (CSS) zu bestehenden Elementen auf einer Webseite hinzufügt bzw. ggf. bestehende style Angaben überschreibt. Die Elemente können dabei beliebig sein, solange sie entweder über eine ID oder einen Klassennamen ansprechbar sind und generell Stylesheets für den Elementtyp gesetzt werden können. Das Script ist folgendermaßen aufgebaut: css1=[stylesheets] Der enthaltene Parameter [STYLESHEETS] muss dabei durch die gewünschte Styleangabe ersetzt werden. Will man beispielsweise bei einem DIV mit der ID meindiv die Breite und den z- index anpassen, dann würde die Styleangabe dazu folgendermaßen aussehen: #meindiv { width: 728px!; z-index: !; } Das Rautezeichen (#) steht dafür, dass es sich bei dem dahinter stehenden Wort um eine ID handelt. Ein Klassenname würde durch einen Punkt anstelle der Raute gekennzeichnet werden. Das angehängte Ausrufungszeichen (!) steht für important und bedeutet, dass wenn diese Styleangabe bereits vorhanden sein sollte, weil sie beispielsweise schon vom Vermarkter gesetzt wird, der hier gesetzte Wert Vorrang hat und den bestehenden dann überschreiben soll. Gibt es den Wert noch nicht, dann ist das Setzen des important Parameters ebenfalls kein Problem. Fügt man den Stylesheet aus dem obigen Beispiel für meindiv zum Script hinzu, sähe es folgendermaßen aus Hinweis: vor das jeweilige Rautesymbol wird noch der Typ des HTML Elements hinzugefügt im Beispiel handelt es sich um ein div (auch möglich wären z.b. iframe usw.): PL_AddCSS_NCM.js?adid=[%tp_adid%]&css1=div#meinDiv{width: 728px!;zindex: !;} Die Veränderung mehrerer Elemente mit einem Script ist ebenfalls möglich, da es beliebig erweiterbar ist. Für ein 2.Element meinzweitesdiv sähe es dann so aus: PL_AddCSS_NCM.js?adid=[%tp_adid%]&css1=div#meinDiv{width: 728px!;zindex: !;}div#meinZweitesDiv{height:90px!;} 3

4 Panelnamen in Expandable Formaten können ebenfalls direkt angesprochen werden. Im Beispiel wird das Panel, mit dem Panelnamen skyscraper, sticky (position:fixed!) gesetzt: PL_AddCSS_NCM.js?adid=[%tp_adid%]&css1=paneldiv[skyscraper]{position :fixed!;} Einige Elemente haben keine fixe, sondern eine dynamisch zusammengesetzte ID oder Klassennamen, indem z.b. eine Zufallszahl oder ein Timestamp an einen festen Wortstamm angehängt werden z.b. #meindiv_ Die Zufallszahl ändert sich bei jedem Seitenaufruf, was bedeutet, dass das Element bei jedem Kontakt einen neuen Namen hat. Diese Elemente lassen sich dann über ihren unveränderlichen Wortstamm ansprechen: PL_AddCSS_NCM.js?adid=[%tp_adid%]&css1=div[id*='meinDiv_']{width:728 px!;} Hierbei muss darauf geachtet werden, dass der feste Wortstamm nicht mehrfach in der Seitenstruktur auftritt, da sich die Änderungen dann auf alle Elemente mit diesem Wortstamm auswirken. Vor dem Einbau des Scriptes müssen die Styleangaben nach css1= noch escaped werden, damit der Browser diese korrekt interpretieren kann. Hierzu können beispielsweise folgende Online Services genutzt werden: Aus dem Script: PL_AddCSS_NCM.js?adid=[%tp_adid%]&css1=div#meinDiv{width: 728px!;zindex: !;} wird nach dem Encoden (Escapen): PL_AddCSS_NCM.js?adid=[%tp_adid%]&css1= div%23meindiv%7bwidth%3a%20728px!%3bz-index%3a% !%3b%7d Die escapte URL ist dann bereit für den Einbau in das Werbemittel. 4

5 2. EINBAU Das ADD CSS Script muss situationsbedingt On Ad Download oder als Custom JS (Preload) eingebaut werden. Nähere Erläuterungen dazu sind in der Custom Scripts Overview zu finden. 3. EINSCHRÄNKUNGEN Die Elemente müssen entweder über eine ID oder einen Klassennamen ansprechbar sein und es müssen generell Stylesheets für den Elementtyp gesetzt werden können. Sind die Styleangaben bereits für das Element seitens des Vermarkters gesetzt, dann können sie durch das Custom Script überschrieben werden, indem ein important (!) an die style- Parameter angehängt wird. Dies setzt voraus, dass nicht bereits ein important (!) durch den Vermarkter für den Stylesheet dieses Elements gesetzt wurde. 5