Beiträge/Posts eingerahmt darstellen

Buro Winchester

Hallo zusammen.
Ich habe vor kurzem wieder ein wordpress blog erstellt, und muss zugeben auf dem Gebiet bin ich ziemlich eingerostet.
Ich Benutze die "Lite" Version des Themes "Adventure" - und bin damit eigentlich ziemlich zufrieden.
Allerdings würde ich hier und da gerne was ergänzen.

Und am wichtigsten ist mir momentan, die Blogeinträge getrennt vom Hintergrund in einen Kasten zu packen.
Da der text sonst - falls ich ein Hintergrundbild hochladen würde, direkt auf dem bild stehen würde, und ich es auch ohne Hintergrund bild recht unschön finde wenn der text so frei rumsteht.

Anbei sind einige Bilder wie es momentan aussieht, und wie ich es gerne haben würde.

Im ersten Bild befindet sich meine Website. rechts sind die Widgets, die finde ich ziemlich gut so wie sie sind, und im Grunde genommen sollen Beiträge in einer ähnlichen Box gepostet werden wie die von den Widgets.

im zweiten bild seht ihr eine Website die ich als "Vorlage" in diesem Szenario benutze.
Ich würde den Text gerne in einen Ähnlichen kasten packen wir im zweiten bild abgebildet.
im dritten bild seht ihr die Trennung zwischen Dem Beitrag und den Kommentaren, so würde ich es auch gerne bei mir einstellen.

Meine Frage Lautet nun -
Wie genau stelle ich das an ?
Ich weiß schon, das ich nen child theme erstellen und dann die style.css (oder ne andere datei, müsste nochmal nachsehen) bearbeiten müsste um den nötigen code einzugeben.
Habe allerdings keine Ahnung welchen code ich eingeben muss, und ob der an einer bestimmten stelle stehen muss.
Ich weiß, es ist eigentlich eine simple angelegenheit, aber solange ich mich noch nicht wieder eingelernt habe, scheint es für mich nicht so einfach zu sein.

wäre für jede hilfe sehr dankbar.

wünsche euch frohe feiertage und schon mal einen gut rutsch ins neue Jahr.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SEpp55

Grundsätzlich wäre dazu zu sagen, daß Änderungen nie an den original Dateien erfolgen!
Weiters sicherheitshalber ein Full-Backup anlegen - für alle Fälle ;-)
Ich verwende dazu All in One WP Migration. Das ist bis 512Mb frei und ich sehe den Vorteil in diesem Plugin, daß man das Backup sofort für Migrationen verwenden kann. (z.B. auf einer lokalen Testumgebung).
Für Anpassungen im Style kannst du das mit den Bordmitteln von WP machen.
Die Style-Anpassungen werden unter Design - Customizer - Zusätzliche CSS gemacht werden! LINK.
Sollten größere Änderungen anliegen, ist ein Child-Theme anzulegen.

Zu deinen Anpassungen verwende zur lokalisierung das Browser(entwickler)tool - F12 (oder rechte Maustaste - Element untersuchen)

Hier einige Möglichkeiten für dein Theme

Die Änderungen dann unter Zusätzliche CSS einpflegen. Z.B. die erste Änderung

Code

.lay4 {
    background-color: grey;
}

u.s.w. siehe Videos.

Marcus[IS]

Mojn,

Zitat

[COLOR=#333333]Ich weiß schon, das ich nen child theme erstellen und dann die style.css (oder ne andere datei, müsste nochmal nachsehen) bearbeiten müsste um den nötigen code einzugeben. [/COLOR]

Ja da bist du auf dem richtigen Weg. Wenn man noch zusätzliche Funktionen einbauen will, legt man meist noch eine functions.php (keine Kopie der originalen aus dem Eltern Theme) an und pflegt seine Wunsch functionen darüber ein. Manche wollen auch die header.php, oder die footer.php ändern und legen dann davon eine Kopie in den Child Theme Ordner.

Für die Darstellung des Text in einer Box braucht es lediglich ein paar css Anweisungen und dafür musst du die CSS Klasse des Text ermitteln.
In der Regel kann da das Webmaster Tool des Browsers helfen (Bei Chrome Rechte Maustaste auf den Text Klicken und dann aus dem Kontextmenü ntersuchen auswählen).

Ich könnte zwar jetzt ins Blaue raten und sagen die Klasse kann .entry-content, oder .post-content heißt, doch das unterscheidet sich meist immer von Theme zu Theme. ;)

