Loading...
 

History: CSS Tricks

Preview of version: 5

(thanks to Marc Laporte for the idea of Federation: colored links for sister wiki links)


-

The idea is we have e.g. lot of sub-sites for tiki.org like themes.tiki.org, dev.tiki.org, doc.tiki.org etc. and when we link to them we want to visually distinguish those links to users so they can easily see which link goes where even before they click and open the links or hover them.
So I () thought instead of introducing new code and preferences for links in Tiki base and parser it could be done easily using just CSS rules by matching only the links with href="http://sub.domain" or href="https://sub.domain".

The CSS code to match such links goes like this:

Copy to clipboard
a[href^="http://sub.domain"], a[href^="https://sub.domain"] { /* your rules here */ }


The code with ^=above says "for each anchor tag a check if the attribute href starts with http://sub.domain or https://sub.domain". So anything starting with that and behind the domain would match...

We could just change colors for the links by giving them main color of the site theme where we link to. E.g. for dev.tiki.org it could be

Copy to clipboard
a[href^="http://dev.tiki"], a[href^="https://dev.tiki"] { color: #c21e3b }


But that would bring issues with readability on some background colors other than white. And doing it with background color instead on the links would make them too different and colorful which maybe would be too much, distracting and disturbing the flow of the text for a reader.
So why not to go a little bit more fancy and play with CSS pseudo-elements like ::before and ::after and create something more subtle but still visually distinguishing such links?

Here is an example (made in CodePen ) of something what we want basically to achieve: Distinguish external links for selected URLs with fancy CSS using pseudo-elements

The code for tiki.org sites as seen live in action on https://doc.tiki.org so far:

Copy to clipboard
/* Link color definitions for "sister" sites */ article a[href^="http://"], article a[href^="https://"], .notxtdec { /*text-decoration: none !important;*/ } article a[href^="http://"]:before, article a[href^="https://"]:before, article a[href^="http://"]:hover:before, article a[href^="https://"]:hover:before, article a.ext:before { color: #fff; display: inline-block; font-size: 75%; border-radius: 50%; height: 1rem; overflow: hidden; padding: .25rem .5rem; margin-right: .25rem; text-indent: -10rem; vertical-align: middle; width: 1rem; } article a[href^="http://"]:hover::before, article a[href^="https://"]:hover::before { width: auto; transition: text-indent .1s; text-indent: 0; padding: .1rem .5rem; height: auto; border-radius: 9rem; } article a[href^="http://branding.tiki"]:before, article a[href^="https://branding.tiki"]:before, article a.branding:before { background-color: #eb0a82; content: "branding:"; } article a[href^="http://tiki.org"]:before, article a[href^="https://tiki.org"]:before, article a[href^="http://tikiwiki.org"]:before, article a[href^="https://tikiwiki.org"]:before, article a[href^="http://info.tiki"]:before, article a[href^="https://info.tiki"]:before, article a.info:before { background-color: #117485; content: "info:"; } /* orange for community ext wiki links */ article a[href^="http://community.tiki"]:before, article a[href^="https://community.tiki"]:before, article a.tw:before { background-color: #ec6223; content: "community:"; } article a[href^="http://dev.tiki"]:before, article a[href^="https://dev.tiki"]:before, article a.dev:before { background-color: #c21e3b; content: "dev:"; } article a[href^="http://profiles.tiki"]:before, article a[href^="https://profiles.tiki"]:before, article a.profiles:before { background-color: #ffc506; content: "profiles:"; } article a[href^="http://suite.tiki"]:before, article a[href^="https://suite.tiki"]:before, article a.suite:before { background-color: #7001a7; content: "suite:"; } article a[href^="http://themes.tiki"]:before, article a[href^="https://themes.tiki"]:before, article a.themes:before { background-color: #8e286a; content: "themes:"; }



History

Advanced
Information Version
Wed 29 of Mar, 2017 22:31 GMT-0000 luciash d' being ?‍♂️ 8
View
Thu 23 of Mar, 2017 14:26 GMT-0000 luciash d' being ?‍♂️ 7
View
Tue 21 of Mar, 2017 10:44 GMT-0000 luciash d' being ?‍♂️ Code Plugin modified by editor. 6
View
Mon 20 of Mar, 2017 12:44 GMT-0000 luciash d' being ?‍♂️ 5
View
Mon 20 of Mar, 2017 12:38 GMT-0000 luciash d' being ?‍♂️ 4
View
Mon 20 of Mar, 2017 12:32 GMT-0000 luciash d' being ?‍♂️ 3
View
Mon 20 of Mar, 2017 12:24 GMT-0000 luciash d' being ?‍♂️ 2
View
Mon 20 of Mar, 2017 12:14 GMT-0000 luciash d' being ?‍♂️ to be continued 1
View

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config