Symbole vor den Titeln im Modul Neueste Beiträge

    Hallo,

    ich habe auf einer Seite mehrere Kategorie-Blogs (Musik, Schach, Sport, Bibliothek, ...). Alle neuen Beiträge erscheinen im Modul Neueste Beiträge.

    Nun hätte ich gern vor jedem Titel in diesem Modul ein passendes Symbol (♬, ♖, ...), welches gleich erkennen lässt, zu welcher Kategorie der Beitrag gehört.

    Ich habe schon versucht, in den Beitragsüberschriften ein Symbol hinzuzufügen. Das funktioniert im Prinzip. Aber dann steht das Symbol ja auch in jeder Überschrift im Beitrag. Sieht dann etwas blöd aus.

    Hat jemand eine andere Lösung, sodass die Symbole nur in der Liste im Modul erscheinen?

    Eigentlich müsste ich ja "nur" (per Override) im entsprechenden Modul zusätzlich zum Beitragstitel, der ja schon angezeigt wird, die zugehörige Kategorie-ID auslesen. Dann könnte ich ein Array erzeugen, was jeder ID ein Symbol zuordnet. Und das muss dann zusammen mit dem Titel ausgegeben werden.


    Das wäre die Idee. Jetzt brauche ich "nur" noch den entsprechenden Code. ;)

    Hallo myrtus,


    hmm, weiß da auch nicht so recht. Schau Dir das da an: https://www.j-over.de/de/template-overrides. Da gibt es so einiges.


    Ev. das hier? https://www.j-over.de/de/template-overrides/eventkalender

    mod_articles_latest. Muss dann ja nicht events.php heißen, halt anders.

    PHP
    <dt itemprop="Date">
        <span class="fa fa-calendar">&nbsp;</span><?php echo JHtml::_('date', $item->created, "d.m.Y"); ?>
    </dt>

    Statt dem Kalender icon, Dein gewünschtes. Achso, Du hast ja verschiedene.


    Oder: Geht das Ganze nicht ev. mit einem normalen Modul-Klassen-Suffix & dieses dann CSSmäßig behandeln?


    Liebe Grüße & Gute Nacht,

    Christine

    1. Erstelle ein Override des Moduls mod_articles_latest


    2. Editiere die Datei templates/protostar/html/mod_articles_latest/default.php und suche dort die Zeile


    PHP
    <?php echo $item->title; ?>


    3. Ersetze diese Zeile durch

    PHP
    <?php echo '<span class="icon-cat-id-' .$item->catid . '"> </span> ' .$item->title; ?>


    4. Trage im CSS folgende Klasse ein:

    Code
    .icon-cat-id-2:before {
    font-family: 'IcoMoon';
    font-style: normal;
    content: "\3c";
}

    Die Zahl 2 bei der Klasse "icon-cat-id-2" steht für die Kategorie-ID, der der Beitrag zugeordnet ist. Du musst also für jede Kategorie eine eigenen Klasse mit der entsprechenden Kategorie-ID definieren.


    Das ist ein Beispiel für Protostar. Bei einem anderen Tamplate musst du die Einträge im CSS dem entsprechend Icon-Font anpassen.

    Hallo Christine, hallo Anka,

    danke euch für die Antworten.

    Ja, auf FB hatte ich auch nachgefragt. Da will mir jemand, der das schon umgesetz hat demnächst den Code schicken. Kann aber etwas dauern.

    Bis dahin probiere ich mal Ankas Version.


    Update: in der default.php meines Templates steht nur folgendes drin:

    Code
    // include config and layout
