Breite der sidebar-left

    Template ist cassopaia, joomla 4 eingetragen habe ich:

    .container-sidebar-right {

    background: red;

    width: 2%;

    }

    Ich habe das alles im Moment leider blos lokal, da ichauf der seite im Netz momentan keine Änderungen vornehmen kann

    Wie kommst Du auf 2%?


    (zum Zeigen mal sidebar-right genommen). Na ja, sieht ziemlich bescheiden aus .....



    CSS
    .container-sidebar-right {
background: red;
width: 2% !important;
}

    Mehr habe daran nicht geändert (button etc), ist ja dann noch schlimmerer :)


    Liebe Grüße

    Christine

    Danke!


    dieser dämliche Fehler wäre mir wahrscheinlich nie aufgefallen. Die breite und den Hintergrund habe ich nur genommen, um die Veränderung besser zu sehen. Aber sicher war es so nicht der richtige Ansatz, den ich gewählt habe. Nun sieht es so aus:



    mit "margin-left: 0;" konnte ich nach links verschieben, aber wie krieg ich nun noch den rechten Abstand zum Body weg.


    Liebe Grüße


    Christian

    Über die Änderung der Breite von .container-sidebar-left wirst Du das Problem nicht lösen können. (Ein Link auf Deine Seite wäre übrigens sehr hilfreich.)


    Ich kann ja mal beschreiben, wie ich das gelöst habe, denn es ist wirklich nicht so einfach.


    Wichtig ist zu wissen, dass Cassipeia ein Grid mit 4 Spalten vorgibt, wobei die beiden mittleren zusammengefasst sind (comp comp) durch folgende Anweisung

    Code
    grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";

    Ziel auf unserer Seite ( https://www.tsg-dacapo.de/ ) war es nun, die rechte Saplte an die zweite Stelle von links zu setzen und dann den beiden Spalten auf der linken Seite eine konstante Breite zu verpassen durch folgende Änderungen überdie user.css

    Code
    grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l side-r comp comp ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";

    und

    Code
    grid-template-columns: [full-start] minmax(0,auto) [main-start] repeat(2, 12.5em) repeat(2, 1fr) [main-end] minmax(0,auto) [full-end];

    Die erste Anweisung ist für Dein Problem eigentlich nicht so wichtig. Damit soll nur erklärt, warum die Grid-Anordnung auf unserer Seite durch Verschieben von side-r etwas anders aussieht und was die Grundlage für die zweite Anweisung ist


    Die Vorgabe von Cassiopeia ist hier repeat(4,minmax(0,25%)), was aber für unsere Zwecke ungeeignet ist. Daher wurde für die beiden linken Spalten der feste Wert 12.5em festgelegt. Und genau an dieser Stelle kannst Du Breite der Spalten steuern. Einfach mal mit repeat probieren. Über 1fr wird übrigens die Spaltenbreite dynamisch an die aktuelle Display-Breite angepasst.


    Dazu noch eine Anmerkung: unsere Lösung ist vielleicht nicht die eleganteste, aber ich bin zum Ersten nicht der große Joomla-Experte und zum Zweiten funktioniert es genauso wie gewollt.

    Gruß

    Heinz


    "Wer es nicht versucht schafft es auch nicht."

    Gefällt mir 1

    Ich finde grid-template-columns und grid-template-areas sind unter


    grid-template-columns - CSS: Cascading Style Sheets | MDN
    The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
    developer.mozilla.org


    und


    grid-template-areas - CSS: Cascading Style Sheets | MDN
    The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.
    developer.mozilla.org


    gut veranschaulicht. Man kann auch selbst Werte eingeben und ausprobieren.