readmore in div-Container positionieren, evtl. eigener Button?

Derzeit arbeite ich an einem Redesign meiner Website und möchte die Beiträge in div-Boxen erscheinen lassen, die mir eine Umrandung mit Schattierung geben. Den div-container definiere ich zu Beginn des Beitrags ganz zu Anfang und schließe mit </div> ganz am Ende des Beitrag. Das funzt auch schon prima und das Gesamtbild gefällt mir.

Probleme macht mir dabei die Positionierung des Readmore-Button wie man hier sehen kann:

Im Blog-Layout werden ja nur die Einleitungstexte der Beiträge gezeigt. Und auch diese erhalten die Umrandung mit Schattierung. Leider liegt dann der standardmäßige Readmore-Button sehr störend weit unterhalb des unteren schattierten Rand und wirkt so, als ob er nicht mehr zu dem Beitrag gehören würde.

Im o.g. verlinkten Beispiel habe ich im unteren der beiden Beiträge versucht, einen eigenen Readmore-Button zu erstellen und dachte, ich könnte ja über die Menü-Einstellung den standardmäßigen Readmore-Button ausblenden. Das würde zwar im BlogLayout funktionieren. Aber sobald der Beitrag dann ganz geöffnet wird, bleibt natürlich der von mir generierte Readmore-Button unterhalb des Einleitungstext stehen, während der standardmäßige Readmore-Button dann nicht angezeigt wird.

Oder müsste ich den schattierten Rahmen an anderer Stelle, z.B. in der index.php des Template definieren? Zu Beginn jedes Beitrags im BlogLayout sehe ich im HTML

div class="leading-0" itemprop="blogPost".....

Natürlich wird das durch die index.php des Template eingefügt. Aber dies könnte eine Eingriffsmöglichkeit sein, oder?

Klicke ich auf ReadMore, und der Beitrag wird voll angezeigt, sehe ich statt dessen im HTML

div class="item-page" itemprop=""

Also ist die Idee, in die index.php des Template einzugreifen, doch falsch?

Oder ich versuche, den von mir selbst gebauten ReadmoreButton immer dann verschwinden zu lassen, wenn die Klasse für den Beitragscontainer auf "item-page" wechselt? – Aber wie müsste dann das CSS dazu defineirt werden? Vielleicht so:

.item-page.rm-button {display: none;}
/* wobei dann rm-button für meinen Readmore-Button stehen würde */

Was tun?

Ich glaube, du hast mein Anliegen nicht verstanden und sehe auch nicht, wie meine viewport-css die derzeitige Position der Buttons verändert. Hab's sogar gerade noch mal mit Firefox kontrolliert.

Der von mir definierte div-Container mit dem schattierten Rahmen soll den Readmore-Button umschließen, wenn der Beitrag nur mit dem Einleitungstext, also im Blog-Layout angezeigt wird. Und das tut es zurzeit nicht.

Entweder kriege ich es hin, den div-Container so zu starten, dass Readmore-Button immer innerhalb liegt, oder ich muss ihn zwar setzen, aber ausblenden und meinen eigenen Readmore-Button erstellen (wie im zweiten Beitrag im o.g. Link). Dieser selbst erstellte Button muss aber ausgeblendet werden, wenn der Beitrag dann nach dem Klick auf den Button in vollem Umfang dargestellt wird.

Hab gerade die von dir genannten 5% auf 0% gesetzt. Du kannst es ja mal anschauen. Das Ergebnis zeigt immer noch die gleiche Problematik, nur sitzt der joomla-systemeigene Readmore-Button jetzt dicht am unteren Rand des Schatten.

Deshalb schrieb ich ja, dass ich annehmen muss, dass du mich nicht verstanden hast mit meinem Anliegen: Der joomla-eigene Readmore-Button soll INNERHALB des schattierten Rahmen positioniert sein.

In dem Einleitungstext des Beitrag "über mich" habe ich einen selbst erstellten Button "innerhalb" des schattierten Rahmen eingefügt. Dessen Nachteil im Gegensatz zum joomla-eigenen Readmore: Der selbst erstellte Button verschwindet nicht, wenn der Artikel vollständig angezeigt wird.

Die Leading-Klassen werden aber offensichtlich per PHP oder JS gesetzt, zumal sie ja bei Blogs fortlaufend nummeriert sind. Ich finde, da ist es ungünstig, einzugreifen.

Also setze ich besser den joomla-eigenen Readmore, damit die Unterteilung in den Einleitungstext usw. klappt. Dann blende ich den Readmore-Button per Menüpunkt-Vorgabe aus und setze meinen eigenen Button, der einfach nur eine Verlinkung zum Beitrag darstellt.

Damit der aber nicht die Vollansicht des Beitrag stört, müsste ich in CSS definieren, dass der Button innerhalb eines Containers der Klasse item-page nicht angezeigt wird. (display: none;)

Mache ich das mit

.itempage.btn oder

.itempage .btn ??

Hier für andere Interessenten die Lösung:

.article-head ist die Klasse für meinen Rahmen mit Schatten, der um den Beitrag herum laufen und den selbstgemachten Readmore-Button umschließen soll.

.item-page ist die von Joomla generierte Klasse, wenn ein Beitrag im Vollformat angezeigt wird.

.btn ist die template-eigene Klasse für Buttons

.btn-cl ist mein separater Button mit fast den gleichen Definitionen, wie der vom Template (Protostar).

Den Template-Button darf ich nicht nehmen, weil ich den nicht frei umdefinieren kann. Mein Button soll also in der Beitragsvorschau erscheinen, aber nicht, wenn der Beitrag im Vollformat gezeigt wird, also item-page aktiv ist.

.article-head .btn-cl {
    margin: 0px 15px 10px 0px;
}

 .item-page .btn-cl {
    display: none; 
}  

Funktioniert prima