Wenn du die Klasse ermittelt hast, einfach die Klasse mit der gewünschten Hintergrundfarbe versehen und in die style.css einfügen.

Zum Beispiel;

Code

.entry-content {


background-color: #gewünschter Farbwert;


}

Du kannst aber auch anstelle ich sage mal als Beispiel für den Farbwert #000 (#000000), welcher für Schwarz steht, auch den RGB Farbwert eintragen.
Die Farbanweisung hierfür würde dann lauten rgb(0, 0, 0).

Um Farbwerte zu ermitteln reicht ein einfacher Color Picker.
https://www.w3schools.com/colors/colors_picker.asp

Buro Winchester

Hallo, danke für deine antwort.
Habe mir den plugin runtergeladen und einen backup erstellt, ebenfalls habe ich bereits ein child theme mit der hilfe vom plugin "child-theme configurator" erstellt.
Allerdings scheitere ich daran mein eigentliches anliegen in die tat umzusetzen.

Ich will ja eigentlich nur, das der Inhalt meiner Beiträge vom restlichen Hintergrund abgehoben wird, soll heißen - wenn ich zB, die Hintergrund farbe ändere, soll sich das nicht auf die hintergrundfarbe meiner Beiträge auswirken, allerdings krieg ichs nicht hin. Hab versucht deinem video schritt für schritt zu folgen aber konnte immer nur entweder die hintergrundfarbe ändern oder es gab irgendwelche error meldungen.

Vielleicht wäre es hilfreich meine website zu verlinken?

um so zu fragen, wie müsste ich vorgehen (anhand meines screenshots) um eine separate box für meine Beiträge einzurichten, die eine andere hintergrundfarbe hat, als die hintergrundfarbe meiner website (ka wie ichs anders beschreiben soll)

Marcus[IS]

Habe ich jetzt nur mittels Webmastertool ausprobiert, aber du kannst ja mal dieses in der style.css des Child Theme versuchen;

Code

.site-main article {
background-color: #999;
border: 1px solid #555;
}


#comments article {
background-color: #f6f4f4;
}

Die Farbwerte #999, #555 sind jetzt nur als Beispiel und sollte durch deine gewünschte Farbe ersetzt werden.

Dadurch sollte sich die Hintergrund Farbe des Artikel Bereich ändern und die Hintergrundfarbe der Artikel Texte bleibt so wie sie jetzt ist.
Hat allerdings den Haken, dass sich dadurch auch die Farbe in den Kommentaren änderte, daher noch die Extra Anweisung mit dem DIV für die Comments.

Buro Winchester

Zitat von 'Marcus[IS
;742836']Mojn,
Ja da bist du auf dem richtigen Weg. Wenn man noch zusätzliche Funktionen einbauen will, legt man meist noch eine functions.php (keine Kopie der originalen aus dem Eltern Theme) an und pflegt seine Wunsch functionen darüber ein. Manche wollen auch die header.php, oder die footer.php ändern und legen dann davon eine Kopie in den Child Theme Ordner.
Für die Darstellung des Text in einer Box braucht es lediglich ein paar css Anweisungen und dafür musst du die CSS Klasse des Text ermitteln.
In der Regel kann da das Webmaster Tool des Browsers helfen (Bei Chrome Rechte Maustaste auf den Text Klicken und dann aus dem Kontextmenü ntersuchen auswählen).
Ich könnte zwar jetzt ins Blaue raten und sagen die Klasse kann .entry-content, oder .post-content heißt, doch das unterscheidet sich meist immer von Theme zu Theme. ;)
Wenn du die Klasse ermittelt hast, einfach die Klasse mit der gewünschten Hintergrundfarbe versehen und in die style.css einfügen.
Zum Beispiel;
Code
.entry-content {


background-color: #gewünschter Farbwert;


}
Du kannst aber auch anstelle ich sage mal als Beispiel für den Farbwert #000 (#000000), welcher für Schwarz steht, auch den RGB Farbwert eintragen.
Die Farbanweisung hierfür würde dann lauten rgb(0, 0, 0).
Um Farbwerte zu ermitteln reicht ein einfacher Color Picker.
https://www.w3schools.com/colors/colors_picker.asp
Alles anzeigen

hey, habe diese antwort leider erst jetzt gesehen - allerdings war dies der richtige weg.

.entry-content war korrekt, musste zusätlich noch einige andere klassen nennen um es auch auf verschiedene elemente anzuwenden
.blog-post zB.

