News System - Datums Anzeige Bild statt Farbe

Hast echt Super gemacht, vieleicht übernehme ich das und danke für den CSS Code.

Super! Finde es toll, was du hier gezaubert hast. Mal schauen, ob ich das Bild nutze oder es so lasse, wie es ist. Vielleicht teste ich das morgen einfach mal.

Hallo T1NO,
danke für deinen Tipp!

Ich habe das jetzt auch getestet aber bei mir wir das bild nicht angezeicht. die komplette datumanzeige wird nur schwarz angezeigt.

vl hast du ja einen tipp!

danke

Das hatte ich auch. Da hatte der Link zum Bild dann nicht gepasst.

Ich hatte das Bild dann in den Stil-Ordner gepackt und diese Adresse dafür genommen:

url("@{style_image_path}date.png")

.newsDateBadge > div {
    color: #4d4d4d;
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 2px 10px;
    margin-left: 10px;
    text-align: center;
    position: absolute;
    top: 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
    background-color: #97c33e;
    background-image: url("@{style_image_path}date.png");
    text-shadow: 0px -1px 0px transparent;
}

Hab den Fehler gefunden - ein Beistrich hat gefehlt! Habe es im Code ergänzt!

DANKE

Liegt das Bild in diesem Ordner?

/wcf/images/DeinStyle/

Ja liegt es - ich habe meinen vorherigen Eintrag schon bearbeitet. Hab den Fehler gefunden!

DANKE für die Hilfe

Jetzt hätte ich aber eine neue Frage und zwar würde ich gerne das aktuelle Datum gerne etwas nach unten schieben so das es optimal in die Grafik passt. (siehe Anhang)

kann mir da wer einen Tipp geben wie man das anpassen kann?

DANKE

Danke für die rasche Antwort aber irgendwie funktioniert das nicht so wirklich. es scheint so das sich die grafik dann wieder erneut einblendet.

Kann man irgendwie den abstand zwischen der ZAHL und fem FEB verkleinern so das beide sachen im weißen bereich dargestellt werden?

thanx

Mein Seite is leider noch komplett offline - da sie sich zur zeit noch im aufbau befindet. aber sobald i online bin stell ich gerne einen link online!

kann mir bzgl. meines Problems (Datumanzeige) wer weiterhelfen? das wär a feine sache!

wäre eine Datumdarstellung auch so wie im angeführten bild möglich?? - so wäre es top!

danke

Ja ist möglich ich habe mich mal eben hin gesetzt und etwas Probiert ist jetzt halt nur eine 5min Arbeit und vielleicht auch noch nicht die beste aber könnte dem ein oder anderem helfen

Das Resultat das könnte man jetzt mit einem Background Bild versehen :
[Blockierte Grafik: http://i.imgur.com/MbZfHwt.png]

.newsDateBadge {
  position: absolute;
  display: inline-block;
  width: 50px;
  > div {
    color: @wcfTabularBoxColor;
    display: block;
    font-size: @wcfTitleFontSize;
    font-weight: bold;
    padding: 6px 10px;
    margin-left: 10px;
    text-align: center;
    position: absolute;
    top: 15px;
    border-radius: 5px;
    .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
    .linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
    .textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));
	> p:nth-child(1) {
      font-size: @wcfSmallFontSize;
      font-weight: normal;
    }
    > p:nth-child(2) {
      margin-top: 0px;
      font-size: 1.85rem;
      font-weight: normal;
    }
	> p:nth-child(3) {
	  margin-top: -8px;
	  font-size: .8rem;
	  font-weight: normal;
    }
  }
}


.news .messageContent > div:nth-child(2){
  display: inline-block;
  margin-left: 50px;
  width: calc(~'100% - 50px');
}


article.news,article.news > div > section {
  min-height: 80px;
}

<?xml version="1.0" encoding="UTF-8"?>
<data xmlns="http://www.woltlab.com" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.woltlab.com http://www.woltlab.com/XSD/templatelistener.xsd">
	<import>
		<templatelistener name="deWbbEliteNewsDateDisplay">
			<environment>user</environment>
			<templatename>newsList</templatename>
			<eventname>beforNewsContent</eventname>
			<templatecode><![CDATA[
                            <div class="newsDateBadge">
                                <div>
				<p>{@$news->time|date:"M"}</p>
                                <p>{@$news->time|date:"d"}</p>
				<p>{@$news->time|date:"J"}</p>
                                </div>
                            </div>
                            ]]></templatecode>
		</templatelistener>
	</import>
</data>

Die Jahreszahl zusätzlich drin, schaut doch mal gut aus
Gibt sicher viele Möglichkeiten xD zum Beispiel die Zahlen so wie son Kalenderzahlenblatt darzustellen wie diese Uhren und was weiss ich noch alles

Zitat von knuddchen

Die Jahreszahl zusätzlich drin, schaut doch mal gut aus
Gibt sicher viele Möglichkeiten xD zum Beispiel die Zahlen so wie son Kalenderzahlenblatt darzustellen wie diese Uhren und was weiss ich noch alles

wenn du mir eine Vorlage gibst wie ungefähr du es meist kann ich bei Gelegenheit mal schauen und probieren wenn ich wieder Langeweile bekomme

Na die Zahlen sind doch je als ein Blatt aber das würde bei ner Uhrzeit besser denk ich mal aussehn

oder falls das auch möglich ist, könnte man das auch so darstellen:

[Blockierte Grafik: https://macfriesland.files.wordpress.com/2010/06/kalenderblatt-6-treffen.jpg]

Man könnte hier in dem Fall auch die Jahreszahl oben in das Rote packen. müsste man aber gucken ob das gut ausschaut


So könnte mans auch machen, aber würde ziemlich naja klein werden für oben für das enge Plätzchen