$base = dirname(dirname(__FILE__));
include($base.'/config.php');
include($warp['path']->path('layouts:'.preg_replace('/'.preg_quote($base, '/').'/', '', __FILE__, 1)));

    Sorry, hatte zunächst die falsche Datei erwischt. Jetzt hat's funktioniert. Vielen Dank für die Hilfe.

    Eine Frage habe ich noch. Damit das Override wirksam wird, musste ich die Original default.php umbenennen in default.php.old und die neu erstellte default--20200127-162640.php in default.php. Das würde aber Probleme bei einem Update des Templates geben oder habe ich da einen Denkfehler?

    Ok, dann mach erstmal alles wieder rückgängig, was du vorher gemacht hast ;).


    Danach kopiere das ganze Verzeichnis (inkl. der darin befindlichen Datei defaul.php)

    (s. auch hier)


    templates/jp-perfect/warp/systems/joomla/layouts/mod_articles_latest/


    nach


    templates/jp-perfect2/layouts/



    Editiere jetzt die Datei


    templates/jp-perfect2/layouts/mod_articles_latest/default.php


    Suche die Zeile

    PHP
    <li><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></li>


    und ersetze sie durch

    PHP
    <li><a href="<?php echo $item->link; ?>"><?php echo '<span class="icon-cat-id-' .$item->catid . '"> </span> ' . $item->title; ?></a></li>



    In das user.css kommt dann für jede Kategorie-ID das hier:

    Code
    .uk-icon-cat-id-2:before {
    content: "\f09b";
}

.uk-icon-cat-id-3:before {
    content: "\f099";
}

    Falls noch kein user.css vorhanden ist, dann musst du eins anlegen.



    Eine Liste aller Icons, die es beim Warp7 so gibt, findest du hier.


    Den Wert für die Eigenschaft content: "xxxxx"; musst du entweder mit dem Web-Entwickler-Tool rausfinden oder aus dem templates/jp-perfect2/css/template.css raussuchen.

    Im Prinzip funktioniert's jetzt. Ich brauche nur noch die passenden Symbole. Das Problem ist, dass in obigem Code ein Hexadezimalwert angegeben ist, auf der von Anka verlinkten Seite aber Namen der Symbole. Mit den Namen funktioniert es nicht.

    Und das letzte Problem ist das Einrücken. Das Ganze ist ja im Modul als Liste formatiert. (Alternative Listensymbole werden leider nur von Chrome und FF interpretiert, deshalb kommt diese Variante nicht in Frage.) Am Einfachsten wäre, wenn der Titel nach x Zeichen einfach abgeschnitten würde und drei Punkte angehängt. Geht das irgendwie?

    Oh, sorry, das war mein Fehler... ;(


    Die neue Zeile in templates/jp-perfect2/layouts/mod_articles_latest/default.php sollte so aussehen:

    (... class="uk-icon- ...)

    PHP
    <li><a href="<?php echo $item->link; ?>"><?php echo '<span class="uk-icon-cat-id-' .$item->catid . '"> </span> ' . $item->title; ?></a></li>


    Und die Klassen im CSS müssen auch alle mit uk- anfangen:

    Code
    .uk-icon-cat-id-2:before {
    content: "\f09b";
}
.uk-icon-cat-id-3:before {
    content: "\f099";
}


    Durch das uk-... werden die Icons des Templates geladen.

    Zitat von myrtus

    Klappt aber leider nicht. Dann stehen andere Symbole da, obwohl bei den Meüpunkten diese Symbole angezeigt werden. Das Web-Entwickler-Tool zeigt dort auch den Code an, z.B. \f0f3 für Glocke.

    Sehe da:

    Code
    .uk-icon-cat-id-17:before {
    font-family: 'IcoMoon';
    font-style: normal;
    content: "\f0f3";
}

    statt:

    Code
    .uk-icon-cat-id-17:before {
    font-family: 'FontAwesome';
    font-style: normal;
    content: "\f0f3";
}

    temporär geändert, sieht man die Glocke.


    Edit: och herrje, bin wat langsam heut durch guck, copy & paste etc.

    Edit 2: und jetzt angepasst :)

    Ich habe es etwas anders gemacht. Ich habe sowohl die ursprüngliche default.php gesichert, anschließend angepasst und die angepasste auch gesichert. Das Template habe ich seit Frühjahr 2018 und bisher gab es da keine Updates. Falls doch, muss ich eben die Datei nochmal austauschen. Habe alles gut dokumentiert. Für die CSS-Modifikationen habe ich eine custom.css, wie es sein sollte.

    In der jetzigen default.php steht: