Tmavá verze webu a CSS

Zachvátila mě drobná webařská tvořivost, které se teď věnuji spíše okrajově a všechno mi strašně trvá, než si to vygooglím. I zapnula jsem si svou blogovou administraci a Developer Tools ve Firefoxu, abych si našla blok stylů, který budu chtít poupravit do nové podoby. Tentokrát šlo hlavně o footer, patičku webu.

Zároveň jsem zase po dlouhé době zjistila (dobré ráno), že tato grafická šablona pro WordPress (Twenty Seventeen) umožňuje přepínat barevné schéma ze světlého na tmavé aniž by člověk kompletně přepisoval stylopis (CSS). Což je super bonus u vzhledu, který je zdarma a stále aktualizován.

Na jedné z verzí mého starého webu byl hlavním tématem můj bachratý netopýří maskot. Vloni mi smečka 200 netopýrů, žijících na jedné nejmenované půdě, připomněla, jaká to jsou rozkošná zvířátka (a také chráněná, nezadělávejte jim domečky a kontaktujte příslušné odborníky), a že bych si ráda do patičky vrátila svou bat cave, kterou jsem kreslila před lety. Tu myšlenku jsem zase nechala klasicky uležet, ona se vždycky najde příhodná doba, kdy se tomu začnu věnovat a ono to jde.

Původní kresba vznikla ve Photoshopu, v nějaké pravěké verzi. Naštěstí existuje Gimp, i ten je neustále vyvíjen a vylepšován a o 10 let později se mi v něm podařilo otevřít PSD soubor, aniž bych ztratila vrstvy, skupiny nebo režimy překrytí vrstev. Samo, že se najde pár chybek, ale většina věcí funguje i dnes (2019), což mě potěšilo. Zalaborovala jsem si tedy v Gimpu, i zde v CSS okýnku a přidala jsem si svou starou malůvku do patičky. Vzhled jsem tedy nastavila tmavý, ani tentokrát se nebojte vlka nic. Čas od času se v tom hrabu. Možná to nebude všude fungovat, tak jak má, ale co už.

CSS úpravy


ul {
list-style-position: inside;
}

/* adsense */

mark, ins {
background: none;
padding: 0px !important;
}

ins {
background: none;
}

/* header img in posts */

.site-branding {
  display: none;
}

.home .site-branding {
  display: inherit;
}

/* footer img */

.site-footer {
background-color: #000000;

background-image: url("cesta-k-obrazku.jpg");

background-repeat: no-repeat;

background-position-x: center;

background-position-y: bottom;

min-height: 500px;
 }
 
.site-footer .widget ul li {
border: 0px none;
 }

Galerie