Různé kousky CSS: Porovnání verzí
m |
m |
||
| Řádek 18: | Řádek 18: | ||
[[Soubor:External-link-with-text.png]] | [[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]] | ||
Verze z 11. 8. 2016, 19:03
Obsah
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:
