Serendipity Forums

Posted: **Sun Jan 18, 2009 5:09 pm**

Moin,

wie aus der Überschrift schon beschrieben möchte ich das Datum der Postingerstellung verschieben. Zur jetzigen Zeit wird das Datum unter der Titelüberschrift plaziert. Hier mal zur Ansicht: Klick

Ich möchte aber das es so ausieht: Klick

Dazu muss ich ja die entries.tpl bearbeiten.

Code: Select all

<!-- ENTRIES START -->
    {serendipity_hookPlugin hook="entries_header" addData="$entry_id"}

    {foreach from=$entries item="dategroup"}
<div class="serendipity_Entry_Date">


        {foreach from=$dategroup.entries item="entry"}
        <h4 class="serendipity_title"><a href="{$entry.link}">{$entry.title}</a></h4>
                {if $dategroup.is_sticky}
        <h3 class="serendipity_date">{$CONST.STICKY_POSTINGS}</h3>
        {else}
        <h3 class="serendipity_date">{$dategroup.date|@formatTime:DATE_FORMAT_ENTRY}</h3>
        {/if}

Ich wollte jetzt so vorgehen. Ich stecke die erste h4 Überschrift bis zur letzten h3 in ein div. Als Kapselung so gesehen.

Dann pack ich die Überschrift h4 class="serendipity_title und die Überschift h3 class="serendipity_date auch je in ein div was ich links und rechts floaten lasse.
So hatte ich mir das gedacht:

Code: Select all

<div id="post">
  <div class="titel">das floatet links</div>
  <div class="date">das floatet rechts</div>
</div>

Nun meine Fragen:
1. Kann ich so vorgehen?
2. Muss ich die Div´s vor oder hinter der foreach Schleife einbringen?
3. Wie formatiere ich das nun so das dass Datum und Jahr untereinander stehen?

Ich hoffe das ich alles für euch verständlich beschrieben habe.

Greetz
Deacon

Posted: **Sun Jan 18, 2009 6:03 pm**

deacon wrote:So hatte ich mir das gedacht:
Code: Select all
<div id="post">
  <div class="titel">das floatet links</div>
  <div class="date">das floatet rechts</div>
</div>

Pfui.

Eine Überschrift ist eine Überschrift, und ein Eintragstitel ist ganz sicher eine Überschrift. Demnach sollte man ihn auch in HTML als Überschrift auszeichnen. Das nennt man dann "semantisch korrekt ausgezeichnet". Davon mal abgesehen ist es extrem unklug, eine id post zu vergeben - damit hast Du auf Seiten, auf denen mehrere Artikel angezeigt werden, mehrmals die id post, ids müssen aber eindeutig sein.

Also ändern wir Deinen Code schon mal grundsätzlich so:

Code: Select all

<div class="post-head">
    <h2 class="serendipity_title">Titel</h2>
    <div class="serendipity_date">Datum</div>
</div>

entries.tpl:

Code: Select all

<!-- ENTRIES START -->
    {serendipity_hookPlugin hook="entries_header" addData="$entry_id"}

    {foreach from=$entries item="dategroup"}
    <div class="serendipity_Entry_Date">

        {foreach from=$dategroup.entries item="entry"}
        <div class="post-head">
            <h2 class="serendipity_title"><a href="{$entry.link}">{$entry.title}</a></h2>

         {if $dategroup.is_sticky}
            <div class="serendipity_date">{$CONST.STICKY_POSTINGS}</div>
        {else}
            <div class="serendipity_date">
                <span class="thedate">{$dategroup.date|@formatTime:'%d %b'}</span>
                <span class="theyear">{$dategroup.date|@formatTime:'%Y'}</span>
            </div>
        {/if}
        </div>

Da Du in #serendipity_banner nur eine h1 hast, kannst Du den Eintragstitel problemlos als h2 auszeichnen. Wie Du siehst, habe ich zudem das Datum anders ausgegeben, damit man Tag/Monat und Jahr ebenfalls über seperate Klassen ansprechen und formatieren kann.

CSS:

Code: Select all

.post-head {
    float: left;
    width: 100%;
}

.serendipity_title {
    float: left;
    width: 75%;
}

.serendipity_date {
    float: right;
    width: 25%;
}

.thedate, .theyear { display: block; }

.serendipity_entry { clear: both; }

So. Das müsste so tun. Nun müsstest Du die Hintergrundgrafik für die Überschrift der neuen Klasse .post-head zuweisen.

Was ich jetzt "nebenbei auf die Schnelle" nicht erkennen konnte - ist das ein Layout mit fixen Breiten? Wenn ja, kannst Du die Breiten im CSS-Code oben natürlich ebenso in fixen Werten angeben. Das vereinfacht dann auch deutlich die Hintergrundgrafik für das Datum. Denn wenn es doch ein Layout mit variablen Breiten ist, wirst Du hier wohl mit Sliding Doors arbeiten müssen, weshalb Du vermutlich ein zusätzliches div innerhalb von .serendipity_date brauchen wirst. Aber das sehen wir dann.

