Bild nach jedem Artikel einfügen

[matrix630307]

Hallo
Ich möchte das Template helix hier: https://jka-karate.ch
umstellen auf astroid. Soweit habe ich ziemlich alles nachgebaut. Was noch fehlt, sind die beiden Trennstriche (rot/blau) zwischen den Beiträgen. Im helix Template habe ich da mit CSS ein Bild mit den zwei Linien einfügen können. Leider klappt es irgendwie bei astroid (noch) nicht.
Hat mir hier vielleicht jemand Tipp's?
Über Layout gibt es da irgendwie keine Option direkt. Über CSS schaffe ich es nur, unter jeweils zwei nebeneinander stehenden Beiträgen auf der Frontseite.
Vielen Dank

[ute-sch]

Versuche folgendes in der custom.css / Joomla 5 (in Joomla 4 ist es etwas anders):

/**** blaue Linie unter Beitrag *******/

.item-content {
    padding: 10px;
    border-bottom: 3px solid blue;
}	
/**** rote Linie unter Beitrag *******/

.item-content > .flex-column {
    border-bottom: 3px solid red;
    margin: 0 -10px
}
/*************************/

Im Quelltext / Browser-Entwicklermodus zu finden bei:

Äußerer Rahmen:

Innerer Rahmen:

Ergebnis: Funktioniert auch, wenn kein Lead-Text vorhanden ist.

MfG
Ute

[matrix630307]

@ute-sch
hi - and sorry
on jka-karate.ch - i have change the template to framework helix ultimate. with this template, the solution is clear and i have made this.
on jka-karate.ch/cms2 i have made a installation with astroid. here, i will made the color-lines. do you have a solution?
thank you.

[ute-sch]

Yes, I see. With on jka-karate.ch/cms2 it's very similar as in my posting above.
(I was using a Template by Joomlaplates, and you are using the Astroid Template One)

Is that what you want to achieve?

System > Site Template Stile > [YourTemplate] > Template Options > Custom Code: Scroll down to Custom CSS

/* Blue Line - modify padding and`color as you like */
.item-content {
    padding-bottom: 20px;
    border-bottom: 3px solid blue;
}

/* Red line - modify padding and`color as you like */
.item-content .flex-column {
    border-bottom: 3px solid red;
    padding-bottom: 20px;
}

For a better understanding:

This is the Joomla blog article (div.blog-item)

Inside is the content area (div.item-content) / blue line

And inside of the item-content is the div.flex-column area / red line

Have a nice day!
Ute

[matrix630307]

@ute-sch
hi
thank you - you have bring me to the way for a solution. i have made this:

item-content .flex-column {
padding-bottom: 70px;
background-image: url(https://jka-karate.ch/cms2/images/administration/divider.png);
background-repeat: no-repeat;
background-position: center bottom;
}

with this, i can steering the width of the two lines (as image).

thank you

[ute-sch]

Yes, that can't be done with "border".

Ute