dein tipp, die functions.php hat mich scheinbar in die richtung des lösungs eines weiteren problems gebracht.
Und zwar muss ich für das lösen einiger probleme den html code ändern, allerdings ist bei wordpress ja alles php, wie ich durch googlen nach lösungen für mein Problem herausgefunden habe.

Ich arbeite mit nem freund zusammen der mich etwas unterstützt und mir hier und da was erklärt, er kennt sich mit css/html gut aus aber mit php garnicht.
Die frage ist nun, können wir trotzdem - ohne php kenntnise, elemente auf der website bearbeiten die wir mit css nicht bearbeiten können?
(zB. funktionen hinzufügen)

Marcus[IS]

Zitat von Buro Winchester

hey, habe diese antwort leider erst jetzt gesehen - allerdings war dies der richtige weg.
Ich arbeite mit nem freund zusammen der mich etwas unterstützt und mir hier und da was erklärt, er kennt sich mit css/html gut aus aber mit php garnicht.
Die frage ist nun, können wir trotzdem - ohne php kenntnise, elemente auf der website bearbeiten die wir mit css nicht bearbeiten können?
(zB. funktionen hinzufügen)

Für eigene Funktionen legt man ja die functions.php im Child-Theme an. ;)

Hier wird ein wenig darauf eingegangen;
https://developer.wordpress.org/themes/basics/theme-functions/

Allerdings sollte schon Grundwissen bezüglich PHP vorhanden sein.
Obwohl ich mal behaupte das der Schritt von HTML zu PHP gar nicht so groß ist.
HTML ist halt die Klarschrift für den Browser, während PHP Serverseitig läuft und die Anweisungen in HTML interpretiert und als dieses dann an den Browser ausgibt.

Man kann aber auch nicht alles mittels functions.php regeln.
Wenn es um Layoutfragen geht, wäre es eventuell manchmal auch ratsam die betreffende Datei vom Eltern-Theme ins Child-Theme zu kopieren und diese dann anzupassen.
Da WordPress eine integrierte Hierarchie Abfrage besitzt, würde dann die Datei aus dem Child-Theme der aus dem Eltern-Theme bevorzugt werden, da das Child-Theme als aktives Theme eingestellt ist.

Aber es kommt immer darauf an, was man genau machen will.
Eine Anpassung von Dateien im Child würde ich persönlich nur machen, wenn es wirklich sehr gravierende Anpassungen wären, die dies nötig machen.

Buro Winchester

Zitat von 'Marcus[IS

;743065']Für eigene Funktionen legt man ja die functions.php im Child-Theme an. ;)
Hier wird ein wenig darauf eingegangen;
https://developer.wordpress.org/themes/basics/theme-functions/
Allerdings sollte schon Grundwissen bezüglich PHP vorhanden sein.
Obwohl ich mal behaupte das der Schritt von HTML zu PHP gar nicht so groß ist.
HTML ist halt die Klarschrift für den Browser, während PHP Serverseitig läuft und die Anweisungen in HTML interpretiert und als dieses dann an den Browser ausgibt.
Man kann aber auch nicht alles mittels functions.php regeln.
Wenn es um Layoutfragen geht, wäre es eventuell manchmal auch ratsam die betreffende Datei vom Eltern-Theme ins Child-Theme zu kopieren und diese dann anzupassen.
Da WordPress eine integrierte Hierarchie Abfrage besitzt, würde dann die Datei aus dem Child-Theme der aus dem Eltern-Theme bevorzugt werden, da das Child-Theme als aktives Theme eingestellt ist.
Aber es kommt immer darauf an, was man genau machen will.
Eine Anpassung von Dateien im Child würde ich persönlich nur machen, wenn es wirklich sehr gravierende Anpassungen wären, die dies nötig machen.

Alles anzeigen

vielen dank für die guten Ratschläge, die haben uns sehr gut weiter geholfen !
Mal so nebenbei, Frohes neues Jahr allen =)

pilag

Zum Beispiel;
Code:
.entry-content {

background-color: #gewünschter Farbwert;

}
Du kannst aber auch anstelle ich sage mal als Beispiel für den Farbwert #000 (#000000), welcher für Schwarz steht, auch den RGB Farbwert eintragen.
Die Farbanweisung hierfür würde dann lauten rgb(0, 0, 0).

Um Farbwerte zu ermitteln reicht ein einfacher Color Picker.

https://welookups.com/colors/colors_…colorhex=AFEEEE

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge/Posts eingerahmt darstellen

Jetzt mitmachen!