news formatieren

[wolfgang_58]

Hallo,
mit vielen templates wird auch der Bereich "NEWS" dargestellt. Nun komme ich nicht ganz so klar, wie man diese News in einem template ändert. Jedes template hat viele Einträge in Bezug "news".
Was muss geändert werden, wenn man ganz einfach die "News" nicht aneinandergeklascht haben will, sonder ein kleiner Abstand gegeben ist.
Was muss denn alles geändert werden? Hängt das vom template ab oder ist sowas "grundsätzlich" gegeben?

Wolfgang

P.S. bevor Fragen zum template kommen, es ist in meinen Augen egals, welches template ich nutzen möchte

[olape]

bevor Fragen zum template kommen, es ist in meinen Augen egals, welches template ich nutzen möchte

Wahrscheinlich nicht.
Aber der Reihe nach.

Du meinst die Newsboxen, die in vielen Templates in der Seitenleiste oder im Seitenfuß genutzt werden?
Wenn ja: Beziehst du dich auf die Abstände innerhalb einer Newsbox? Oder auf die Abstände der einzelnen Newsboxen zueineander?

[wolfgang_58]

Hallo,
ich meine die Darstellung der Boxen, meist unten und die möchte ich auch so getrennt haben, wie hier im Forum [ external image ], aber in vielen templates sind sie "aneinandergeklatscht".

[Tata]

Versuch mal im template.htm

Code: Select all

<section class="footer">
    <div class="boxDiv">
        <div class="box3cols">
            <div class="boxContent">    
                <?php echo newsbox('news1');?>
            </div>
        </div>
        <div class="box3cols">
            <div class="boxContent">
                <?php echo newsbox('news2');?>
            </div>
        </div>
        <div class="box3cols">
            <div class="boxContent">
                <?php echo newsbox('news3');?>>
            </div>
        </div>
    </div>
</section>

und im stylesheet.css

Code: Select all

/* section 3 boxes */
section.section3Boxes {
	max-width: 1200px;
	margin: 0 auto;
	padding: 5em 0;
}
div.boxDiv {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
div.boxDiv .box3cols {
	width: calc(33.33333% - 15px);
	padding: 0px;
	background: rgba(var(--secondBackgroundColor), .25);
	border: 1px solid rgba(var(--secondBackgroundColor), .5);
	border-radius: 7px;
	margin: 0 15px 15px 0;
	text-align: center;
}
div.boxDiv .box3cols p {
	margin: 0 0 .5em 0;
	text-align: center;
}
div.boxDiv .box3cols p:last-of-type {
	margin: 0;
}
div.boxDiv .box3cols ul{
	margin-left: 1em;
}

Aus frase's Template übernomen. Man braucht dann nur mit Hintergrundfarben und padding spielen. Oder versuch das da anzuschauen und bisschen studieren https://yoksel.github.io/flex-cheatsheet/. Diesses Template is zwar ziemlich komplex und es ist bestimmt nicht eifach es zu modifizieren, aber es lohnt sich etwas vom Programieren zu lernen und dann geht einiges schon. Ein VOrteil da sind die Snippets. Die Snippets gehen aber ins Content, nicht direkt ins Template (obwohl auch das ist möglich, wenn man weiß, was man erreichen will).

[wolfgang_58]

Hallo,
danke für den Hinweis mit dem Video, da muss ich mich erstmal "reinfuchsen".
Die Codes von oben habe ich im template von fhs-whitespace hierhin unterhalb von <footer id="footer"> eingefügt:
<!--<nav class="prevNextP"><div class="prevP"><?=previouspage();?></div><div class="nextP"><?=nextpage();?></div></nav>-->
<div id="newsboxes2">
<aside class="news">
<?=newsbox('News01');?>
</aside>
<aside class="news">
<?=newsbox('News02');?>
</aside>

<aside class="news">
<?=newsbox('News03');?>
</aside>

</div>
</div>
<footer id="footer">

und im stylesheet.css zum Schluss den Code von oben hineinkopiert.

Nun geht nichts mehr ...
Habe wieder die "alten gesicherten" Dateien vom fhs-whitespace hergenommen, geht wieder.

[olape]

bevor Fragen zum template kommen, es ist in meinen Augen egals, welches template ich nutzen möchte

Wie schon vermutet, dein Anliegen hat also auf jeden Fall etwas mit dem Template zu tun.

Es ist immer wesentlich einfacher, wenn man eine URL dazu hat.
Dann kann man sich das am „lebenden Objekt“ ansehen.
Dadurch kann auch schneller und gezielter geholfen werden.

Code: Select all

<!--<nav class="prevNextP"><div class="prevP"><?=previouspage();?></div><div class="nextP"><?=nextpage();?></div></nav>-->

hier ist zwar versucht worden, den Code auszukommentieren, das hilft aber nur bei html-Code.
Das PHP, was dazwischen ist, wird trotzdem ausgeführt. Das ist aber bei Frank schon so „falsch“ drin und scheint jetzt auch nicht wirklich zu stören.

Code: Select all

<div id="newsboxes2">
<aside class="news">
<?=newsbox('News01');?>
</aside>
<aside class="news">
<?=newsbox('News02');?>
</aside>
<aside class="news">
<?=newsbox('News03');?>
</aside>
</div>
</div>
<footer id="footer">

Das sieht eigentlich ok aus. Ein scheißendes div zu viel, aber es ist ja nur ein Ausschnitt, von daher ...

Was heißt,

Nun geht nichts mehr ...

Weiße Seite? Fehlermeldung? verschobenes Layout?
Gibt es die Seiten News01, News02, News03?


Wenn ich mir http://fhseidel.de/cmsxh/fhs-whitespace/ ansehe, dann sind Zitate und Kalender per Newsbox umgesetzt und ich finde nicht, dass diese im Abstand zueinander nicht passen.

Aus frase's Template übernomen.

Das ist als Beispiel sicher gut, aber möglicherweise beißt sich da auch einfach etwas mit dem bereits vorhandenen Styles.

Vielleicht schreibst du Frank einfach mal an und bittest ihn um Hilfe.

[wolfgang_58]

Hallo Olaf,
naja, es stimmt schon, dass die Ansicht im "Original-template" paßt, aber sobald eine 3. NewsBox hinzukommt, dann sind die Boxen "aneinandergeklebt". Man muss dann eine 4. Box aufmachen und als "Blindes Huhn" behandeln, ist aber nicht so schön.

URL, ja das wäre was, aber die Testseiten laufen bei mir auf XAMPP am Rechner ;-(

[olape]

aber sobald eine 3. NewsBox hinzukommt, dann sind die Boxen "aneinandergeklebt".

fhs-whitespace_3_news.zip

[lck]

aber sobald eine 3. NewsBox hinzukommt, dann sind die Boxen "aneinandergeklebt".

Dann brauchst du nur in der stylesheet.css folgendes ändern

Code: Select all

#newsboxes2 .news {
	width: 48%; /* das ändern zu 31% */
	font-size: 0.9em;
	padding: 1em 2em;
	line-height: 1.5;
}

[wolfgang_58]

Hallo,
das mag funktionieren, aber bei mir nicht!
Die sog. "Alte" Einstellung wurde auskommentiert [ external image ] , das ist ja Pflicht und die neue eingefügt, aber .... Keine Änderung (auch mit Cache-Löschung usw.)
War ein guter Ansatz anber ...