Topic: CSS-classes for different links
kaputtnik Topic Opener |
Posted at: 2014-12-16, 23:05
I am actually interested in some bugs and try to get an overview about the website code. It looks somehow like the work is currently abrupted... Anyway, while looking into it, i found someone was working on different classes for links (i.e. external links) but this work wasn't complete. Those classes are importand to mark i.e. an external link as such by displaying i.e a small icon beside it. I completet the work and added new classes for diferent types of links:
In the end it looks like this (this is only an example to show what is possible): External links have on the right an arrow. This was just in the image-pool, but you could get what you want which is shown for the user link. As said, the colors for the other links has to be discussed If you may find some of them useless, see them as eycandy.... but most of them could be usefull i.e. you could see if there are useless links used (missing article or wrongLink). In this matter: The bold font-weight for all links stood against the normal formatting of bold plain text. Sometimes it is not clear when bold text is used or a bold link is shown. Does anybody have a solution for this? I tested a lot but i found nocthing better as bold Links .... Edited: 2014-12-16, 23:09
Fight simulator for Widelands: |
kaputtnik Topic Opener |
Posted at: 2014-12-16, 23:23
Oh, i forgot: these classes work also in the forum. Fight simulator for Widelands: |
GunChleoc |
Posted at: 2014-12-17, 07:43
You could give links a color. While you're at it, maybe you can find a different color for visited links as well. I like the arrow for external links where it is, but I would put the user icon before the user name. Busy indexing nil values Top Quote |
wl-zocker |
Posted at: 2014-12-17, 15:33
"Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg Top Quote |
kaputtnik Topic Opener |
Posted at: 2014-12-17, 18:52
While for GunChleoc this is ok too, we could make it in this way.
As i wrote, i have tested a lot of colors here. The main problems are:
A color like the website background (sandcolored?) seems to be good, but then it looks a bit screeching too. I will provide a screenshot with different colors. But its easy to make tests for your own: In case you are using Firefox, just rightclick on a link and choose ' investigate element' (don't know if this the correct translation for "Element untersuchen" ) In the opend window you see at the right between the culry braces the color for the "a" tag. Click on the circle in the color row will popoup a nice colorchooser. The changes are only effective to the current Page you are looking at. Test your color preferably with a wikipage which contain a TOC. "My" Sandcolor has this value: rgba(254, 236, 174, 0.79) With bold text it looks not nice, so turn of the bold font-weight.
Is yellow screeming? On some pages the color Red is used. On my display it looks very strange and isn't good readable. Yes i know, red isn't equal to red
Imagine you edited a wikipage with lots of links. With your suggestion you have to go over all the links to find the wrong one. If they are shown in a different color, you will see exatly which link is wrong. I think this is enough as hint. But a link-tooltip wich shows the sort of link would be nice: "Missing Page", "Wrong link" and so on.
I think the color of visited links should be nearly the same as normal links, but e.g. a bit darker. So they differs from normal links but it is optical clear that you allways clicked on it (darker = optical not so importand). In General: The correct function of "visited links" depends on the browser user settings. So it is maybe not available to all users.
Yes, the height... i am not satisfied with my suggestion too. I will try e.g. the atlanteans shield, but maybe we omit this complete. Aren't there emblems for each tribe? Somewhere sometime i found it, but i did not found it again An idea is, to let the user choose which icon (form a preselected list) is used for his Userlink... I will make a few other screenshots... Edited: 2014-12-17, 19:00
Fight simulator for Widelands: |
wl-zocker |
Posted at: 2014-12-17, 21:25
I did not think of the links in the "Latest Posts" section. That wooden background makes it really hard to find a suitable color.
I think that color is hard to distinguish from the white text on a dark background.
That is really easy. I played around a bit and found that finding a good color is not as easy as I thought. What about blue: rgba(80, 125, 255, 1) for links, rgba(80, 125, 255, 0.75) for visited links. For wrong links, I tried red: #F32E2E. I noticed that green is bad because the headlines are already green.
I did not think so far :). Whatever we do: When someone clicks on a link to a missing page, he should be able to create that page. When I click on a link without a wikipage, I get to the main page, which is confusing when I want to create a new article. Hence my idea to prevent the existence of such links at all.
For the Atlanteans, there is the shield (or whatever). The Barbarians have two axes with a skull. The Empire does not seem to have an icon. I think they used to have a helmet, but that was considered stupid (why should you put the picture of a helmet on your helmet to symbolize where you come from?), so it was removed (IIRC). "Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg Top Quote |
kaputtnik Topic Opener |
Posted at: 2014-12-19, 01:56
We have a different views about that. Your view is, that this link will animate users to create an article. My view is to give the article Authors a tool that makes writing (and proofreading) easier. I promised you a new screenshot, here it is: Normal links are shown NOT bold but with color: rgba(254, 234, 168, 0.79). I think it looks good, not screeming, not so far away from the white text color, but different. How this color looks against the wooden background on the right side, scroll further. When hovering the behavior is like now (colorswitch to some green). The screenshot shows hovering against the external link. Tooltips are: The "special Page" link is just for showing that a match against static or generated sites could be colored or icon'd too. But i think its not nessesary. Tooltip: The Userlink is displayed with the atlantean shield on the left. More on that issue at the bottom. If a header is a link, it looks like the "Header as link" header in the screenshot. Its the same color as for links. No tooltip (like normal links) Wrong linksThe Coloring for wrong links do not have a hovereffect (it feels like they aren't clickable). The yellow links have Tooltip: So the tooltip says whats wrong. The yellow links "could" be left in an article to show that there is an article missing, but a red link should never be seen. Both colors says, that there is something wrong and will help an author to examine his work. I hope that this will clarify my view of it. reminder I have to test this wrong links with redirects How it looks like on the right side? This screenshot shows, among linkcoloring, my idea of userdefined usericons. The links are bold and have the same color as in the previous screenshot for normal links is shown. Every user has his own icon. The usericons in this screenshot are just copy and paste images. Implementing such a feature (a user could choose his personal icon) in the code isn't quite easy for me.... but if you like it,i will try to do so. If every user do have the same icon, it looks boring. So i think we should omit userdefined icons for now and leave user links as normal links (no icon beside) Fit these colors? "Visited Links": Because of privacy reasons see history stealing this feature is partialy not provided by browsers anymore. And i couldn't get this to work on my machine Fight simulator for Widelands: |
GunChleoc |
Posted at: 2014-12-19, 08:43
The description says that color definitions are usually still allowed for visited links. Maybe you could install a second browser for testing. I think the user link color you have in your last screenshot would fit for all links except for special links, where we will want something different - maybe something with underlining rather than a different color might do the trick to mark missing wiki pages? I would also not give the special pages a different color - the user doesn't care how a page was generated. You could play with that and your new misspelled link/missing article color to see if that will work for normal/visited links. I think it might confuse visitors if links are sometimes yellow and sometimes green. Keep green as the hover color Busy indexing nil values Top Quote |
wl-zocker |
Posted at: 2014-12-19, 16:51
I think when you have a Wiki text, with a link in it, the user will not notice that it is a link because the colors are not different enough. I hardly noticed a difference in your example screenshot.
They work fine for me on Wikipedia with Firefox 34.0.
I am not sure if users will understand that. Underlining links (also existing ones) is very common.
I agree. That would be unnecessary.
Sounds good. "Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg Top Quote |
kaputtnik Topic Opener |
Posted at: 2014-12-19, 21:39
At home i do have two monitors, and every do show colors different. So maybe on some monitors its really hard to distinguisch. Lets take
Nothing against your suggestion of some kind of blue... There are allmost so many colors on this website... putting in a new color will make it look some kind of advertising. My opinion
We should not forget: The Wrong links section in the secreenshot shows links, which should be usually not displayed. The only exception are maybe(!) the yellow ones, but those links would be very rare. Fight simulator for Widelands: |