YL

Posted: **Sun Jan 18, 2009 6:21 pm**

Hi Yellow,

Pfui.

Sorry, mein Fehler. Sollte auch eine class werden.

Eine Überschrift ist eine Überschrift, und ein Eintragstitel ist ganz sicher eine Überschrift. Demnach sollte man ihn auch in HTML als Überschrift auszeichnen. Das nennt man dann "semantisch korrekt ausgezeichnet".

Hab ich doch mit

Code: Select all

<h4 class="serendipity_title"><a href="{$entry.link}">{$entry.title}</a></h4>

und 

        <h3 class="serendipity_date">{$CONST.STICKY_POSTINGS}</h3>
        {else}
        <h3 class="serendipity_date">{$dategroup.date|@formatTime:DATE_FORMAT_ENTRY}</h3>

Was ich jetzt "nebenbei auf die Schnelle" nicht erkennen konnte - ist das ein Layout mit fixen Breiten? Wenn ja, kannst Du die Breiten im CSS-Code oben natürlich ebenso in fixen Werten angeben. Das vereinfacht dann auch deutlich die Hintergrundgrafik für das Datum. Denn wenn es doch ein Layout mit variablen Breiten ist, wirst Du hier wohl mit Sliding Doors arbeiten müssen, weshalb Du vermutlich ein zusätzliches div innerhalb von .serendipity_date brauchen wirst. Aber das sehen wir dann.

Ist ein fixes Layout auf YAML Basis. Fixe komplette Breite. Seitenleisten kommen zuerst im Quelltext vor dem Maincontent. Der quetscht sich denn zwischen die beiden Container. Alles über Margins gestylt

Posted: **Sun Jan 18, 2009 6:28 pm**

deacon wrote:
Pfui.
Sorry, mein Fehler. Sollte auch eine class werden.

Das "Pfui" galt der Auszeichnung mit divs in Deinem Beispielcodeschnipsel. Deine entries.tpl habe ich nur überflogen

deacon wrote:Ist ein fixes Layout auf YAML Basis. Fixe komplette Breite. Seitenleisten kommen zuerst im Quelltext vor dem Maincontent. Der quetscht sich denn zwischen die beiden Container. Alles über Margins gestylt

Okay, dann kannst Du sowohl Titel als auch Datums-div eine fixe Breite verpassen und analog dazu die Hintergrundgrafik für die Datumsbox erstellen. Fixe Breiten sind zudem im IE weniger problematisch zu floaten, also vergiß die Prozentwerte und mach das in Pixeln

YL

Posted: **Sun Jan 18, 2009 8:20 pm**

So, ich habs nun hinbekommen. Allerdings habe ich in der entries.tpl die Klasse serendipity_date umbenannt. Es floatet ja nach rechts und somit verschieben sich die Überschriften im Kontaktformular, Gästebuch und in der Gallerie. Ist ja auch keine Ding. Halt die style.css dementsprechend angepasst.

Hier nochmal der Code:

entries.tpl

Code: Select all

<!-- ENTRIES START -->
    {serendipity_hookPlugin hook="entries_header" addData="$entry_id"}

    {foreach from=$entries item="dategroup"}
    <div class="serendipity_Entry_Date">

        {foreach from=$dategroup.entries item="entry"}
        <div class="post-head">
            <h2 class="serendipity_title"><a href="{$entry.link}">{$entry.title}</a></h2>

         {if $dategroup.is_sticky}
            <div class="serendipity_dateting">{$CONST.STICKY_POSTINGS}</div>
        {else}
            <div class="serendipity_dateting">
                <span class="thedate">{$dategroup.date|@formatTime:'%d %b'}</span>
                <span class="theyear">{$dategroup.date|@formatTime:'%Y'}</span>
            </div>
        {/if}
        </div>

Und hier das CSS dazu:

Code: Select all

.post-head {
	float: left;
	width: 100%;
	color: #333333;
	border-bottom: 1px solid #708090;
	padding: 1px 0px 3px 3px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	background: #000000 url({TEMPLATE_PATH}grafik/content_title1.jpg) repeat;
	height: 50px;
	margin: 1px auto 10px;	
}

.serendipity_title {
	float: left;
}

 .serendipity_title a {
	font-size: 0.75em;
	line-height: 50px;
}

.serendipity_dateting {
	float: right;
	margin-right: 25px;
	margin-top: 7px;	
	
}

.thedate, .theyear {
	display: block;
	font: 0.75em Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-left: 6px;
	padding-top: 2px;
}

.serendipity_entry { clear: both; }

Und hier zu bestaunen

Klick

Serendipity Forums

[gelöst] Posting Datum verschieben

[gelöst] Posting Datum verschieben

Re: Posting Datum verschieben