Latest Posts

Topic: CSS-classes for different links

fuchur

Joined: 2009-10-07, 14:01
Posts: 186
Ranking
Widelands-Forum-Junkie
Location: Germany
Posted at: 2014-12-19, 23:40

Just let me add my 2 cents...

When I looked at the screenshot with the link examples it wasn't clear to me at first glance what was the link and what is just text. Maybe that's just due to my monitor (including settings of color, brightness and contrast). Or because the screenshot contains a lot of different information in a comparatively small area. So I'd prefer links a little bit more "screeching". Maybe more like the yellow ones of the wrong links section.

In the other screenshot of the latest posts list the links are easier to recognise. I guess that's due to the different background and of course the bold font.

I played a little bit with kaputtnik's color suggestion. My suggestion would be rgba(254, 234, 138, 1) for normal links.

Concerning the heading links I just want to remark that it maybe doesn't look good if you have several sections with headings, some of them are links and some not. At least if heading links are of different color than normal headings. But I understand that links need to be identifiable.

Anyway, thanks for your effort to improve the website. face-smile.png


Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-20, 12:49

fuchur wrote: In the other screenshot of the latest posts list the links are easier to recognise. I guess that's due to the different background and of course the bold font.

Yes, with bold emphasis the color is more present and therefor it looks different.

I played a little bit with kaputtnik's color suggestion. My suggestion would be rgba(254, 234, 138, 1) for normal links.

This looks good to me too face-smile.png

Concerning the heading links I just want to remark that it maybe doesn't look good if you have several sections with headings, some of them are links and some not.

The situation where headers are links, is also very rar. While go over the wikiarticles, i found only a few such headers and if, they are at the end of an article. I put also such headers to an article to link to an article related Discussion. This has the advantage, that this header appears in the TOC and clicking on this link in the TOC will just open the article discussion (instead of scrolling down to the header in the article). See https://wl.widelands.org/wiki/GameHelpbasicInterface/ for an example.


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-23, 13:22

Now i got the visited links function got to work on my machine (it was just a to restricted browser setting).

Do you want the visited function working also for the "Latest Posts"-section on the right? If so, it is hard to find a color that contrasts against normal link colors and the wooden background.

Showing more screenshots in this thread isn't usefull, because the colors aren't displayed correct in jpg-format (which is acceptable in file size). I've tried to use some other formats, but the filesize increases from 43kb (jpg) to more than 100kb (png). So while my server has limits of free traffic, i provide the secreenshots only as links. You could open them in a new tab by clicking on it with the middle mouse button.

The colors i choosed are:

  • Normal links: #FEEA8A (its nearly the one which fuchur suggested)
  • Visited links: #C8BE93 (somewhat darker, turning into gray with a touch of green face-grin.png )

The hover behavior is like today: turning the color to green.

One word about the icon of the external links. I found just an image in the imagepool that was designated for those links named external_link.gif and is this one: external my suggestion (external) is a little bit taller, but do not disturb the line height. My suggestion fits better in color imho. But if you prefer the external_link.gif we could colorize it as well (maybe give him the same color as for links).


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-23, 18:30

I created a branch and made a merge-request on launchpad to this issue.


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
DragonAtma
Avatar
Joined: 2014-09-14, 01:54
Posts: 351
Ranking
Tribe Member
Posted at: 2014-12-28, 08:29

Unfortunately, the link color looks somewhat similar to the text color. My suggestion? Darken the wood background! Then, we can use darker links. Making the links less grayish would also help.

Another thing to consider is swapping the color of the text and unvisited links.


Top Quote
wl-zocker

Joined: 2011-12-30, 17:37
Posts: 495
Ranking
Tribe Member
Location: Germany
Posted at: 2014-12-28, 19:47

On my screen, it turns out great. I can easily see what are links and which links I have already visited.

But what are the yellow links for? (see e.g. here)


"Only few people know how much one has to know in order to know how little one knows." - Werner Heisenberg

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-29, 11:01

DragonAtma wrote:

Unfortunately, the link color looks somewhat similar to the text color.

Wich browser? Could you please provide a screenshot?

wl-zocker wrote:

But what are the yellow links for? (see e.g. here)

These links are mispelled or, in some cases, are redirects, which maybe aren't catched. I tested these redirects on my local copy, where it works fine. But i do not have the same number of wikiarticles and redirects, so some of them will do not work here face-sad.png

I go over all articles and correct them.

Edited: 2014-12-29, 11:03

Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote
DragonAtma
Avatar
Joined: 2014-09-14, 01:54
Posts: 351
Ranking
Tribe Member
Posted at: 2014-12-29, 16:30

Hmm... I've gotten used to the link color mostly, although visited links still blend in with the wooden background somewhat. Visited links seem to resemble the text color a bit as well.

That said, I'm used to having more contrast between the link colors and the text (and background!). I use Firefox 34.0.5 and here's a screenshot:
http://www.mediafire.com/view/p1przfklmb6spy6/browser+screenshot%282%29.png#

Also, keep in mind that I was tired of the "oh, all video games should be very dark!" path many major developers use, so my screen is lighter than most (which can probably simulated by copying the screenshot to Gimp and raising the brightness by 10 or 20). Speaking of which, thank you for NOT making Widelands absurdly dark! I wish more developers would do the same.

Edited: 2014-12-29, 16:30

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2433
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-12-29, 17:22

DragonAtma wrote:

Also, keep in mind that I was tired of the "oh, all video games should be very dark!" path many major developers use, so my screen is lighter than most (which can probably simulated by copying the screenshot to Gimp and raising the brightness by 10 or 20).

Its nearly impossible to choose colors that fits well in all user defined environments.

As you wrote above, we could adjust some of the backgrounds. But this will result in a complete redesign of the webpage in the end.... I agree, the actual design is somehow broken, because there are so many colors and dark/bright sections and all circumstances together makes it hard to find new colors that fits overall.

If you have some suggestions about other colors, feel free to provide a screenshot. face-smile.png


Fight simulator for Widelands:
https://wide-fighter.netlify.app/

Top Quote