Farben um Rahmen in einem Beitrag ändern

    Joomla Version
    Joomla! 4.3.1 Stable
    PHP Version
    PHP 8.2.x
    Hoster
    Lokal

    Hallo Zusammen,


    ich bin von Joomla 3 auf Joomla 4 gewechselt. Das hat so weit auch gut geklappt. Außer mit Cassiopaia komme ich gar nicht klar. Jetzt bin ich gerade dabei mir ein Template mit Hilfe von T4 Framework zu basteln. Das klappt auch einigermaßen.


    So nun zu meinem Problem. Im Rahmen der Neuinstallation habe ich beschlossen, der Seite eine neue Farbe zu geben. Auch das klappt für einen Laien ganz gut. Nur mit dem Rahmen den ich um Bilder in meinen Beträgen gemacht habe, klappt es nicht so wie ich mir das gedacht habe.


    Ich habe dann mit den Entwicklertools mir das angeschaut. Folgender Eintrag habe ich gefunden:


    Google Chrome zeigt an:


    Element.style {

    border: 3px solid #dc3545;

    }


    Wenn ich die Farbe im Tool ändere wird sie auch richtig angezeigt. Nur sobald ich das in meine custom.css (t4_bs_5blank) eintrage klappt das nicht


    Versuchsweise habe ich auch diesen Eintrag einmal versucht.


    Element.style {

    Border-color: #dc3545;

    }


    Im Firefox wird das angezeigt. Auch da wird im Tool die gewünschte Farbe angezeigt. Aber nach dem Eintrag in der custom.css bleibt die alte Farbe.


    Element {

    border: 3px solid # dc3545;

    }


    Jetzt komme ich nicht weiter. Hat da jemand einen Tipp für mich?

    Hallo,


    Ergänzend:

    Hast Du wirklich element {} eingegeben? Musst schon sagen, welches element.

    Wäre für alle imgs:

    Code
    img {
border: 3px solid #dc3545;
}

    oder, hier nur als Beispiel, explizit für einen div:

    Code
    .container-banner {
border: 3px solid blue;
}

    Liebe Grüße

    Christine

    Moin!


    In den Entwicklertools bedeutet "element.style" doch, dass es sich um inline styles handelt. Dementsprechend müsste in der custom.css noch ein !important ergänzt werden, damit die inline styles überschrieben werden.


    Also:

    CSS
    img { 
    border: 3px solid #dc3545!important;
}

    Nicht die sauberste Lösung, aber wenig Aufwand :)

    Hallo an Alle,


    als erstes muss ich mich entschuldigen, dass ich mich erst jetzt melde. Ich habe immer auf die Nachricht der Freischaltung und evtl. Nachrichten gewartet. Ich habe die Einstellungen nochmals überprüft. Jetzt müsste sofort Nachrichten kommen.


    Nun zum meinem Problem:


    @curly-brackets die CSS Datei wurde geladen.


    Der Tipp von christine2 und lunalars haben geholfen (mit der !important Kennzeichnung).


    Aber es werden jetzt alle Bilder mit einem Rahmen versehen. Es gibt jetzt Bilder mit Rahmen die keinen hatten – wie ich bei der Kontrolle feststellen musste ☹


    Da mir das voreingestellte Menü Default und Header-2 nicht gefiel habe ich eine eigenes erstellt.


    Oben Links ein Logo gespeist aus einem Eigenen Modul mit dem Logo drin (Das hat jetzt auch einen Rahmen) und im zweiten Teil der Sektion das Modul mit dem Suchfeld. Darunter habe ich dann eine Sektion nur mit der Navigationsleiste. Bin mit dem Ergebnis auch zufrieden.


    Da ich mit dem Element.style wohl nicht richtig lag und Img alle Bilder betrifft, werde ich wohl an einem Regentag etwas Fleißarbeit machen und die Dateien von Hand abändern.


    Gibt es eine Möglichkeit JCE Editor eine CSS Datei zu hinterlegen, die ich dann für Bilder die Rahmen und Farbe bekommen sollen, verwenden kann. Also dann nur bestimmten Bilder die CSS zuweise. Dann wäre im Falle ein nochmaliger Farbwechsel das alles etwas einfacher. Obwohl Joomla 5 werde ich wohl nicht mehr mitmachen. 🤣

    Hallo Max,


    also grundsätzlich mache ich das auch oft so, wie chr-hl beschreibt.


    Nun zu Deiner Frage:

    Zitat von Joomla-Max

    Gibt es eine Möglichkeit JCE Editor eine CSS Datei zu hinterlegen, die ich dann für Bilder die Rahmen und Farbe bekommen sollen, verwenden kann. Also dann nur bestimmten Bilder die CSS zuweise. Dann wäre im Falle ein nochmaliger Farbwechsel das alles etwas einfacher.

    Hab da jetzt versucht, da etwas zusammenzubrauen:


    a) In die user.css folgenden Code reingegeben:

    Code
    .border-3 {
border: 3px solid blue;  
}

    Bedeutet, egal wo man einen bestimmten Rahmen haben möchte. Bilder oder Beitrags-Text ....


    Behilflich war mir zunächst dieser Thread:

    Thema
    JCE: Stile im Editor nicht vorhanden (Eigene CSS-Datei)
    Hallo,
    Infos: Joomla 4.2.7; Childtemplate von Cassiopeia mit einer usser.css dort; JCE 2.9.33
    Im Editor lassen sind keine Stile vorhanden, das Listenfeld lässt sich schlicht nicht aufklappen.
    forum.joomla.de/core/attachment/14785/

    In der Editor-Konfiguration vermute ich meinen Fehler, dort habe ich stehen:
    • Editor-Stil: Eigene CSS-Datei
    • Eigene CSS-Datei: /media/templates/site/cassiopeia_asv_cassiopeiachild/css/user.css
      (Zumindest liegt sie dort lt. dem Editor unter Templates.)
    …
    hechtnetz


    b) Folgende Aktionen gesetzt (JCE):



    Im Beitrag das Bild anklicken, dann:


    c) hab ich halt auch (ist nur ein Beispiel!) border-3 gewählt. (Siehe auch oben den CSS Code)

    (Ist ein markierter Text)


    d) Frontend (Bildbeispiel):

    e) Der Code schaut so aus:

    Code
    <div itemprop="articleBody" class="com-content-article__body">
