Darstellung in mobilem Design umschalten

    Ich habe eine Vorlage im TinyMCE, die meinen Content in divs darstellt.

    Ich weiß immer noch nicht wo ich die CSS hinterlegen muss, damit sie nur für diese Vorlage greift. (Bisher schreibe ich den style immer direkt in den Code)

    Mir gehts hier aber gerade darum im Desktopdesign Bilder abwechselnd links und rechts darzustellen. Im mobilen Design soll dann immer erst das Bild und dann der Text kommen. Alternativ würde ich das ganze auch mit dem Astroid Framework realisieren, wenn das einfacher ist.

    Ich weiß bereits, dass ich mit einem Grid und Media Query die Position einzelner Zellen individuell festlegen kann. Allerdings weiß ich auch hier nicht wo die CSS reinkommt. Weder bei der TinyMCE Vorlage noch beim Astroid Layout.

    Kann mir da jemand helfen?

    Ab dem Moment, wo deine Seite Bootstrap lädt musst du keine extra Styles hinterlegen. Du evrwendest ja Bootstrap-Standard-CSS-Klassen in deinem Beispiel.

    Cassiopeia und Astroid-Templates auch laden das Bootstrap-CSS bereits.

    Zitat von Zintelinho

    damit sie nur für diese Vorlage greift.

    Das versteh ich noch nicht ganz. Damit du das auch im Backend siehst oder wie meinst du das?

    Nein, ich möchte, dass die Vorlage, die ich oben gepostet habe, direkt im Frontend mit einer CSS dargestellt wird, die ich vorgeben. Ansonsten ist da ja nur die reine html zu sehen. Momentan schreibe ich mittels "style" das direkt in den Code, ohne eine CSS zu haben, bspw.

    Code
    <div class="container" style="padding: 15px;">

    Aber so kann ich ja nicht mit Grid und Media Query arbeiten für die entsprechenden Zellen.

    Es ist ein Fehler Basisklassen von Bootstrap, also hier z.B. "container" so zu verändern wie du das vorhast. Damit zerschießt du ggf. das gesamte, responsive Verhalten der Seite. Muss nicht immer, aber ist halt häufig so.

    Weiters gibt es ja für/von Bootstrap diverse Utility-Klassen, die man auch so kombinieren kann, dass sie je nach Bildschirmbreite unterschiedlich arbeiten. Man kann sich so viele mediaquery-Anweisungen sparen. Bspw. auch für paddings, margins gibt es solche Utilityklassen. https://getbootstrap.com/docs/5.2/layout/utilities/

    Zum Thema individuell. Entweder zauberst du eine eigene Phantasieklasse dazu. EdIt: Das geht natürlich nicht nur für "container"

    Code
    <div class="container meinEigener"

    Dann kannst du im CSS-Datei das z.B. so ansprechen. Ob nun mit oder ohne Media-Queries.

    Code
    .container.meinEigener{
....

}

    oder nur

    Code
    .meinEigener{
....
}

    oder, meist besser, noch einen div drumrum

    und

    Code
    .meinEigener .container{
....

}

    oder nur

    Code
    .meinEigener{
....
}

    Wenn du in den HTML-Quelltext von Joomla-Seiten schaust, hast du sehr oft spezifische Klassen im <BODY>-Tag je Seite. Bei mir z.B. auf der Startseite.

    Code
    <body class="... view-category layout-blog ... itemid-365 has-sidebar-right">

    Also vielleicht

    Code
    .view-category.layout-blog .meinEigener{...}

    Zusätzlich bietet Joomla gelegentlich die Möglichkeit spezifische Seitenklassen im Backend einzutragen.