Jak upravit výběr textu


Jsem jeden z těch lidí, co mají rádi své blogy do maxima vyšperkované a přispůsobené. A jedním z mnoha kroků, jak toho dosáhnout, je upravit, jak to vypadá, když čtenář označí nějakou část textu.

Schválně si zkuste označit třeba tento odstavec. Místo výchozího bílého textu na modrém pozadí, který by rušil dojem z celého blogu a který vidíte na téměř každé jiné stránce, vidíte černý text na elegantním šedivém pozadí, který označený text jemně odliší od ostatního textu, ale zároveň nijak neruší.

(Pozn. Rozšířila jsem návod i o kód pro Mozillu. Třeba mě tohle naučí používat prefixy.)

Budete poslušní čtenáři a vyplníte dotazník?

Ale ještě než vám prozradím, jak na to, chtěla bych vás o něco poprosit... Chystám sérii článků, kde budu porovnávat různé blogovací platformy a chci do nich kromě svých názorů (a mnohého dalšího), zapracovat i názory ostatních blogerů (ale i neblogerů).

A kde je přehledněji a jednodušeji získat než prostřednictvím starého, dobrého dotazníku! Za jeho vyplnění vám budu moc vděčná...

(Pokud se vám z nějakého důvodu dotazník nezobrazuje tady na blogu nebo s tím máte nějaké problémy, můžete jej také vyplnit tady.)



Pokud jste právě odeslali vyplněný dotazník, tak vám z celého srdce děkuji, a pokud ne, tak...

Styďte se a běžte to honem napravit... Ale teď zpátky k návodu!

Jak upravit výběr textu

V administraci svého blogu a na kartě "Šablona" klikněte na tlačítko "Personalisovat". Najděte textové pole, kam můžete přidávat vlastní CSS a zkopírujte do něj tento kód.

*::selection {
    background: (barva pozadí);
    color: (barva textu);
}

*::-moz-selection {
    background: (barva pozadí);
    color: (barva textu);
}
Teď už jenom na místo závorek doplňte vlastní barvy. (A prosím, dejte si pozor, ať je mezi barvou textu a barvou pozadí dobrý kontrast. Většina lidí označuje text proto, aby jej buďto mohli zkopírovat a nebo aby si nějakou důležitou část odlišili od zbytku textu - a nikdy nedělá dobrotu, když zvýrazněný text potom nepřečtou. Více o barvách v samostatném článku.)

Předtím

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate

Potom

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate.

(Označte ukázkový text pro názorný příklad.) Hned to vypadá o něco originálněji, že?

(Pozn. Pokud používáte Mozillu, nejspíš neuvidíte žádný rozdíl mezi oběma odstavci, ale věřte mi, že ten vlevo vypadá po označení jako kterýkoliv jiný text, zatímco ten v pravo je se svým černým pozadím mnohem originálnější.)

A to bude pro dnešní návod vše. Jako vždycky doufám, že se vám líbil (že jste vyplnili dotazník) a že mi dáte v komentářích vědět, když to vyzkoušíte na svém blogu (ať se mohu přijít podívat).

6 komentářů:

  1. Mě to bohužel u tebe nefunguje, zobrazuje mi to text normálně s modrým pozadím a bílím textem.

    OdpovědětVymazat
    Odpovědi
    1. Jestli používáš Mozillu, tak už jsem to upravila a měla bys vidět černý text na šedivém pozadí. :)

      Vymazat
  2. Odpovědi
    1. Obávám se, že mi nic nepřišlo. Jsi si jistá, že jsi jej odeslala? :)

      Vymazat
  3. Jste prostě skvělá! Jsou to drobnosti, ale právě takové drobné detaily dokážou udělat hodně! Dík

    OdpovědětVymazat