Hi Tom, du hast mir wieder einmal sehr geholfen. Die beiden Oben genannten Probleme sind nun keine mehr. Nun gehe ich mehr auf eine individuelle Werbung zu, die z.Zt. wie folgt aussieht:
Desktop-Ansicht (jeweils nach dem ersten Beitrag eines Themas):
SmartPhone-Ansicht:
Beim Hover über das Icon erfolgt der Link zum FAQ, wie von mir auch beabsichtigt. Der HTML-Code für die Werbung sieht wie folgt aus:
<div class="wnPartner">
<div class="wnPartnerFaq"><p class="text-right">Partnerwerbung<a href="https://woltnet.com/faq/#entry-13" class="jsTooltip" title="Wie werde ich Partner?"><span class="icon icon16 fa-question-circle"></span></a></p></div>
<p><span style="font-size: 18pt"><span style="color: #FFFFFF"><strong>CLS-DESIGN</strong></span></span><br>
<p><span style="font-size: 12pt"><span style="color: #FFFFFF"><strong>Premiumprodukte für WoltLab Suite™</strong></p></span></span><p><span style="color: #FFFFFF">Wir sind der größte Anbieter von Premiumprodukten für WoltLab Suite™.<br>Zu unserem Angebot gehört eine Vielzahl an hochwertigen Stilen und Erweiterungen.</span></p>
<br>
<div class="externalContentLink"><a href="https://www.cls-design.com" target="_blank">CLS-DESIGN besuchen</a></div>
</div>
Der CSS-Code sieht dazu wie folgt aus:
.wnPartner {
padding: 0;
margin-top: 10px;
position: relative;
padding: 20px 20px 20px 88px !important;
border-radius: 4px;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
border: 2px solid #80BC68;
background-color: #80BC68;
}
.wnPartner::before {
font-size: 32px;
width: 58px;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
font-family: 'FontAwesome' !important;
position: absolute;
top: 0;
left: 0;
color: #fff;
background-color: #80BC68;
content: url("https://woltnet.com/images/woltnet/woltnet1-41.png");
}
.wnPartner img {
max-width: 100%;
}
.wnPartner .externalContentLink > a {
background-color: #fff;
border-radius: 3px;
padding: 7px 12px;
color: #000;
}
.wnPartner .externalContentLink > a:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.15);
color: #000;
}
.wnPartner .contentWarpper .icon {
color: #fff;
}
Alles anzeigen
Ich weiß natürlich das die Farbgebung immer sehr vom Geschmack des Betrachters abhängt, dennoch möchte ich mit dieser Werbung eine Vorlage erstellen. Die Vorlage kann man dann individuell an den jeweiligen Hersteller anpassen. Sowohl vom Text als auch von den Farben. Gibt es zu meinem o.g. Beispiel deiner Meinung nach etwas zu verbessern, oder hast du konkrete Vorschläge wie so eine (z.B. deine) Werbung optisch angepasst werden könnte?
Grundsätzlich sei einmal gesagt, das ich nicht vorhabe WoltNet mit Werbung zu zuklatschen, sondern Werbung nur an zwei Stellen und im dynamischen Wechsel zu platzieren. Das bedeutet, das sich ggf. 10/20 Hersteller die jeweiligen Stellen abwechselnd teilen. In den vielen Jahren, in denen ich nun schon die WoltLab-Software einsetze habe ich mich immer gegen Werbung entschieden. Da allerdings immer wieder und gefühlt mehr Fragen zu "Hersteller X und Y" gestellt werden, möchte ich allgemein mehr auf Hersteller hinweisen. Auch wenn ich an der Werbung nichts verdiene (es ist ja ein Hobby), möchte ich die Werbungen schon optisch ansehnlich gestalten.