< style.css | Mehrere Fotos >

erste Farbanpassungen

Also: Als erstes ein paar einfache Farbanpassungen. Um Farben zu bestimmen und HEX-Codes für Farben zu erhalten, nutze ich oft folgende Webseite (hier am Beispiel meiner Lieblingsfarbe #060689).

Zuerst erstellte ich (die zuvor erwähnte) user.css-Datei. Da hinein schreibe ich folgende Änderungen:

Die Hintergrundfarbe ändere ich auf ein helles grau (#fcfcfa). Das finde ich für die Augen angenehmer als reines weiss. Dann änderte ich die Textfarbe auf ein sehr dunkles blau (#04045f). Das ergibt einen guten Kontrast. Nachfolhend die entsprechenden Einträge:

body{
    background-color: #fcfafa;
    color:#04045f;
    }

Danach wollte ich die Navigationsleiste in meiner Hauptfarbe (#060689). Dazu "vergewaltigte" ich die Voreinstellung "dunkel". D.h. damit diese Einstellung wirksam ist, muss man danach unter Themes > Konfiguration > Nav-Stil auf dunkel umschalten. In die user.css kam folgender Befehl:

.bg-dark{
    background-color:#060689!important;
     }

Den Blog-Titel in der Navigationsleiste hätte ich gerne fett darstellt. Das ging so:

.navbar-brand {
    font-weight: bold;
    }

Dann sollten die Menütexte in der Navigation beim Überfahren mit der Maus in weiss darstellt werden (ohne Transparenz).

.nav-link:hover {
    color: #fff!important;
    }

Ganz generell machen mich die !important-Aufforderung nicht wirklich glücklich. Eigentlich möchte ich das vermeiden, doch ich wusste mir nicht anders zu helfen. :-|

Demnächst mehr...

Trackbacks

Trackback-URL für diesen Eintrag

Dieser Link ist nicht aktiv. Er enthält die Trackback-URI zu diesem Eintrag. Sie können diese URI benutzen, um Ping- und Trackbacks von Ihrem eigenen Blog zu diesem Eintrag zu schicken. Um den Link zu kopieren, klicken Sie ihn mit der rechten Maustaste an und wählen "Verknüpfung kopieren" im Internet Explorer oder "Linkadresse kopieren" in Mozilla/Firefox.

Keine Trackbacks

Kommentare

Ansicht der Kommentare: Linear | Verschachtelt

Noch keine Kommentare

Kommentar schreiben

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
;-)  ;-|  :-(  :-)  :-D  :grins:  8-)  :-P  :applaus:  :wave: 
:shame:  :sik:  :cry:  :grrr:  :-O  :love:  :heart:  :th_up:  :th_down:  :beer: