Různé kousky CSS

Stylování <abbr>

• The abbr element
• S tím souvisí článek Abbreviations, Definitions & Citations Revisited
• Jiný nateriál: 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:

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:

"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 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:

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 Stack Exchange.

Použitá ikona

Ikonu externího odkazu jsem stáhl z 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 jsem 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:

<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>