[Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

luciash d' being
Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Bernard Sfez-3
Hi Luci,

This look great to me. :)

Bernard


On 21 Mar 2017, at 12:29 , luciash <[hidden email]> wrote:

Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Bernard Sfez | bsfez.com


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Jean-Marc Libs
In reply to this post by luciash d' being
I love it !

Jyhem

On Tue, Mar 21, 2017 at 11:29 AM, luciash <[hidden email]> wrote:
Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Cloutier, Philippe (RESSOURCE EXTERNE)
In reply to this post by luciash d' being
Hi Luci,
I have no problem with the idea but in case this is not known:
*The POC is buggy when the cursor hovers the disk (the circle "bounces", more or less predictably, in both Firefox and Google Chrome). This does not happen when hovering the text.
*The example on doc.tiki.org does not have this problem, but since the dimension of the form changes, the layout of the page changes when the animation runs, which is distracting. I believe a well-working version of the POC would be best.

Perhaps more difficult, when the cursor moves over such a link, there are animations triggered, whether or not the cursor stops on the link. This is less long in a vertical movement, but can cause a significant animation when moving horizontally. This needs to avoided as much as possible to reduce distraction.

> -----Message d'origine-----
> De : luciash [mailto:[hidden email]]
> Envoyé : 21 mars 2017 06:30
> À : Tiki developers <[hidden email]>
> Objet : [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished
>
> Hi Devs,
>
> Marc Laporte had this idea (aka feature request ;)) for "Federation:
> colored links for sister wiki links" and I have come up with a neat trick to identify and distinguish
> external links using CSS only so it does not need any extra code introduced in Tiki base.
>
> Described here: https://themes.tiki.org/CSS+Tricks
>
> I have also already presented it at the Roundtable Meeting:
> http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-
> 1489674287435/presentation/?t=30m12s
>
> POC here: http://codepen.io/luciash/pen/ZerOBv
>
> Live in action here: https://doc.tiki.org/Troubleshooting
>
> Plan is to enable this on all *.tiki.org sites. Any feedback?
>
> Thanks,
>
> luci
>
>
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most engaging tech sites, Slashdot.org!
> http://sdm.link/slashdot _______________________________________________
> TikiWiki-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

luciash d' being
Hi Chealer,


Dne 21.3.2017 v 17:19 Cloutier, Philippe (RESSOURCE EXTERNE) napsal(a):
> Hi Luci,
> I have no problem with the idea but in case this is not known:
> *The POC is buggy when the cursor hovers the disk (the circle "bounces", more or less predictably, in both Firefox and Google Chrome). This does not happen when hovering the text.

Thanks! I think I fixed it now. Please re-test...

> *The example on doc.tiki.org does not have this problem, but since the dimension of the form changes, the layout of the page changes when the animation runs, which is distracting. I believe a well-working version of the POC would be best.

Yes, I think so too. Gary (chibaguy) also pointed that out...

luci


>
> Perhaps more difficult, when the cursor moves over such a link, there are animations triggered, whether or not the cursor stops on the link. This is less long in a vertical movement, but can cause a significant animation when moving horizontally. This needs to avoided as much as possible to reduce distraction.
>
>> -----Message d'origine-----
>> De : luciash [mailto:[hidden email]]
>> Envoyé : 21 mars 2017 06:30
>> À : Tiki developers <[hidden email]>
>> Objet : [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished
>>
>> Hi Devs,
>>
>> Marc Laporte had this idea (aka feature request ;)) for "Federation:
>> colored links for sister wiki links" and I have come up with a neat trick to identify and distinguish
>> external links using CSS only so it does not need any extra code introduced in Tiki base.
>>
>> Described here: https://themes.tiki.org/CSS+Tricks
>>
>> I have also already presented it at the Roundtable Meeting:
>> http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-
>> 1489674287435/presentation/?t=30m12s
>>
>> POC here: http://codepen.io/luciash/pen/ZerOBv
>>
>> Live in action here: https://doc.tiki.org/Troubleshooting
>>
>> Plan is to enable this on all *.tiki.org sites. Any feedback?
>>
>> Thanks,
>>
>> luci
>>
>>
>> ------------------------------------------------------------------------------
>> Check out the vibrant tech community on one of the world's most engaging tech sites, Slashdot.org!
>> http://sdm.link/slashdot _______________________________________________
>> TikiWiki-devel mailing list
>> [hidden email]
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
> _______________________________________________
> TikiWiki-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


---
Tato zpráva byla zkontrolována na viry programem Avast Antivirus.
https://www.avast.com/antivirus


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Cloutier, Philippe (RESSOURCE EXTERNE)
That fixes completely.
There is some overlap between the link label and the tooltip (a vertical issue). I guess the tooltip should be higher or have a smaller bottom padding.

> -----Message d'origine-----
> De : luciash [mailto:[hidden email]]
> Envoyé : 21 mars 2017 13:06
> À : Tiki developers <[hidden email]>
> Objet : Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished
>
> Hi Chealer,
>
>
> Dne 21.3.2017 v 17:19 Cloutier, Philippe (RESSOURCE EXTERNE) napsal(a):
> > Hi Luci,
> > I have no problem with the idea but in case this is not known:
> > *The POC is buggy when the cursor hovers the disk (the circle "bounces", more or less predictably, in
> both Firefox and Google Chrome). This does not happen when hovering the text.
>
> Thanks! I think I fixed it now. Please re-test...
>
> > *The example on doc.tiki.org does not have this problem, but since the dimension of the form
> changes, the layout of the page changes when the animation runs, which is distracting. I believe a
> well-working version of the POC would be best.
>
> Yes, I think so too. Gary (chibaguy) also pointed that out...
>
> luci
>
>
> >
> > Perhaps more difficult, when the cursor moves over such a link, there are animations triggered,
> whether or not the cursor stops on the link. This is less long in a vertical movement, but can cause a
> significant animation when moving horizontally. This needs to avoided as much as possible to reduce
> distraction.
> >
> >> -----Message d'origine-----
> >> De : luciash [mailto:[hidden email]]
> >> Envoyé : 21 mars 2017 06:30
> >> À : Tiki developers <[hidden email]>
> >> Objet : [Tiki-devel] Neat CSS trick to have links to "sister sites"
> >> distinguished
> >>
> >> Hi Devs,
> >>
> >> Marc Laporte had this idea (aka feature request ;)) for "Federation:
> >> colored links for sister wiki links" and I have come up with a neat
> >> trick to identify and distinguish external links using CSS only so it does not need any extra code
> introduced in Tiki base.
> >>
> >> Described here: https://themes.tiki.org/CSS+Tricks
> >>
> >> I have also already presented it at the Roundtable Meeting:
> >> http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c
> >> 1849af03b7a51638700d979-
> >> 1489674287435/presentation/?t=30m12s
> >>
> >> POC here: http://codepen.io/luciash/pen/ZerOBv
> >>
> >> Live in action here: https://doc.tiki.org/Troubleshooting
> >>
> >> Plan is to enable this on all *.tiki.org sites. Any feedback?
> >>
> >> Thanks,
> >>
> >> luci
> >>
> >>
> >> ---------------------------------------------------------------------
> >> --------- Check out the vibrant tech community on one of the world's
> >> most engaging tech sites, Slashdot.org!
> >> http://sdm.link/slashdot
> >> _______________________________________________
> >> TikiWiki-devel mailing list
> >> [hidden email]
> >> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
> > ----------------------------------------------------------------------
> > -------- Check out the vibrant tech community on one of the world's
> > most engaging tech sites, Slashdot.org! http://sdm.link/slashdot
> > _______________________________________________
> > TikiWiki-devel mailing list
> > [hidden email]
> > https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
> ---
> Tato zpráva byla zkontrolována na viry programem Avast Antivirus.
> https://www.avast.com/antivirus
>
>
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most engaging tech sites, Slashdot.org!
> http://sdm.link/slashdot _______________________________________________
> TikiWiki-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Dr. Sassafras
In reply to this post by Bernard Sfez-3
It's a neat trick, the only concern I have is that using the CSS search (square brackets) is very slow on the side of the browser. Keeping those CSS rules to a minimum will help page rendering time.

Brendan



On Mar 21, 2017, at 8:31 AM, Bernard Sfez <[hidden email]> wrote:

Hi Luci,

This look great to me. :)

Bernard


On 21 Mar 2017, at 12:29 , luciash <[hidden email]> wrote:

Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Bernard Sfez | bsfez.com

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Nagy Géza

will it work on touchscreens?

they dont handle well the difference between hover and click

just tried the doc sample with an ipad, if I touch the circle, it navigates without expanding the circle to see what it is about

maybe the circle should not contain the link, just trigger a popup

cheers,

gezza

Nagy Géza

Ügyvezető/CEO
Oregional Kft./Ltd.
[hidden email]
oregional.hu
2017. 03. 21. 19:40 keltezéssel, Brendan Ferguson írta:
It's a neat trick, the only concern I have is that using the CSS search (square brackets) is very slow on the side of the browser. Keeping those CSS rules to a minimum will help page rendering time.

Brendan



On Mar 21, 2017, at 8:31 AM, Bernard Sfez <[hidden email]> wrote:

Hi Luci,

This look great to me. :)

Bernard


On 21 Mar 2017, at 12:29 , luciash <[hidden email]> wrote:

Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Bernard Sfez | bsfez.com

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


