WBCE CMS Forum

screamindan

Mitglied

Datums Button / Übersicht

Moin. Ich überlege grade, wie man einen Datumsbutton (z.B. vollfarbiger Kreis mit " 17" unter drunter "Dec" für Dezember) als Layer links /rechts oben über das Bild in der Übersicht legen könnte. am besten mit den Termindaten aus den Startfeldern. Hat da jemand eine Idee?

boeseroeser

Gast

Re: Datums Button / Übersicht

Kleiner CSS-Kurs:

Wenn du etwas "rechts oben" haben willst, brauchst du:
style="position:relative;" für das Element, von dem "rechts oben"  gemeint ist. In diesem Fall also mod_topic_loop. Das ist ohnehin schon so.
[EDIT]: Fehler ausgebessert, das muss natürlich position:relative heißen.

Das Element, das rechts oben sein soll, braucht:
<div style="position:absolute; top:0; right:0;"> dein Kalenderblatt </div>
Die Werte bei top und right wirst du wahrscheinlich anders haben wollen, zb right:-1%; top:-20px;

Damit es rund wird, sollte es eine feste Größe haben, zb width:100px; height:100px;
und: border-radius:50%;

Im gesamten also:
<div class="kalendersticker"> dein Kalenderblatt </div>

und im CSS:
.mod_topic_loop .kalendersticker {
position:absolute;
width:100px;
height:100px;
border-radius:50%;
right:-8%;
top:-80px;
background-color:#ca2d2d;
border:1px solid #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
overflow:hidden;
text-align:center;
color:#fff;
}

Wo tust du das ganze hin?
Das CSS solltest du in dein template.css stecken, oder noch besser:
Du installiertst dir das Admin-Tool frontend_final_css_0.3.zip,  https://forum.wbce.org/viewtopic.php?pid=30371#p30371 und kopierst das CSS da rein.

Die Platzhalter in Topics: Das
<div class="kalendersticker"> dein Kalenderblatt </div>
solltest du eher ganz unten im Loop machen, sonst hast du eventuell z-index Probleme.

Beitrag geändert von boeseroeser (16.03.2020 11:03:22)

screamindan

Mitglied

Re: Datums Button / Übersicht

Danke Dir, wird probiert... 

screamindan

Mitglied

Re: Datums Button / Übersicht

Ok. Das ganze funktioniert generell, auch mit "[EVENT_START_MONTHNAME]" oä. Is responsive allerding schwierig einzustellen. Am besten sieht es aus, wenn man das (Desktopansicht) so 50% unten über das Bild raushängen lässt. Das krieg ich aber nicht so hin, dass es beim Verkleinern des Browserfensters "mitschrumpft". Sieht dann komisch aus... Aber danke; hab wieder was gelernt. 

screamindan

Mitglied

Re: Datums Button / Übersicht

So. Mit relativer Positionierung doch noch was einigermaßen hübsches hinbekommen. Siehe hier...
Aufgrund der momentan virenbedingten Auftragslage allerdings terminlich etwas mau...