weiße Balken oberhalb und unterhalb des Headers entfernen oder verkleinern

  • Gelöst eschberlin

    (@eschberlin)


    vor 2 Jahren, 2 Monaten

    Hallo,

    ich möchte auf Basis des Twenty Twenty-Three eine Fotowebsite bauen. Den Anfang seht ihr unter http://esch-projekt.de. Noch ist das sehr übersichtlich.

    Mein Wunsch ist es, die weißen Streifen oberhalb und unterhalb des Headers zu beseitigen (wenn diese Streifen verschwinden soll der Hintergrund schwarz werden – das schaffe ich dann).

    Ich habe bisher mit Bordmitteln des Editors keine Möglichkeit gefunden, diese beiden weißen Streifen zu entfernen.

    Ich wäre für einen Hinweis oder eine Idee sehr dankbar!

    Herzliche Grüße aus Berlin, Hans-Jürgen

    P.S.: habe es mit den Edge-Entwicklertools geschafft, zumindest im Browser den oberen weißen Balken auszuschalten

    element.style {
    }
    body {
    background-color: var(–wp–preset–color–base);
    color: var(–wp–preset–color–contrast);
    font-family: var(–wp–preset–font-family–system-font);
    font-size: var(–wp–preset–font-size–medium);
    line-height: 1.6;
    /* –wp–style–root–padding-top: var(–wp–preset–spacing–40); */
    –wp–style–root–padding-right: var(–wp–preset–spacing–30);
    –wp–style–root–padding-bottom: var(–wp–preset–spacing–40);
    –wp–style–root–padding-left: var(–wp–preset–spacing–30);
    }
    body {
    –wp–style–block-gap: 1.5rem;
    }
    body {

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren, 2 Monaten

    Den weißen Abschnitt ober und unter dem Header würde ich so entfernen:

    .wp-site-blocks {
padding: 0;
}
.wp-site-blocks > * + * {
margin-block-start: 0;
}
    Thread-Starter eschberlin

    (@eschberlin)

    vor 2 Jahren, 2 Monaten

    Hi & herzlichen Dank für Deine freundliche Hilfe!

    Wo soll ich den den Code reinpacken?

    Du merkst, ich bin ein ziemlicher Anfänger. Über den Editor habe ich ja nur für einzelne Abschnitte die Möglichkeit zusätzliches CSS einzugeben. Wäre die Datei style.css oder fonctions.php der richtige Ort (ich habe ein Child-Theme angelegt)?

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 2 Jahren, 2 Monaten

    Hallo,
    die CSS-Regeln von Bego packst du unter Design > Customizer > Individuelles CSS.
    Viele Grüße
    Hans-Gerd

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren, 2 Monaten

    Naja, wenn er doch schon ein Child-Theme hat, kann er doch auch die fonctions.php und style.css nutzen? Also: unten an der style.css anhängen.

    (Liebe Mitleserinnen und Mitleser,
    ihr prägt euch bitte ein, dass es functions.php heißt, weil solche Tippfehler zu stundenlanger Fehlersuche führen können. Pedantisch? Vielleicht. Aber dann habt ihr auch noch nicht bis drei Uhr morgens am Computer gesessen, um den Sch#*$%-Fehler zu finden.)

    Thread-Starter eschberlin

    (@eschberlin)

    vor 2 Jahren, 2 Monaten

    zunächst ein dickes Dankeschön für die Tipps!

    Habe die style.css im Ordner twentytwentythree-child entsprechend ergänzt. Leider stellt sich das gewünschte Ergebnis, nämlich dass die weißen Steifen verschwinden, nicht ein.

    Das Theme verfügt leider nicht mehr über die Menüoption „Individuelles CSS“, über die es mir früher gelang, ein Paar Kleinigkeiten anzupassen. Im (z.B.) Header gibt es jetzt die Option „ZUSÄTZLICHE CSS-KLASSE(N)“ – da reinkopiert tut sich auch nichts (eigentlich gehört der Code auch nicht in den Header)

    Habt ihr noch weitere Ideen oder geht das einfach nicht?

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren, 2 Monaten

    Leider stellt sich das gewünschte Ergebnis, nämlich dass die weißen Steifen verschwinden, nicht ein.

    Echt? Ich sehe die weißen Streifen nicht mehr. Browser-Cache geleert?

    Das Theme verfügt leider nicht mehr über die Menüoption „Individuelles CSS“

    Doch, tut es, ist nur (aus Gründen) versteckt.
    Ruf einfach mal im Browser https://example.com/wp-admin/customize.php (natürlich mit deiner Domain) auf.

    Im (z.B.) Header gibt es jetzt die Option „ZUSÄTZLICHE CSS-KLASSE(N)“ – da reinkopiert tut sich auch nichts

    Eine Zusätzliche CSS-Klasse gibt dir die Möglichkeit, einen Block individuell zu gestalten. Nur musst du dazu zusätzlich CSS-Regeln erstellen. Es reicht nicht, dass der Block „einen Namen“ hat, du musst diesem „Namen“ (dieser CSS-Klasse) auch eine Regel zuweisen. Das Eingabefeld in der Sidebar des Editors nimmt nur die CSS-Klassen-Bezeichnungen entgegen, keinen CSS-Code.

    Habt ihr noch weitere Ideen oder geht das einfach nicht?

    Nein, wir haben nie Ideen und schreiben nur von Dingen die einfach nicht gehen, und das den ganzen Tag. 😛

    (Wenn du beim Fotografieren gerade das Objektiv wechselst, fragt ja auch keiner „und Weitwinkel kannst du wohl nicht?“)

    Thread-Starter eschberlin

    (@eschberlin)

    vor 2 Jahren, 2 Monaten

    Sorry wenn ich etwas nervig rüberkam, war nicht beabsichtigt.

    Im Gegenteil: Ganz herzlichen Dank euere Hilfe! Und vielen Dank auch für den Hinweis auf customize.php.

    Das Problem ist gelöst und das Ergebnis sieht auf Firefox, Chrome und Edge identisch aus.

    Alles Gute aus Berlin, Hans-Jürgen

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 2 Jahren, 2 Monaten

    Sorry wenn ich etwas nervig rüberkam, war nicht beabsichtigt.

    Alles OK. Wir geben uns eigentlich bei jeder Frage Mühe und dann ist es schon mal komisch, wenn jemand sich „trotzdem“ bedankt oder fragt, ob hier „sonst noch jemand eine Idee“ hat. Aber wir freuen uns, wenn gemeinsam ein Weg gefunden wurde und am Ende das „gelöst“-Label am Thread steht.

Ansicht von 8 Antworten – 1 bis 8 (von insgesamt 8)
  • Das Thema „weiße Balken oberhalb und unterhalb des Headers entfernen oder verkleinern“ ist für neue Antworten geschlossen.