Overleg MediaWiki:Common.css

Hoveren

Ik heb in mijn eigen stylesheet eens lopen rommelen met tooltips. Daarbij heb ik twee codes getest, eentje van Taka gekopieerd en eentje van het net geplukt.

Beide methodes werken nu. Methode van Taka werkt wel, maar de uitleg gaat boven het woord staan, wat erg lastig is, omdat je dan het woord zelf niet meer kan lezen en omdat je, als het een link is, niet meer de pagina waarnaar gelinkt wordt in een nieuw tabblad kan openen. Ook blijft de tekst die onder de tooltip moet staan, ook als gewone tekst zichtbaar. Daarnaast moet het hele blok tekst tussen div'jes gezet worden, wat ook weer rommelig is. Niet echt gewenst lijkt mij.

De tweede methode lukte eerst niet, omdat ik een verkeerde class had gedefineerd. Nu werkt het wel. Als je boven het woord gaat staan, verschijnt er een vraagtekentje naast de muiscursor en daarna verschijnt de uitleg. Deze verdwijnt echter na enkele seconden, eigenlijk precies zoals wanneer je je muis boven een link houdt, alleen verschijnt er dus ook een vraagteken naast de muiscursor.

Het woord waarbij een tooltip moet verschijnen heeft nog geen aparte kleur, onderstreping of achtergrond, maar dat kan gemakkelijk toegevoegd worden met css. Lijkt me opzich een mooie methode om te gebruiken.

Zal deze code vooralsnog kaal in de Common.css zetten, met een voorbeeld hier, zodat het hier ook gezien kan worden. Daarna kunnen we kijken hoe we willen dat een woord waarbij een tooltip moet opduiken bij het hoveren eruit moet zien. Koos Overleg 9 feb 2006 22:44 (UTC)

Ga hier met de muis boven staan voor een voorbeeld van de tooltipcode

Mediumvioletred, niet echt een mooie kleur lijkt mij, maar eerst maar eens even testen hoe de kale code werkt. Koos Overleg 9 feb 2006 22:50 (UTC)

Getest

Firefox

• 1.0.7 - Tooltipcode verschijnt, css-opmaak niet.
• 1.5.0.1 - idem

Internet Explorer

• 6.0.2 - Tooltipcode verschijnt, css-opmaak niet.

Opmaak

De css-opmaak werkt blijkbaar niet in Internet Explorer, dus hoe gaan we dat oplossen?

Hoe moet het woord dat gehoverd wordt getoond worden?

We kunnen het betreffende woord op llende wijzen onderscheiden van de rest van de tekst: kleur/font/onderstreping/cursief/gekleurde achtergrond enz. Koos Overleg 9 feb 2006 23:06 (UTC)

Hm, de css-opmaak is nu ook in FF niet zichtbaar, maar daarnet wel. Vreemd geval. Even kijken hoe dit uitpakt. Koos Overleg 9 feb 2006 23:08 (UTC)

Ligt waarschijnlijk aan het volgende: text-decoration: none Koos Overleg 9 feb 2006 23:11 (UTC)

Het is toch wel de bedoeling de tekst waarover gehoverd kan worden, met aparte kleur of opmaak te laten zijn, neem ik aan? Londenp 10 feb 2006 08:17 (UTC)

Jazeker. Nu blijkt echter dat de css opmaakcode niet wordt overgenomen. Voor de tooltipcode zelf is overigens helemaal geen wijziging nodig in de Monobook.css, kijk maar naar het volgende voorbeeld, zonder de class tooltip gedefinieerd.

Ga hier met de muis boven staan voor een voorbeeld van de tooltipcode

