News System - Datums Anzeige Bild statt Farbe

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • News System - Datums Anzeige Bild statt Farbe

    Guten Tag, seid gestern gibt es die Erweiterung Datums Anzeige für das News System.

    Ich habe mir das Design eben umgeschrieben und ein Hintergrund für die Datumsanzeige erstellt.



    Das Originalhintergrundbild für die Datumsanzeige:

    Die Grafik ladet Ihr euch in das Verzeichnis wcf/images

    Und im Stil bei Erweiterte Einstellungen ergänzt Ihr folgenden CSS Code:

    Source Code

    1. .newsDateBadge > div {
    2. color: #000;
    3. display: block;
    4. font-size: 1.2rem;
    5. font-weight: bold;
    6. padding: 2px 10px;
    7. margin-left: 10px;
    8. text-align: center;
    9. position: absolute;
    10. top: 15px;
    11. border-radius: 5px;
    12. box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
    13. background-color: #14171A;
    14. background-image: url(../wcf/images/date.png);
    15. text-shadow: 0px -1px 0px transparent;
    16. }
    Display All

    Selbstverständlich könnt Ihr auch selbst entworfene oder andere Grafiken benutzten. Diese sollten die Größe 40x52 Pixel besitzen.

    Die von mir hier zur Verfügung gestellte Grafik "date.png" kann für jedermann Benutzt/Verändert/Weitergegeben werden. Ich habe diese selbst erstellt. Falls jetzt Fragen kommen, wegen Copyright usw.

    Liebe Grüße

    Tino

    The post was edited 2 times, last by T1N0 ().

  • HTML Source Code

    1. .newsDateBadge > div {
    2. color: #4d4d4d;
    3. display: block;
    4. font-size: 1.2rem;
    5. font-weight: bold;
    6. padding: 2px 10px;
    7. margin-left: 10px;
    8. text-align: center;
    9. position: absolute;
    10. top: 15px;
    11. border-radius: 5px;
    12. box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
    13. background-color: #97c33e;
    14. background-image: url("@{style_image_path}date.png");
    15. text-shadow: 0px -1px 0px transparent;
    16. }
    Display All
    Hab den Fehler gefunden - ein Beistrich hat gefehlt! Habe es im Code ergänzt!

    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

    The post was edited 1 time, last by bot1 ().

  • 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

    The post was edited 1 time, last by bot1 ().

  • 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 :


    CSS Source Code: newsDate.less

    1. .newsDateBadge {
    2. position: absolute;
    3. display: inline-block;
    4. width: 50px;
    5. > div {
    6. color: @wcfTabularBoxColor;
    7. display: block;
    8. font-size: @wcfTitleFontSize;
    9. font-weight: bold;
    10. padding: 6px 10px;
    11. margin-left: 10px;
    12. text-align: center;
    13. position: absolute;
    14. top: 15px;
    15. border-radius: 5px;
    16. .boxShadow(1px, 1px, rgba(0, 0, 0, .2), 3px);
    17. .linearGradient(darken(@wcfTabularBoxBackgroundColor, 10%), @wcfTabularBoxBackgroundColor, darken(@wcfTabularBoxBackgroundColor, 10%));
    18. .textShadow(darken(@wcfTabularBoxBackgroundColor, 10%));
    19. > p:nth-child(1) {
    20. font-size: @wcfSmallFontSize;
    21. font-weight: normal;
    22. }
    23. > p:nth-child(2) {
    24. margin-top: 0px;
    25. font-size: 1.85rem;
    26. font-weight: normal;
    27. }
    28. > p:nth-child(3) {
    29. margin-top: -8px;
    30. font-size: .8rem;
    31. font-weight: normal;
    32. }
    33. }
    34. }
    35. .news .messageContent > div:nth-child(2){
    36. display: inline-block;
    37. margin-left: 50px;
    38. width: calc(~'100% - 50px');
    39. }
    40. article.news,article.news > div > section {
    41. min-height: 80px;
    42. }
    Display All


    XML Source Code: templateListner.xml

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <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">
    3. <import>
    4. <templatelistener name="deWbbEliteNewsDateDisplay">
    5. <environment>user</environment>
    6. <templatename>newsList</templatename>
    7. <eventname>beforNewsContent</eventname>
    8. <templatecode><![CDATA[
    9. <div class="newsDateBadge">
    10. <div>
    11. <p>{@$news->time|date:"M"}</p>
    12. <p>{@$news->time|date:"d"}</p>
    13. <p>{@$news->time|date:"J"}</p>
    14. </div>
    15. </div>
    16. ]]></templatecode>
    17. </templatelistener>
    18. </import>
    19. </data>
    Display All

    The post was edited 1 time, last by Gothic ().

  • 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 :)

    ac-cafe.de ist die Anlaufstelle für Themen rund um Animal Crossing mit Gewinnspielen und vieles mehr. Beginne mit AC–Café.de ein neues Leben als Bürgermeister deiner eigenen Stadt und lerne viele neue Freunde kennen.
  • 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:



    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

    ac-cafe.de ist die Anlaufstelle für Themen rund um Animal Crossing mit Gewinnspielen und vieles mehr. Beginne mit AC–Café.de ein neues Leben als Bürgermeister deiner eigenen Stadt und lerne viele neue Freunde kennen.

    The post was edited 2 times, last by knuddchen ().