Mentes a vírusoktól. www.avast.com

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

luciash d' being
In reply to this post by Dr. Sassafras

Interesting. Any benchmarks? But interestingly, these dots is the first thing I see when the page is being rendered so might be true...

luci


On 21.3.2017 19:40, Brendan Ferguson wrote:
It's a neat trick, the only concern I have is that using the CSS search (square brackets) is very slow on the side of the browser. Keeping those CSS rules to a minimum will help page rendering time.

Brendan



On Mar 21, 2017, at 8:31 AM, Bernard Sfez <[hidden email]> wrote:

Hi Luci,

This look great to me. :)

Bernard


On 21 Mar 2017, at 12:29 , luciash <[hidden email]> wrote:

Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Bernard Sfez | bsfez.com

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

luciash d' being
In reply to this post by Nagy Géza

Hi Gezza,

that would not be possible with plain CSS. But I thought having just a colored dot is a good enough fallback. It is a visual enhancement/hint anyway. Nothing too important from the accessibility point of view imho.

luci


On 21.3.2017 20:57, Nagy Géza wrote:

will it work on touchscreens?

they dont handle well the difference between hover and click

just tried the doc sample with an ipad, if I touch the circle, it navigates without expanding the circle to see what it is about

maybe the circle should not contain the link, just trigger a popup

cheers,

gezza

Nagy Géza

Ügyvezető/CEO
Oregional Kft./Ltd.
[hidden email]
oregional.hu
2017. 03. 21. 19:40 keltezéssel, Brendan Ferguson írta:
It's a neat trick, the only concern I have is that using the CSS search (square brackets) is very slow on the side of the browser. Keeping those CSS rules to a minimum will help page rendering time.

Brendan



On Mar 21, 2017, at 8:31 AM, Bernard Sfez <[hidden email]> wrote:

Hi Luci,

This look great to me. :)

Bernard


On 21 Mar 2017, at 12:29 , luciash <[hidden email]> wrote:

Hi Devs,

Marc Laporte had this idea (aka feature request ;)) for "Federation:
colored links for sister wiki links" and I have come up with a neat
trick to identify and distinguish external links using CSS only so it
does not need any extra code introduced in Tiki base.

Described here: https://themes.tiki.org/CSS+Tricks

I have also already presented it at the Roundtable Meeting:
http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s

POC here: http://codepen.io/luciash/pen/ZerOBv

Live in action here: https://doc.tiki.org/Troubleshooting

Plan is to enable this on all *.tiki.org sites. Any feedback?

Thanks,

luci


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

Bernard Sfez | bsfez.com

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


Mentes a vírusoktól. www.avast.com


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot


_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [Tiki-devel] Neat CSS trick to have links to "sister sites" distinguished

Gary Cunningham-Lee
In reply to this post by luciash d' being
Hi,

I also think this is quite a neat feature, but was wondering if the idea
could somehow be combined with the existing external link icon, which
conveys the same information ("link is to another domain") but with more
information (the domain is identified).

The current external link icon (fa-external-link) is only an outline so
displaying it in different colors wouldn't have much effect, but we
could switch to fa-external-link-square (which is a solid square
containing a diagonal arrow), and increase its font size to 85% from the
current 70%. This produces an icon the same size as the disc in luci's
demo, but also has the arrow signifying an external link. (Normal
external link icons would continue to use the text color.)

Of course the icon itself can't expand into a label, but maybe could be
the anchor for a tooltip thing like in the Codepen demo.

This approach would build on the current indicator for external links so
would take advantage of people already being familiar with it, and
wouldn't introduce the redundancy of a second external link indicator.

Just an idea.

-- Gary

On 3/21/2017 7:29 PM, luciash wrote:

> Hi Devs,
>
> Marc Laporte had this idea (aka feature request ;)) for "Federation:
> colored links for sister wiki links" and I have come up with a neat
> trick to identify and distinguish external links using CSS only so it
> does not need any extra code introduced in Tiki base.
>
> Described here: https://themes.tiki.org/CSS+Tricks
>
> I have also already presented it at the Roundtable Meeting:
> http://recordings.blindsidenetworks.com/citadelrock/d559965849921585c1849af03b7a51638700d979-1489674287435/presentation/?t=30m12s
>
> POC here: http://codepen.io/luciash/pen/ZerOBv
>
> Live in action here: https://doc.tiki.org/Troubleshooting
>
> Plan is to enable this on all *.tiki.org sites. Any feedback?
>
> Thanks,
>
> luci
>
>
> ------------------------------------------------------------------------------
> Check out the vibrant tech community on one of the world's most
> engaging tech sites, Slashdot.org! http://sdm.link/slashdot
> _______________________________________________
> TikiWiki-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
TikiWiki-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
Loading...