<div class="jcepopup" data-mediabox="1" data-mediabox-title="Hier"><a href="/example.org/images/headers/raindrops.jpg“ type="image/jpeg" class="jcepopup" data-mediabox="1"><img src="example.org/images/headers/raindrops“ alt="raindrops" width="700" height="180" class="border-3" /></a></div>     </div>

    Am Ende sieht man: class="border-3"


    f) Frontend (Textbeispiel):


    Liebe Grüße

    Christine

    Hallo Christian,


    wenn ich im JCE im Beitrag ein Bild einfüge und im Reiter auf Erweitert gehe finde ich Stil und Klasse. Und das würde dann für das einzelne Bild gelten!? Wenn ja müßte ich das in der custom. css eintragen, oder ein neue Datei mit anderem/besonderem Namen erstellen?

    Viele Grüße


    Max

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von Joomla-Max mit diesem Beitrag zusammengefügt.

    Hallo christine2 und chr-hl,


    ich habe alle beiden Versionen ausprobiert. Die von Andrea habe ich gleich hinbekommen. Einfach den Pfad von der custom.css in das Feld Eigene Stylesheet eingeben. Abspeichern und schon kann man den Stil im JCE Editor verwenden. Hat aber den Nachteil, dass im Auswahlfeld jetzt alle CSS Einträge der Customdatei zu sehen sind. Aber es funktioniert!


    Die Lösung von Christian passt mir etwas besser, da alle originalen Inhalte von Stile erhalten bleiben. Die neuen zusätzlich erscheinen. Ich habe zur Übung gleich noch einen zweiten Stil mit der Farbe Rot erstellt.


    Hier das Ergebnis:


    Das andere nicht so lange ausprobieren müssen zeige ich Screenshots dazu.


    Zuerst der Eintrag in der custom.css





    Dann die Einstellung im JCE Editor


    Profile à Default à Plugineinstellungen à Stilauswahl (auf der linken Seite) und dann folgende Einstellungen vornehmen.




    Ich hoffe, ich habe bei der Anleitung jetzt keinen Fehler gemacht.


    Allen die mir auf dem Weg zur Lösung meines Problems geholfen haben – ein recht herzliches Dankeschön.


    Allen Vätern, künftigen Vätern und gefühlten Väter einen schönen Vatertag. Und allen anderen einen schönen Feiertag