Diverse CSS-Anpassungen in Wordpress

  • Ich bin gerade dabei meinen Blog umzustrukturieren. Weg von dem Megatheme mit Pagebuilder, den ich das letzte Jahr hatte, zurück zu reinem, standardkonformem HTML/CSS mittels eines einfacheren Themes. Meine CSS-Kentnisse sind durch meine Abkehr aus dem Design-Bereich zunehmend eingerostet, zudem war die HTML/CSS/PHP-Schiene ohnehin noch nie meine Stärke. Das Meiste habe ich bereits hinbekommen, einige Elemente bekomme ich aber nicht angepasst, da ich die notwendigen Selektoren nicht herausfinde. Evtl. könnt ihr mir da bei ein paar Punkten unter die Arme greifen.


    Grundsätzlich finde ich das Design des Blogs in der jetzigen Form recht langweilig und bieder, aber mir fehlt schlichtweg die Luft, da was Schönes zu gestalten - Fokus lieber auf den Inhalt. Von daher einfach mal pragmatisch ein 0815-Layout… Ich hoffe, das kann ich mittelfristig wieder ändern, gerade da es mich massiv stört, dass ich viele eigene CSS-Anpassungen nur mittels !important "durchsetzen" kann. Wenn ich wieder Geld habe, gibts da einfach mal einen offiziellen Auftrag für einen Webdeveloper. :)

    Diverser Feinschliff am jetzigen Layout, gerade was die Typografie angeht, folgt jedenfalls noch in den kommenden Tagen.


    Nun aber zu den eigentlichen Problemen:


    Link zur Seite: http://www.fuchsbox.de

    Benötigt werden in erster Linie die notwendigen Selektoren. Die CSS-Anpassung bekomme ich weitestgehend alleine hin.

    1. Selektor Schrift Hauptnavigation, Erste Ebene [http://www.fuchsbox.de]
    2. Selektor Schrift Subnavigation, Zweite Ebene [http://www.fuchsbox.de]
    3. Subnavigation: Transition (Einrücken) entfernen. Es soll einfach nur ein Farbwechsel stattfinden (In der Hoffnung, dass die Schrift dann auch besser lesbar rendert) [http://www.fuchsbox.de]
    4. Artikelauflistung (Homepage und Archive-View , z.B. Technik & Design oder Reviews): Selektor für Überschriften
    5. Artikelauflistung (wie Punkt 4): Bilder sollen einen 1px Rahmen erhalten
    6. Artikelauflistung (wie Punkt 4): Die rechte Spalte mit Datum, Titel und Auszug soll immer bündig mit der Oberkante des Bildes sein. Derzeit flattert es je nach Länge des Auszugs hin und her. Hier wäre ich über das fertige CSS froh.

    Besten Dank euch

    Philip

  • Hallo Philip,

    bis jetzt habe ich nur die Selektoren zu 1, 2 und 5 gefunden. Die anderen scheinen sehr tief vergraben zu sein. Anscheinend bin ich auch eingerostet. :D


    Code
    1. .blog-menu > li > a > span {
    2.   color: red;
    3. }
    4. .blog-menu ul.sub-menu > li > a > span {
    5.   color: blue;
    6. }
    7. .ccfw-blog-image img {
    8.     border: 1px solid red;
    9. }

  • 5. border: 1px solid #000; (alternativ geht auch outline: 1px solid #000;)

    Also:

    .ccfw-blog-image img {

    border: 1px solid #000;

    }


    6. Das löst du mit float, also:


    .content-area .ccfw-blog-loop-item .ccfw-entry-meta {

    float: right;

    margin-left: 20px; /* optional - verhindert, dass es in die Überschrift reinragt */

    }

  • Subnavigation: Transition (Einrücken) entfernen. Es soll einfach nur ein Farbwechsel stattfinden (In der Hoffnung, dass die Schrift dann auch besser lesbar rendert) [

    http://www.fuchsbox.de

    ]


    Für das animierte Einrücken ist die Transition Anweisung in der style.css, Zeile 7355 verantwortlich

    Code
    1. .blog-menu ul a span:before {
    2.   content: '';
    3.   display: inline-flex;
    4.   height: 1px;
    5.   width: 0;
    6.   background: #fff;
    7.   margin-right: 0px;
    8.   opacity: 0.8;
    9.   transition: all 0.2s cubic-bezier(0.3, 0.3, 0.3, 0.7);
    10. }

    Philip, das solltest du wegbekommen, indem du für das span:before die Darstellung einfach auf none setzt.

    Code
    1. .blog-menu ul a span:before {
    2.     display: none;
    3. }