Dus in principe kan de opmaakcode voor de tooltip uit de Common.css, zodat we daar alleen het pijltje in hebben staan (werkt hier trouwens ook niet meer, maar heeft er misschien mee te maken dat ik hier portable Firefox gebruik). De opmaak van de tekst waarover gehoverd kan worden kan gewoon geregeld worden met css in een gewone bewerkingspagina. Lijkt me het beste om hiervoor een sjabloon te maken, maar ik ga nu weer verder met mijn studie, om te zorgen dat ik vanavond nog een beetje op tijd thuis ben. Kijk er na het avondeten nog even naar. (en ik eet laat 's avonds ;-)) Koos Overleg 10 feb 2006 14:38 (UTC)

Ah is inderdaad wel makkelijk, ik heb nu de tekstkleur rood gemaakt met een font als voorbeeld. Dit is goed in een sjabloon te stoppen, lijkt me, hoeven we inderdaad geen common.css aan te passen.

Ga hier met de muis boven staan voor een voorbeeld van de tooltipcode Londenp 10 feb 2006 15:16 (UTC)

Nu nog een ideetje hoe we dat hooveren duidelijk maken aan de lezer Londenp 10 feb 2006 15:16 (UTC)

Ga hier met de muis boven staan voor een voorbeeld van de tooltipcode of

Ga hier met de muis boven staan voor een voorbeeld van de tooltipcode

Of iets anders, het liefst zie ik een spreekwolkje als icoon, maar dat heb ik nog niet gevonden Londenp 10 feb 2006 15:53 (UTC)

Ga hier met de muis boven staan voor een voorbeeld van de tooltipcode Dit bijvoorbeeld Londenp 10 feb 2006 16:07 (UTC)

Ook in Firefox werkt nu de weergave van de pijl niet meer, dus de code in Common.css is totaal overbodig. Wat betreft opmaak om een lezer erop te attenderen dat een woord een uitleg heeft, als het gehoverd wordt:

De hierboven gebruikte blauwe kleur van de tekst spreekt me wel aan. In eerste instantie zal een lezer denken dat het een link betreft en als hij er dan boven staat ziet hij vanzelf de tooltip verschijnen. Als hij een en een bij elkaar kan optellen, dan zal hij snel genoeg doorhebben dat de stukken donkerblauwe tekst geen links, maar woorden met verklaring zijn. (het kleurverschil is duidelijk genoeg denk ik).

Wat betreft een icoontje, ik zie het nut daarvan niet echt zitten. Als de hoverbare tekst een andere kleur heeft, is het al opvallend genoeg. Als er een icoontje staat zal de lezer zich eerst afvragen wat het icoontje betekend. Nadat hij dat doorheeft, zou hij ook gewoon overweg kunnen met tekst met een andere opmaak. Ook lijkt het me vrij storend als een tekst straks vol staat met icoontjes. Koos Overleg 10 feb 2006 20:58 (UTC)

OK, je hebt gelijk. Wat ik me nog afvraag: is het beter een sjabloon hiervoor te ontwerpen of kunnen en een hoover button maken boven in de bewerkingsbalk (de Chinese wikipedia heeft bijvoorbeeld veel meer icoontjes boven het bewerkingsscherm), zodat je een woord markeert en de benodige code voor en na het woord zet en dan alleen nog de verklarende tekst erbij moet typen (zoals een interne link), dat zou helemaal mooi zijn, ik zou echter in de code moeten duiken omdat voor elkaar te krijgen. Ik kan nog wel eens de chinese css nakijken Londenp 11 feb 2006 07:59 (UTC)

zie bijvoorbeeld hier: http://zh.wikipedia.org/w/index.php?title=%E5%A6%AE%E5%A8%9C%C2%B7%E8%A5%BF%E8%92%99&action=edit, een heleboel extra icoontjes met functie: maar hier vind ik het niet: http://zh.wikipedia.org/wiki/MediaWiki:Common.css en hier ook niet: http://zh.wikipedia.org/wiki/MediaWiki:Monobook.css, maar hier wel http://zh.wikipedia.org/wiki/MediaWiki:Monobook.js

Koos, het hoveren heeft een nadeel, de tekst die in de hover-pup-up komt is slechts beperkt. Een langere tekst wordt gewoon niet weergegeven. Heb jij daar nog een truc voor, zodat ook wat meer tekst in zo'n hover-pup-up kan worden zichtbaar gemaakt? Londenp 22 feb 2006 11:38 (UTC)

Ja, ik zie het. Erg irritant. Ik zie hiervoor zo gauw geen oplossing. Maar ik weet er ook niet echt super veel vanaf. De oplossing van Taka voorziet wel in langere tekst, maar de popup komt daar voor het gehoverde woord te staan, wat erg lastig werkt. 'k Zal even rondsurfen op het net of ik nog iets tegenkom. Niet nu overigens. Zou eigenlijk moeten leren in plaats van hier te regeren op een website waar ze leermateriaal plaatsen ;-) Koos Overleg 22 feb 2006 22:53 (UTC)

Grappig dat die uitbreiding van beeldschermicoontjes nu ook op wikipedia wordt bediscussieerd, als ze het daar doen, kunnen we het daar afkijken en hier ook doorvoeren ;-) Londenp 9 mrt 2006 19:31 (UTC)

Bekijk ook deze hier: Monobook.js Franse wikipedia. Die lossen het zonder icoontjes op, ook een interessante oplossing Londenp 9 mrt 2006 19:37 (UTC)

Javascript

Met zoiets omgeschreven zou het moeten werken:

function InsertButtonsToToolBar()
{ xxxx

---

HooverTextButton = "<a href=\"javascript:insertTags('<<span style="color: darkblue;"><span title="hoovertekst">','</span></span>','Tekst na de > invoegen');\"><img src=\"http://upload.wikimedia.org/wikipedia/he/5/58/Button_small.png\" alt=\"缩小\"></a>"; 

einde procedure
}

Ik ga er verder mee experimenteren in mijn monobook.js (later) Londenp 11 feb 2006 10:31 (UTC)

Dat zou gaaf zijn. Een extra button bovenaan. Jammer dat alle MediaWiki:<skin>.js apart aangepast zouden moeten worden. Misschien even stemmen op bug 4178, een MediaWiki:Common.js. Koos Overleg 11 feb 2006 15:11 (UTC)

Ik heb voor gestemd, maar begrijpen doe ik het niet, want we hebben al: MediaWiki:Monobook.js, wat is het verschil tussen commons en monobook, dat zie ik nog niet helemaal (of is het zo dat commons.js voor alle skins zou gelden?) Londenp 11 feb 2006 15:56 (UTC)

Common wordt inderdaad toegepast op alle skins. Daarom staat de code voor wikitable en de code om redirects in Special:Allpages cursief en groen te maken in de Common.css. Een Common.js is er echter nog niet. Koos Overleg 11 feb 2006 16:02 (UTC)

Test

onzin

Mijn stylesheet is eindelijk gepurged (na 2.5 dagen en na tweemaal een handmatige purge te hebben uitgevoerd). Het langer maken van de balk waarin de tekst verschijnt werkt echter nog niet. Ik zal nog kijken of er andere dingen mogelijk zijn, maar veel hoop heb ik er niet op, toch een beperking van de software. Koos Overleg 25 feb 2006 15:18 (UTC)

Verzoek betr. .vatop en .infobox

De class vatop zou class infobox moeten overrulen vwb. .infobox th en .infobox tr. Op dit moment is dat andersom. - Erik Baas (overleg) 7 feb 2022 17:57 (CET)