Hintergrundfarbe Abschnittweise auf der Home-Seite ändern

  • Hallo zusammen,
    ich baue derzeit eine neue eigene Website und hoffe hier auf den richtigen Denkanstoß.

    Ich möchte die Startseite (OnePager) grundsätzlich frei gestalten, daher habe ich das Standart-Template als Vorlage gewählt, keine Sitebar.
    Der Content-Bereich war zentriert, so dass rechts und links des Textbereiches die Bodyfarbe zum Vorschein kam.
    Ich konnte schon erfolgreich in der Style.css den .contenct-container auf 100% Strecken, so dass jetzt nur noch Textbereich mit der Hintergrundfarbe weiß ist.

    Ich würde den weißen Hintergrund gerne in mehrere Farbliche Bereiche unterteilen, über die Komplette Seite.
    Per CSS ein DIV hat nicht zum erfolg geführt, da ich (wegen Padding) einen gewissen Abstand zur Seite habe, was ja auch Sinn macht.
    Nun stehe ich aber auf dem Schlauch, an welcher Stelle könnte ich quasi dem .page-content in verschiedene Bereiche unterteilen, um dort jeweils die Farbe zu ändern?
    Hat jemand einen Tipp, an welcher Stelle ich suchen muss? In der Style.css finde ich den Abschnitt .page-content mit einem Farbwert, aber wie könnte ich verschiedene Bereiche erzeugen?

    Ich bin kein Profi in CSS, daher muss ich mir das langsam aneignen.

    Als Beispiel, wie ich es mir vorstelle, anbei ein Screenshot einer x-beliebigen Seite:

    Ich freue mich, wenn mir jemand etwas unter die Arme greifft :)

    EDIT: Das Thema ist Oneline-Lite

    Viele Grüße

    Tim

    3 Mal editiert, zuletzt von V1L (4. Februar 2019 um 20:52)

    • Anzeige

    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

  • Ich konnte schon erfolgreich in der Style.css den .contenct-container auf 100% Strecken,


    Das ist grundsätzlich NICHT sehr gut! Änderungen in den originalen Files werden beim nächsten Update überschrieben! Dann sind deine mühevoll gemachten Anpassungen Geschichte :eek::oops::mad:

    CSS Änderungen werden in die Zusätzlichen CSS eingefügt! Diese findest du meist im Dashboard unter Design - Customizer.
    Wenn du und nun einen Link zu deiner Baustelle gibst können wir uns ansehen was du genau willst.

    Im Demo des Themes sind wechselweise Abschnitte mit einem dunkeln Hintergrund und dazwischen eben weißer Hintergrund. Der weiße Hintergrund besteht aus 3 Teilen - z.B. bei Our Services der obere Teil - .service-wrapper .svg-top-container { fill: #fff;}

    Zu finden (mit dem Firefox) Maus rechts unter das Bild - rechte Maustaste drücken "Element untersuchen auswählen - siehe unten ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!