WBCE CMS Forum

joergwbce

Mitglied

[GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Hallo!

Ich werde nun wieder öfters hier sein. Bin mal ehrlich: Habe angefangen 2 Websites mit concrete5 zu gestalten, da mir die Möglichkeit mehr oder weniger "alles" direkt im Frontend zu bearbeiten sehr gefallen hat. Auf den ersten Blick scheint concrete5 einige Vorteile gegenüber WBCE zu haben. Um es aber kurz zu machen (soll jetzt nicht mein Thema hier werden): Wenn man alles zusammen berücksichtigt finde ich, sachlich analysiert, doch WBCE als das bessere und umgänglichere CMS.

Mein eigentliches Problem aber ist: Ich möchte gerne Topics, wie in der Dokumentation auch als Möglichkeit beschrieben, als Eventkalender nutzen. Grundsätzlich funktioniert auch alles. Ich möchte aber auf der Übersichtseite die Darstellung der einzelnen Veranstaltung als Gridmuster bzw. über 3 Spalten haben. Auf der Dokumentation (Seite 12) ist auch so abgebildet (2 Zeilen, 3 Spalten --> bei 6 Events). Wie kriege ich das hin?

Danke für eure Hilfe!

Jörg

Beitrag geändert von joergwbce (11.02.2018 08:14:04)

florian

Administrator

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Das ist eine Frage der CSS-Formatierung, und eventuell ein bisschen Javascript, um es schön zu machen.
Bei Übersicht-Seite > Schleife musst Du einen Div um die Ausgabe legen, der dann insgesamt eine Breite von 33% hat und gefloatet wird.

Also vom Prinzip her so:
Schleife:
<div class="veranstaltung">
...hier dann Überschrift, Teaser, usw.
</div>

Fußzeile:
<br clear="all">
(kann nicht schaden, falls es mal nur 5 Veranstaltungen sind)

Im Stylesheet:
.veranstaltung {
width:31%;
padding:1%;
float:left;
height:250px;
}

Es ist sinnvoll, entweder allen Divs eine gleiche feste Höhe zuzuweisen (das ist dann aber nicht responsive) oder, etwas tricky,  mittels JavaScript alle Divs auf dieselbe Höhe zu bringen.

joergwbce

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Danke! Hab es mal damit probiert. Da tut sich leider nichts :-( Was aber nicht bedeutet, dass dein Code, deine empfohlene Vorgangsweise falsch ist. Bin wahrscheinlich zu unfähig es richtig umzusetzen - obwohl ich alles nach Anleitung gemacht habe.

Aber ich denke, dass es in meinem Fall noch leichter gehen müsste. Ich verwende das Template "Buschwerk" Da ist bei dem Modul Topics, unter anderem auch eine "3-Spalten-Ansicht" möglich und anscheinend vorprogrammiert. Siehe Topics Template Buschwerk

Es geht um die Darstellung, den Code ov_grid3_pic / tp_simple

Wo muss ich den eintragen, bzw. wie nehme ich in den Optionen darauf Bezug, damit es so dargestellt wird? Weiß das jemand?

florian

Administrator

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Schick mir mal Zugangsdaten per PM, dann schaue ich mal. Das ist einfacher, als jetzt das große Rätselraten zu spielen.

screamindan

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

<!-- Header ov_grid3_pic -->
<style type="text/css">
.tp-blocks-3 .mod_topic_loop {font-size: 0.92em}
</style>

<!-- Header -->
<h2>[SECTION_TITLE]</h2>
<div class="tp-blocks tp-blocks-3">
<div class="tp-blocks-inner">

screamindan

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Das hab ich bei Übersicht drin...
Wrnn Du sowas meinst...

http://gbumps.de/pages/konzerte.php

Beitrag geändert von screamindan (17.01.2018 14:49:03)

joergwbce

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Ja das meine ich!

In der Zwischenzeit hat mir florian schon super geholfen, d.h. meinen Wunsch realisiert - auf eine andere Weise :-)

Habe trotzdem mal probiert, deine Variante einzubauen. Man soll ja dazu lernen. Diese scheint ja auch die Templatevorgaben zu nutzen. Bei mir funktionierte es aber nicht. Wo genau hast du was hinein geschrieben? Alles in die Schleife? 

screamindan

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Ich hab leider gleich noch nen Termin... Ich guck da nachher mal zu Hause nach.

screamindan

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Übersicht - Kopfzeile:

<!-- Header ov_grid3_pic -->
<style type="text/css">
.tp-blocks-3 .mod_topic_loop {font-size: 0.92em}
</style>

<!-- Header -->
<h2>[SECTION_TITLE]</h2>
<div class="tp-blocks tp-blocks-3">
<div class="tp-blocks-inner">

Schleife:

<!-- use style="height:.."  -->
<div class="[CLASSES]">
<a [HREF] class="loop-pic" style="background-image:url([PICTURE_DIR]/[PICTURE])"><img src="[PICTURE_DIR]/[PICTURE]" alt="" /><span class="miniclear"></span></a>

<div class="textblock">
<h3>{TITLE}</h3>
<h3>[EVENT_START_DATE] / [EVENT_START_TIME]</h3>
<!-- <h4>[XTRA1]</br>[XTRA2]</br>[XTRA3]</h4> -->
[TOPIC_SHORT]
</div>
[EDITLINK]</div>

Fusszeile:

<br style="clear:both;">
{PREV_NEXT_PAGES}
<br style="clear:both;">
</div></div>

Ich habe, mein ich, aus dem Eventpreset nur die Platzhalter übernommen... Viel Spass beim Probieren...

Beitrag geändert von screamindan (17.01.2018 20:54:56)

joergwbce

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Ich denke bei der Fusszeile fehlt noch was, oder? Das sind 2 geschlossene divs ohne das offene voran gehen.

screamindan

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Also ich seh in der Kopfzeile 2 öffnende...

joergwbce

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Stimmt. Wieder mal schneller geschrieben, als gedacht. Habe es danach auch entdeckt ;-)

joergwbce

Mitglied

Re: [GELÖST] Gridmuster bzw. 3 Spaltenansicht der einzelnen Themen

Übrigens: Auch mit diesem Code funktioniert es auch super! Da hat man dann auch den Effekt, des hineinzoomenden Bildes, wie im Template Buschwerk als Beispiel dargestellt. Der Effekt funktioniert aber scheinbar nur auf Notebooks/PCs einwandfrei. Auf Smartphones tut sich kaum was bzw. wird das Bild oft nur mit einem ganzflächigen Schatten überdeckt.
Aber auf jeden Fall DANKE für die Hilfe.