Cassiopeia Grid anpassen

    Hallo zusammen,

    nach der Migration auf J4 will ich das veraltete Template in Cassiopeia nachbauen und kämpfe mit dem Cassiopeia-Grid.


    Das Layout hat zwei schmale Icon-Menüs links, die ihre Position und Breite nicht verändern. Ich merke gerade, dass ich auch nach Lektüre einiger Tutorials (z.B. von Astrid) und Ausprobieren auf der Stelle trete.


    Die grid-template-areas habe ich in .site-grid auf ". side-l side-r comp comp ." für alle Auflösungen angepasst. Das hat funktioniert.

    Fehlt noch die Definition der festen Breiten für side-l und side-r. Wo und wie kann ich die einstellen?


    Hat jemand einen Tipp?


    LG

    Antonella

    Hi Christine,

    danke, das hat schon mal etwas geholfen. Problem: ich habe bisher für die beiden Spalten links feste Werte in px (analog zur Icon-Breite), die Werte für den Content muss ich aber relativ setzen (in %), sonst fliegt mir alles um die Ohren.


    Ich teste erst einmal weiter ...


    Und melde mich noch mal wenn ich entweder eine Lösung habe oder noch Fragen aufkommen.


    Grid-Layouts sind ja spannend, aber ich habe damit noch so gar keine Erfahrung.


    Danke

    Fehlt noch die Definition der festen Breiten für side-l und side-r. Wo und wie kann ich die einstellen?

    Zitat von Antonella

    Fehlt noch die Definition der festen Breiten für side-l und side-r. Wo und wie kann ich die einstellen?

    Ich habe das über CSS bzw die user.css wie folgt gelöst

    Code
    @media only screen and (min-width: 992px) {
  body.wrapper-fluid .site-grid {        
  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 .";
  }
    body.wrapper-fluid .site-grid {
    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 Breite von 12.5em muss natürlich auf die spezifischen Bedürfnisse angepasst werden.


    Ergebnis ist zu sehen über unsere derzeitige Testseite https://www.tanzeninebersberg.de/index.php . Einfach mal den Screen schmaler machen. Das zeigt, dass diebeiden linken Spalten nicht schmaler werden.

    Gruß

    Heinz


    "Wer es nicht versucht schafft es auch nicht."

    Danke Heinz,

    ja, das ist ein Weg, so hatte ich das auch ungefähr gelöst, allerdings nehme ich tatsächlich den px-Wert der Iconleisten - die Seite ist etwas speziell.

    Damit das alles - wie gewünscht - am linken Rand kleben bleibt, habe ich zusätzlich noch ein align-content:start; eingebaut.


    Jetzt bin ich dabei, die Darstellung der .blog-items anzupassen. Die werden in der template.css sowohl mit "display:grid" als auch mit "display:flex" definiert.
    Ich sehe aber keine Auswahl-Option dafür, etwa im Menüeintrag. Ich kann auch nicht erkennen wann und warum welche Anweisung greift.


    Bei dieser speziellen Seite ist display: flex das Mittel der Wahl, also habe ich die Anweisung in der user.css überschrieben. Geht das auch anders?


    LG
    Antonella

    Zitat von Antonella

    Jetzt bin ich dabei, die Darstellung der .blog-items anzupassen. Die werden in der template.css sowohl mit "display:grid" als auch mit "display:flex" definiert.
    Ich sehe aber keine Auswahl-Option dafür, etwa im Menüeintrag. Ich kann auch nicht erkennen wann und warum welche Anweisung greift.

    Man braucht keine Auswahl, die zwei Anweisungen sind wichtig, falls der Browser grid nicht versteht