Wallpaper Banner in XF

[DRaver]

Ich würde gerne einen Wallpaper Banner laufen lassen bei mir. Keine Ahnung wo ich da ansetzen soll. Hat das schon jemand laufen?

 

[bt012ss]

Soll wie aussehen?
Wechselnder Background?

 

[DRaver]

yep. Also praktisch wie in diesem style dann oben und rechts anliegend.

 

[bt012ss]

In welchem Style?

 

[DRaver]

Standard als Fix

 

[bt012ss]

Ich seh hier nix als Wallpaper.

So in der Art?
https://xenforo.com/community/resources/header-thumbs.3042/

 

[Divokymuz]

Eher so wie hier http://www.spiegel.de/ denke ich mal.

Fürs VB hatte da mal jemand was gemacht.

 

[bt012ss]

So ein Ding hab ich noch nicht gesehen auf XF.

 

[DRaver]

Ich seh hier nix als Wallpaper.

Hehehe, könnte daran liegen, dass hier keine Werbung geschaltet wird. Ich habe vom Style geredet. Ein Wallpaper ist ein Banner, der den Bereich oben und Seite als ein Bild darstellt. Häufig ändert sich auch der ganze Hintergrund.

 

[Heffalump]

Ich werde dir mal auflisten wie ich es gemacht habe. Evtl. hilft dir das weiter.
Du erstellst eine Template Modifikation für das Template PAGE_CONTAINER

Dort fügst du nach:

<xen:hook name="body">

Den Wallpaper Wrapper ein, der bei mir so aussieht:

<div id="ip_page_wrapper">
    <div id="ip_content_wrapper">

<div id="naMediaAd_SUPERBANNER">
  <script type="text/javascript">naMediaAd.includeAd("SUPERBANNER");</script>
</div>
<div id="naMediaAd_WIDE_SKYSCRAPER">
<script type="text/javascript">naMediaAd.includeAd("WIDE_SKYSCRAPER");</script>
</div>

Anschliessend fügst du am Ende der Seite die schliessenden Divs ein. Kannst du auch mit einer TMS machen:

</div>
  </div>

Die Div-Ids kannst du natürlich nennen wie du möchtest oder wie sie dein Vermarkter dir vorgibt.
Anschliessend richtest du sie mit Einträgen in der extra.css aus:

#ip_page_wrapper {
position: relative;
}

#ip_content_wrapper {
position: relative;
}

.naMediaAd_SUPERBANNER {
text-align: center;
margin-left: 0px;
}

.naMediaAd_WIDE_SKYSCRAPER {
position: absolute;
left: 980px;
top : 0px;
}

body.naMediaAd_WALLPAPER .naMediaAd_SUPERBANNER {
margin-left: 252px;
}

Der Wallpaper setzt sich ja im Prinzip aus einem Superbanner oben und einem Skyscraper am rechten Rand zusammen. Das Script deines Vermarkters muss dann natürlich noch irgendwie in die Seite eingesetzt werden. Ich habe es auch im Page_Container.

 

[DRaver]

Hast du das live laufen, damit ich das mal sehen kann?

 

[DRaver]

Ah, habe es gerade bei dir gesehen. Du hast das responsive Design auch abgeschaltet. Das wäre nämlich meine nächste Frage gewesen, wie man das abschalten kann, wenn sich jemand die Seite auf einem Handy anschaut.

 

[Heffalump]

Das responsive Design habe ich abgeschaltet, genau.
Da es für mich nicht besonders relevant ist habe ich mich mit der Abschaltung des Banners auch noch nicht beschäftigt. So viele User habe ich nicht die Mobil Probleme haben. Zum Lesen reicht es so und geschrieben wird zu Hause.

 

[DRaver]

So viele User habe ich nicht die Mobil Probleme haben. Zum Lesen reicht es so und geschrieben wird zu Hause.

Ist das so? Ich habe gerade mal in meine Statistik geschaut und da war ich echt überrascht. Es sind fast so viele Leute Mobil auf einem meiner Foren, wie mit einem Desktop.
Mein Thema dort ist Ernährung. Also keine Handy Seite.

Ich glaube da darf man die Vorteile des responsive Design nicht aus dem Auge verlieren. Das Nutzungserlebnis und damit die Verweildauer, die Absprungrate, die Conversionrate und nicht zuletzt die Zufriedenheit der Besucher profitieren davon. Außerdem: Google mag Responsive Design

Jetzt muss ich nur noch sehen, wie ich das werbetechnisch gut umsetzen kann.

 

[Heffalump]

Uneingeschränkte Zustimmung. 18,8% meiner User kommen Mobil. Aber der XenForo-Style lässt sich wirklich sehr gut mobil lesen und das wird hauptsächlich genutzt.
Wenn mehr User online posten wird es ohne responsive oder mobile style schon eng. Da fehlt tatsächlich der Komfort.

Google mag Responsive Design

Wenn ich mal Zeit habe setze ich das für Google um.

 

[Heffalump]

Evtl. sollten wir uns mal verknüpfen. Ernährung und Küche sind jetzt nicht so weit auseinander... Schick doch mal Link per PN.

 

[Divokymuz]

wie man das abschalten kann, wenn sich jemand die Seite auf einem Handy anschaut.

Sollte sich eigentlich hier drüber machen lassen: https://xenforo.com/community/resources/responsive-design.2193/

 

[DRaver]

@Heffalump Der Code haut bei mir leider überhaupt nicht hin. Der setzt den Sky jetzt oben aufs Forum

 

[Heffalump]

Der Code ist auch für mein Board mit fixed Style. Die CSS-Anpassungen für deinen Style musst du herausfinden.
Mir ging es nur um die grundsätzliche Vorgehensweise den Wrapper um den Content zu legen. Das habe ich mit einem TMS, also ohne Addon, gelöst.

 

[DRaver]

Die CSS-Anpassungen für deinen Style musst du herausfinden.

Hmm alle Tests sind bis jetzt negativ verlaufen. Ich befürchte fast, es gibt für das Responsive Design keine Möglichkeit, einen Banner rechts neben dem Forum zu platzieren.

Wo sind denn hier die Template Gurus @McAtze und co?