Hestia Theme: Wie Textkästen färben und schmaler machen?

  • cfredricksen

    (@cfredricksen)


    vor 1 Jahr, 9 Monaten

    Ich habe bei einer Homepage wp.giant-hogweed.com nun erst einmal alle Elemente eingefügt.
    Neben dem Problem, dass die Startseite bei Aufrufen der Seite nicht angezeigt wird, würde mich Folgendes interessieren

    1. Ist es möglich, die Textkästen, die im Moment weiß sind, komplett einzufärben? Ich habe nur eine Option gefunden, den Bereich des Textes zu färben (im Einstellungsmenü der jeweiligen Seite).
    Noch besser wäre es, wenn man sie durchsichtig machen könnte. Das scheint zu gehen, zumindest war es beim ersten Aktivieren des Themes so, dass der Text der Startseite ohne Hintergrund (Kasten) über das Hintergrundbild gescrollt werden konnte.
    Ich habe dann das Hintergrundbild gegen eines von mir ersetzt und anscheinend dabei diese Funktion abgeschaltet.
    Wenn dies auch für die momentan weiße Kopfzeile (in der unser Logo und das Menü steht) ginge, wäre es noch besser.

    2. Wenn man sich die Seite anschaut, fällt auf, dass es links und rechts einen großen freien Bereich gibt. Hier können normalerweise Widgets platziert werden. Ich dachte erst, dass man diese für jeder Unterseite individuell einstellen kann, sodass bspw. die Fotos und Teile des Textes nicht über sondern neben dem Text stehen. Doch leider werden diese Elemente auf allen Seiten angezeigt. Daher ist der Platz links und rechts überflüssig. (Es sei denn, man könnte Widgets für jede einzelne Seite extra platzieren)
    Ist es möglich, diesen Kasten schmaler zu machen? Wenn man ihn durchsichtig bekäme, wäre das natürlich noch besser. Dennoch würde mich interessieren, ob dies möglich ist.

    Ich würde mich freuen, wenn jemand Ideen hat und mir helfen könnte.

