XF2.1 Werbung als Seitenbanner - wie geht das?

Dieses Thema im Forum "Informationen, Tipps und Tricks" wurde erstellt von Nathea, 2. Sep. 2019.

  1. Nathea

    Nathea Neues Mitglied Lizenzverwender

    In unserem Forum haben wir unter XF 1.5.3 unter anderem ein Banner rechts neben der Forenansicht, das auch auf allen Forenseiten wiederzufinden ist:

    Bildschirmfoto 2019-09-02 um 20.43.36.png

    Ich suche mir derzeit einen Wolf, um das unter XF 2 ähnlich hinzubekommen, habe. Mit einem einfachen "position: absolute" bekomme ich zwar ein Banner an die Seite, auf Änderungen der Browser-Breite hin gibt es unerwünschte Ergebnisse. Etwas anderes will mir partout nicht einfallen ...
    Für die Werbe-Platzierungen haben wir auch schon den Ads Manager Lite erworben, der auch wirklich ein super Tool zu sein scheint. Allerdings ist auch dort diese Art von Banner nicht enthalten.

    Leider kann ich den Apfeltalker, der uns seinerzeit die Werbung eingebunden hat, nicht mehr dazu befragen.

    Daher würde ich mich freuen, wenn einer von Euch eine Idee dazu hat.
     
  2. McAtze

    McAtze Innendienst Lizenzinhaber

    Ich kann mir das morgen mal in Ruhe ansehen.. ;)
     
    Nathea gefällt das.
  3. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    Habe ich schon mal für jemanden gebastelt, aber das geht nur eben speziell für jedes Design. Kannst mir ja mal schreiben dann kann ich mir das ansehen.
     
  4. McAtze

    McAtze Innendienst Lizenzinhaber

    Probiere das hier mal aus.

    1. Template erstellen => app_naMediaAd.less
    Code (CSS):
    .p-naMediaAd
    {
        a { color: inherit;    }
    }

    .p-naMediaAd-inner
    {
        max-width: @xf-pageWidthMax;
        padding: 0 @xf-pageEdgeSpacer;
        margin: 0 auto;

        padding-top: 4px;
        padding-bottom: 4px;
    }

    #searchBar .p-naMediaAd {
        right: 175px;
    }

    .naMediaAd_TOPCONTAINER {
        position: relative;
        height: 140px;
        top: 50px;
    }

    .naMediaAd_LOGO {
        dispaly: block;
        position: absolute;
        top: 30px;
        left: 180px;

    }

    .naMediaAd_SUPERBANNER {
        position: absolute;
        left: 292px;
    }

    .naMediaAd_WALLPAPER .naMediaAd_SUPERBANNER {
        left: 307px;
    }

    .naMediaAd_WIDE_SKYSCRAPER {
        position: absolute;
        left: 1035px;
    }

    .naMediaAd_MEDIUM_RECTANGLE {
        padding-top: 8px;
    }

    .naMediaAd_ARTICLES {
        text-align: center;
        padding-top: 8px;
    }

    .naMediaAd_AD_ABOVE_CONTENT {
        padding-bottom: 10px;
    }

    .messageContent .funbox {
        float: right;
        padding-left: 10px;
        pading-bottom: 10px;
    }



    @media screen and (max-width: 1195px) {
        .pageWidth {
            padding-right: 0;
        }
        #searchBar .pageWidth {
            right: 0;
        }
    }

    @media screen and (max-width: 1195px) and (min-width: 800px) {
        .naMediaAd_SUPERBANNER {
            text-align: center;
        }
        .naMediaAd_WIDE_SKYSCRAPER {
            display: none;
        }
    }

    @media (max-width:800px) {
        .naMediaAd_TOPCONTAINER {
            display: none;
        }
        .naMediaAd_MEDIUM_RECTANGLE {
            display: none;
        }
        .naMediaAd_ARTICLES {
            display: none;
        }
    }

    @media (min-width:800px) {
        .naMediaAd_AD_ABOVE_CONTENT {
            display: none;
        }
    }

    @media (max-width:480px) {
        .naMediaAd_AD_ABOVE_CONTENT {
            display: none;
        }
    }
    2. Template erstellen => naMediaAd_TOPCONTAINER
    Code (Text):
    <xf:css src="app_naMediaAd.less" />

    <div class="p-naMediaAd">
        <div class="p-naMediaAd-inner">
            <div class="naMediaAd_TOPCONTAINER">
                <div class="naMediaAd naMediaAd_SUPERBANNER nx-container nx-container-top" data-nx-container="top" id="nx-container-top-qj1">
                    <script type="text/javascript">
                        naMediaAd.includeAd("SUPERBANNER");
                    </script>
                    <div id="superbanner_1" class="gujAd superbanner GujAdHiddenWallpaperSlot"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="mediamind_wallpaper" style="position:absolute; top:0; left:728px;"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="superbanner_1" class="gujAd superbanner"></div><div id="superbanner_1" class="gujAd superbanner"></div></div>
                <div class="naMediaAd naMediaAd_WIDE_SKYSCRAPER nx-container nx-container-right" data-nx-container="right" id="nx-container-right-qj1">
                    <script type="text/javascript">
                        naMediaAd.includeAd("WIDE_SKYSCRAPER");
                    </script>
                    <div id="skyscraper_1" class="gujAd skyscraper GujAdHidden"></div><div id="sitebar_anchor" style="position:absolute;"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div><div id="skyscraper_1" class="gujAd skyscraper"></div></div>
                <div class="naMediaAd_LOGO">
                    <a href="http://www.planetoftech.de/" target="_blank"><img src="https://www.apfeltalk.de/community/styles/apfeltalk/tech_logos/pot_logo_RGB_all_30px_black_tr.png" alt="Planet of Tech"></a>
                </div>
            </div>
        </div>
    </div>
    Danach noch 2 Template Modifikationen anlegen wie auf den Bilder, damit dürfte das Grundgerüst stehen.
     

    Anhänge:

  5. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    Was für ne API lädst du denn da nach?
     
  6. McAtze

    McAtze Innendienst Lizenzinhaber

  7. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    Ah ok, dachte mir schon was ich in deinem Code übersehe^^
     
  8. mph

    mph Bekanntes Mitglied Lizenzinhaber

    Dafür kann man in XF 2.1 ein Widget mit einer Position in der Seitenleiste anlegen. Darin kann man entweder HTML- oder Javascript-Code verwenden oder XF Template-Syntax.
     
  9. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    Aber nicht wenn man es einfach rechts schwebend anbringen will.
     
  10. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Ist das Zauberwort nicht einfach Skyscraper ? Hab auf die Art 3 Buttons rechtsseitig schwebend untergebracht, die auch keine Probleme mit der Breite machen.
    Hobby-Gartenteich
     
  11. Tealk

    Tealk Bekanntes Mitglied Lizenzinhaber

    Ja ein div der an einer festen Position ist so das er sich mit bewegt.
     
  12. Nathea

    Nathea Neues Mitglied Lizenzverwender

    @McAtze Also erst einmal: Respekt! Das sieht schon recht ordentlich aus. Allerdings habe ich das Snippet im 2. Foto im Page_Container nicht finden (und damit auch nicht ersetzen) können. Dennoch klappt die Platzierung der Werbung bereits so, wie wir es kennen :) und uns fürs neue Layout auch wünschen.

    Kleiner Makel: Unser Forenlogo (hier das Testlogo) ist verrutscht und doppelt so groß wie nötig. Die richtige Größe habe ich als Bildchen mal daneben gesetzt.

    Bildschirmfoto 2019-09-03 um 17.34.44.png

    Wäre es prinzipiell auch möglich, diese Werbeplatzierungen in den AdsManager einzubinden? Die Auswert- und Einstellmöglichkeiten dort sind für einen Laien wie mich unschlagbar und ich muss auch eine "Weiche" einbinden (doer ganz leicht), die für User mit Haken an einer bestimmten Stelle im Userprofil die Werbung ausblendet.

    @otto Skyscraper ist schon richtig, aber wenn ich Deine Seite nur ein wenig skaliere, sind die drei Buttons rasch komplett verschwunden.
     
  13. McAtze

    McAtze Innendienst Lizenzinhaber

    @Nathea baut ihr bei XF2.1.3 auch wieder auf das UI.X von ThemeHouse auf? Ich kann mir das gerne mal lokal nachbauen und testen.
    Du kannst, zumindest in der großen AdsManager Version, Positionen nachbauen. Theoretisch könntest du somit auch die der Skyscraper nachrüsten.
     
  14. Nathea

    Nathea Neues Mitglied Lizenzverwender

    Ja, wir benutzen wieder das UI.X von Themehouse, mit (natürlich) unseren eigenen Anpassungen. Würde es nutzen, wenn ich unser Template-Set exportiere und Dir zukommen lasse?

    Das mit dem "eigene Positionen setzen" hatte ich mal ausprobiert, bin aber nicht recht schlau draus geworden. Ich habe ein Code-Schnipsel erhalten, das ich hätte in den PageContainer einbauen sollen. Da mir aber schleierhaft ist, welche Position dort das hätte sein können, habe ich diese Möglichkeit beiseite geschoben.

    Vielleicht sollte ich diese Idee noch mal aufgreifen ;)
     
  15. McAtze

    McAtze Innendienst Lizenzinhaber

    Ich habe dir dazu mal eine PN geschickt. Den Code-Schnipsel kannst du dann so einbinden wie ich oben erklärt habe mit den Template Modifikationen.
     
    Alluidh gefällt das.
  16. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Was auch so sein soll, da sie sonst über dem Inhalt lägen oder dieser zu weit zusammen geschoben würde. Inhalte gehen bei mir vor Werbebanner. ;) Aber das ließe sich sehr leicht ändern, das der Skyscraper stets sichtbar bleibt. Das ist ja nun echt kein Problem. :)

    Hier mal wie ichs gemacht hab, hab das zwar als Addon, aber da lernt ma ja nix.
    Extra.CSS

    Code (CSS):
    #skyscraper {
            position:absolute;
            top: 190px;
            left: 50%;
            margin-left: +700px;
            width: 80px;
            height: 66px;
            position: fixed;
    }
    Wie schon gesagt, leichtest anpassbar im Verhalten. ;)

    Einklinken in den PageContainer: also Suche/Ersetze mittels TMS (Suche "<!--main content area-->" und ersetze mit dem hier:
    PHP:
                <!-- main content area -->

            <div id="skyscraper">
                <xen:include template="otto_Skyscraper_content" />
            </div>
    Hier wird also schlicht das Template "otto_Skyscraper_content" in ein DIV includiert muss man nicht machen, aber kann man halt. Man könnte hier innerhalb des DIV Containers auch einfach nachfolgenden HTML Code direkt per TMS einsetzen lassen...

    Und hier noch beispielhaft mal das eben erwähnte Template: otto_Skyscraper_content
    HTML:
    <img src="social_map-min.png" width="80" height="102" usemap="#Social" />
    <map name="Social">
    <area target="_blank" alt="Youtube" title="Hobby-Gartenteich Youtube Kanal" href="https://www.youtube.com/channel/UCd_e8L-mf-mfd7xanxOHQjw" coords="1,1,79,25" shape="rect" />
    <area target="_blank" alt="Facebook" title="Hobby-Gartenteich Facebook Seite" href="https://www.facebook.com/HobbyGartenteich" coords="1,35,79,70" shape="rect" />
    <area target="_blank" alt="Twitter" title="Hobby-Gartenteich Twitter Kanal" href="https://twitter.com/teichforum" coords="1,80,79,101" shape="rect" />
    </map>
    Auch sehr einfach - eine Image Map wird genutzt um die als png geladenen Buttons zu nutzen. Auch das geht noch einfacher als auch besser, aber so geht das jetzt sein sehr langer Zeit.
     
    Zuletzt bearbeitet: 3. Sep. 2019
    McAtze und Nathea gefällt das.
  17. Nathea

    Nathea Neues Mitglied Lizenzverwender

    @McAtze
    Das Einbinden nach Deiner Erklärung hat super geklappt!

    Nun bastele ich nur noch an dem Platzieren im AdsManager. Die für die "Sonderplatzierung" vom AdsManager erzeugte Syntax habe ich wie beschrieben eingebunden, erhalte nun aber anstelle der Banner folgende Fehlermeldung:

    Bildschirmfoto 2019-09-04 um 17.26.44.png
    Das Template helper_js.global, das Du auch weiter oben in Deinem Tipp beschrieben hast und das ich anpassen sollte, hatte ich in meinen Templates allerdings nicht finden können. Nun scheint es für meine Pläne essentiell zu sein :(

    Und ein optisches Problem würde ich auch noch gern lösen: Unser Forenlogo sollte, wenn irgendwie möglich, neben der Werbung stehen, nicht darunter. Gibt es dazu vielleicht auch Ideen?

    Dankeschön allen Helfern, Ihr seid echt super :inlove:
     
  18. Nathea

    Nathea Neues Mitglied Lizenzverwender

    Alles geklärt, habe die helper_js_global auch gefunden, korrigiert und nun läuft die Werbung, wie sie soll. Manchmal hilft etwas Abstand und nochmaliges Drübergucken, um Schreibfehler zu entdecken :)
     
    McAtze gefällt das.
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden