View source for Různé kousky CSS

[[Kategorie:CSS]]
== Stylování <nowiki><abbr></nowiki> ==
* [http://html5doctor.com/the-abbr-element/ The abbr element]
* S tím souvisí článek [http://camendesign.com/abbr_redux Abbreviations, Definitions & Citations Revisited]
* Jiný nateriál: [http://maxdesign.com.au/news/abbreviations/ Styling abbreviations and acronyms] - popisuje typy zkratek, jak je používat a stylovat.
== Stylování externích odkazů ve WP ==
Podobně jako ve wikipedii - k externímu odkazu se přidá nějaká vizuální indikace:

[https://premium.wpmudev.org/blog/style-external-links-wordpress-like-wikipedia How to Style External Links in WordPress Like Wikipedia]
==== Externí odkazy s textem ====
Do stylovacího souboru v odvozené šabloně (child theme) přidáme kód:
 a[href^="http://"]:not([href*="wpmu.dev"]):after,
 a[href^="https://"]:not([href*="wpmu.dev"]):after {
 content: "(EXTERNAL LINK)";
 padding-left:5px;
 }
Externí a interní odkazy pak budou vypadat takto:

[[Soubor:External-link-with-text.png]]

"wpmu.dev" musíme nahradit svou doménou.

Tento kód prochází všechny odkazy na webové stránce a porovnává je s naší doménou. V případě, že odkaz je jinam než na naši doménu, přidá na konec odkazu text ''(EXTERNAL LINK)''.

==== Externí odkazy s ikonou ====
Opatříme si vhodnou ikonu. Mnoho ikon je na webu [http://www.flaticon.com/ Flat Icon]. Zvolenou ikonu umístíme do složky "images" v naší šabloně.

Do stylovacího souboru v odvozené šabloně (child theme) přidáme kód:
 a[href^="http://"]:not([href*="wpmu.dev"]):after,
 a[href^="https://"]:not([href*="wpmu.dev"]):after {
 content: "" url('/wp-content/themes/twentyfourteen/images/external-icon.png');
 padding-left:5px;
 }
"wpmu.dev" musíme nahradit svou doménou, a upravíme URL odkazující na ikonu.
Odkazy na nšem webu pak budou vypadat podobně jako:

[[soubor:External-link-with-icon.png]]

V přidaném kódu je u ikony přidán ''padding'', aby nebyla přilepená k odkazu.

Stylování externího odkazu je popsáno také na [http://stackoverflow.com/questions/5379752/css-style-external-links Stack Exchange].
==== Použitá ikona ====
Ikonu externího odkazu jsem stáhl z [http://www.flaticon.com/free-icon/external-link-symbol_25284 Flat Icon].

Stáhl jsem:
* [[Media:External-link-symbol-black.svg]] - ve formátu .svg
* [[Media:External-link-symbol-green.png]] - ve formátu .png, barva zelená. V Gimpu upravil velikost na 10x10px a zelenou upravil na odstín pro použití v csga.cz.

Autor vyžaduje k použití ikony '''zveřejnění kreditu''':

<code><nowiki>
<div>Icons made by <a href="http://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</nowiki></code>