Astroid-Framework Blog Layout anpassen (Vorschaubild etc.)

    Hallo,


    wie im anderen Fred ja gewünscht, mache ich zu dieser Fragestellung einen neuen Fred auf.

    Es geht im Grudsatz darum, meine JSN Templates (JSN Boot, JSN Epic) mangels Nachfolge mit dem Astroid-Framework nachzuahmen.

    Das ist bisher ganz gut gelungen und ich find das Framework auch wirklich gut.

    Nur scheitere ich aktuell am Blog-Layout.


    Auf meiner alten Seite (onki.de) sieht das aktuell so aus:


    Mit dem neuen Template (beim Framework mit dabei) sieht die Sache aktuell auf dem Testgelände (onki.net) so aus:


    Es geht hauptsächlich um die Anordnung des Beitragsbildes (eingetragen in den Beitragsoptionen).

    Wo muss ich beim Framework ansetzen, um das Bild wie oben unter der Überschrift links und mit Text umfließend) zu formatieren?


    Gruß

    Onki

    In Joomal sollte man dafür mit CSS-Klassen arbeiten. In diesem Fall mit CSS-Klasse Bild.

    Diese kannst du in deiner custom.css anlegen und dann in dein Beiträgen verwenden.


    Beispiel Einleitungsbild links und Text rechts.

    Diesen Code mal in deiner custom.css einfügen und speichern:

    Code
    /*CSS-Klasse Einleitungsbild links Text rechts*/
.einleitungsbild-links.item-image {
float: left;
padding-top: 5px;
padding-right: 10px;
max-width: 50%;
}

    Danach gehst du in den Beitrag und öffnest den reiter "Bilder und Links".

    Hier fügst du die angelegte CSS-Klasse in die Zeile bei CSS Klasse Bild (Einleitungsbild) ein.

    Speichern nicht vergessen.



    Nun müsste beim Beitrag in deiner Blogansicht das Bild links und der Text rechts stehen.


    Das kannst du natürlich auch mit dem Beitragbild so machen.

    Dafür dann diesen Code zusätzlich in deine custom.css einfügen und wie oben verfahren.

    Musst die Klasse (bild-links) dann natürlich beim Beitragbild in der Zeile für die Klasse hinterlegen.


    Code
    /*CSS-Klasse Beitragsbild links Text rechts*/
.bild-links .img-fluid {
float: left;
padding-top: 5px;
padding-right: 10px;
max-width: 25%;
}


    Probier es einfach mal aus.

    Hallo,


    danke für den Tip. So in der Art hatte ich das erwartet.

    Die Sache hat nur einen entscheidenden Haken. Nach der Methodik müsste ich den Content aus fast 20 Jahren überarbeiten.

    Das ist für mich ein no-go.

    Das alte Template hat doch auch ohne äußeres zutun ein Beitragsbild erkannt und entsprechend formatiert.

    Da hab ich nie eine CSS-Klasse anlegen müssen.


    Es sollte doch für die "Grundelemente" eine Art vorgegebene Klasse geben - oder?


    Gruß

    Onki

    Klar, das war ja auch nur ein Beispiel, wie man es für diverse Beiträge anpassen kann.


    Wenn du eine generelle Anpassung wünscht, lass halt die Klassenangabe im Code für die custom.css weg und setzte es übergreifend.


    Also so:


    Code
    /*Einleitungsbild links Text rechts*/
.item-image {
float: left;
padding-top: 5px;
padding-right: 10px;
max-width: 50%;
}

    und so:


    Code
    /*Beitragsbild links Text rechts*/
.img-fluid {
float: left;
padding-top: 5px;
padding-right: 10px;
max-width: 25%;
}

    Das hat soweit geklappt - Danke.

    Nun zickt die Überschrift der Artikel noch rum.


    Damit das Bild weiter unten ist hab ich padding-top auf 70px gesetzt.

    Wenn ich nun aber article-title: align-left zusätzlich eingebe. bleibt der Text rechts neben dem Bild stehen.

    Da wird irgendwas überlappen, was hab ich aber nicht hgerausgefunden. CSS zu analysieren ist nicht so meins und mit dem Firefox CSS Tool bin ich noch halbwegs auf Kriegsfuß.


    Gruß

    Onki

    Ich hab nochmal etwas experimentiert auf der o.g. Seite.


    Diesen Custom CSS hab ich noch eingetragen- jedoch ohne Änderung der Textorientierung der Überschrift:

    Code
    /*Artikeltitel (Überschrift)*/
.page-header {
text-align: left;
}

    Wenn ich die Überschrift untersuche wird mir als Klasse "page-header" angezeigt.

    Nach dem o.g. Code müsste damit diese Element auf linksbündig gestellt werden. Tut es aber nicht.

    Wo ist der Denkfehler?

    Vermutlich wieder irgend ein Syntax-Fehler. Der Hauptgrund warum ich mit programmieren auf Kriegsfuß stehe.


    Gruß

    Onki

    Kleines Update.


    Ich hatte den Verdacht, dass ich im Astroid-Framework hier etwas mit den Typographie-Optionen ändern kann.

    Der hat sich aber nicht erhärtet, da hier lediglich Schrifttypen und -größen festgelegt werden, aber keine Ausrichtungen.


    Gruß

    Onki