Ansicht von 6 Antworten – 16 bis 21 (von insgesamt 21)
1 2
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 9 Monaten

    Vorab: es ist eigentlich nicht unser Ziel, hier Grundlagen zu CSS (oder HTML, PHP, JavaScript usw) zu vermitteln und wir erstellen auch nicht auf Zuruf Änderungen an Themes und Plugins, die dir bereits kostenlos zur Verfügung gestellt werden. Dass wir hier das Thema behandeln ist eine Ausnahme. (Wir hatten auch schon User, die meinten, daraus Ansprüche ableiten zu können.)

    body:not(.home).page .main {
  background: rgba(255,255,255,0.8);
}

    bedeutet umgangssprachlich ausgedrückt:

    Wenn das <body>-Tag nicht die CSS-Klasse .home hat (also nicht die Startseite ist) und dem HTML-Dokument die CSS-Klasse .page zugewiesen wurde (was WordPress bei Seiten macht, bei Beiträgen wäre es .post), verwende für den Abschnitt mit der CSS-Klasse .main (der Abschnitt mit dem Inhalt der Seite) eine CSS-Regel, die den Hintergrund auf die Farbwerte Rot 255, Grün 255, Blau 255 und den Alpha-Kanal auf 80% setzt. Damit hast du dann einen weißen Hintergrund mit 20% Transparenz.

    Die Regel betrifft alle Seiten. Möchtest du nur eine bestimmte Seite ansprechen, kannst du z.B. die CSS-Klasse mit der Seiten-ID verwenden, die WordPress automatisch einfügt, z.B.

    body:not(.home).page-id-115 .main {
  background: rgba(255,255,255,0.8);
}

    Bei der Regel, die ich zuerst genannt hatte, ist mir allerdings tatsächlich ein Tippfehler reingerutsch. Zwischen not(.home) und .page darf kein Leerschritt stehen.

    Das Eingabefeld im Editor, das du angesprochen hast, ist dafür gedacht, einzelnen Blöcken eine eigene CSS-Klasse zuzuweisen, wenn dir die Gestaltungsmöglichkeiten des Editor nicht ausreichen und du z.B. einen Block mit einem Schlagschatten versehen möchtest. Die selbstgewählte CSS-Klasse kannst du dann wieder für eine CSS-Regel im Customizer verwenden. – Entsprechende Kenntnisse vorausgesetzt.

    Thread-Starter cfredricksen

    (@cfredricksen)

    vor 1 Jahr, 9 Monaten

    Entschuldige, das war nicht meine Absicht. Und ganz sicher werde ich kleine Ansprüche aus deinen Antworten ableiten. Im Gegenteil. Ich bin dir/euch wirklich unglaublich dankbar, dass ihr mir bei all diesen Dingen helft.
    Mit dem neuen Code funktioniert es auch. Die Farbe und Transparenz kann ich dann selbst anpassen.

    Ich wusste zum einen nicht, wohin ich mich sonst wenden soll, lerne aber normalerweise recht schnell. Deine Erklärungen kann ich zuordnen und mit diesem Code dann sehr gut weiterarbeiten.

    Gibt es denn ansonsten eine Seite, auf der man solche CSS-Grundlagen finden kann? Die Codes an sich sind mir einfach bisher fremd.

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 9 Monaten

    Entschuldige, das war nicht meine Absicht.

    Alles gut, war nur ein freundlicher Hinweis.
    Du leitest vielleicht keine anderen Ansprüche ab – andere schon. 🙂

    Zu CSS gibt es tolle Tutorials auf Youtube, manche kompakt, manche sehr ausführlich. Aber eigentlich solltest du dich fragen, ob das der richtige Ansatz ist. Wenn du ein Glas Milch trinken möchtest, ist es vielleicht interessant, wo die Milch herkommt; du wirst aber deshalb nicht gleich einen Bauernhof kaufen und Kühe anschaffen? Es ist gar nicht im Sinne des (WordPress-)Erfinders, dass du programmierst. Statt dessen solltest du dir ein Theme aussuchen, das mehr deinen Vorstellungen entspricht. Oder für sowas eine Einstellungsmöglichkeit bietet.

    Thread-Starter cfredricksen

    (@cfredricksen)

    vor 1 Jahr, 9 Monaten

    Ich hatte mir viele Themes angeschaut. Man wird ja geradezu überflutet damit. Und dieses passte tatsächlich am besten.
    Einige Sachen habe ich leider am Anfang „verprogrammiert“. Und so war das einzige, was übrig blieb, dass diese weißen Felder und die Kopfzeile eben transparent bzw. halbtransparent schöner wären. Und ich finde, dass es jetzt auch ganz gut ausschaut.
    Die eierlegende Wollmilchsau gibt’s halt nicht ;o)

    Darf ich fragen, wie andere da „Ansprüche“ ableiten würden? Ich kann es mir nicht vorstellen.

    Ich bin immer dankbar, wenn mir in einem Forum so geholfen wird. Vor allem, wenn ich auf diesem Gebiet noch ein blutiger Anfänger bin. In anderen Foren, kann ich dann anderen Leuten unter die Arme greifen, wenn sie Hilfe brauchen, bspw. im Drummerforum, im Film-Forum usw.

    Auch auf die Gefahr hin, dass du aus der Haut fährst, aber hast du eine Idee, wie man die Kopfzeile halbtransparent bekommt. Ich habe mich in dem Code, den du mir geschickt hattest, versucht zu modifizieren. Es hat aber leider nicht funktioniert. Möglicherweise muss man irgendwo „header“ einbauen und „not“ rausnehmen. Aber ich kann es mir natürlich nicht zusammenreimen.
    Wenn es zu aufwändig ist – kein Problem. So oder so… ich lasse dich dann in Ruhe und kann nicht mehr tun, als dir wirklich von Herzen zu danken.

    Moderator Bego Mario Garde

    (@pixolin)

    vor 1 Jahr, 9 Monaten

    Darf ich fragen, wie andere da „Ansprüche“ ableiten würden?
    Ich kann es mir nicht vorstellen.

    Jemand hat z.B. einen Thread gestartet, weil ihm für eine Reihe von Anpassungen die notwendigen Kenntnisse in CSS fehlten. Er wurde darauf hingewiesen, dass wir uns hier mit Anwendungsproblemen bei der Nutzung von WordPress beschäftigen möchten und es nicht unsere Aufgabe ist, für kostenlos zur Verfügung gestellte Themes auf Zuruf einen Satz an CSS-Regeln zu erstellen. Der Thread wurde mit dieser Begründung geschlossen.

    Es folgten mehrere neue Threads mit Beschimpfungen wegen unfairer Behandlung, „Macht-Mißbrauch“ des Moderators und einen Anrecht, „genauso wie andere auch“ CSS-Regeln zu erhalten.

    Ich möchte nicht weiter ins Detail gehen, aber solche Ansprüche möchten wir eben vermeiden. Wir verstehen uns nicht als „billige/kostenlose Dienstleister“ und möchten denen, die oft genug für kleines Geld solche Arbeiten ausführen, nicht noch den Job wegnehmen. Deshalb der – wie gesagt nicht persönlich gemeinte, aber notwendige – Hinweis.

    Und wo wir gerade beim Thema sind … Probier mal das hier:

    body:not(.home).page .navbar {
  background: transparent;
  box-shadow: none;
}

    Für weitere Änderungen musst du dir aber bitte jemand suchen. Es gibt Freelancer-Portale wie Fiverr, bei denen dir ein fleißiger Mensch das für den sprichwörtlichen Fünfer fertig macht.

    Thread-Starter cfredricksen

    (@cfredricksen)

    vor 1 Jahr, 9 Monaten

    Ja, da hast du recht. Nun kann ich auch nachvollziehen, was du meinst. Das ist keine Art, so zu reagieren. Leider greift das immer mehr in der virtuellen Welt um sich. Es ist ja so einfach, wenn man niemanden direkt vor sich hat. Da kann man ganz ungezügelt Dampf ablassen und beleidigen.
    Und gebranntes Kind scheut das Feuer.

    Dir daher erst recht herzlichen Dank – nicht nur, dass du mir dennoch den CSS-Code genannt hast, sondern auch für den Tipp mit den Portalen. Das wusste ich bisher auch nicht und es ist auf alle Fälle angemessen, dort nachzuschauen und für deren Arbeit auch zu bezahlen.

Ansicht von 6 Antworten – 16 bis 21 (von insgesamt 21)
1 2
  • Das Thema „Hestia Theme: Wie Textkästen färben und schmaler machen?“ ist für neue Antworten geschlossen.