User:Jd/Proposal/LangCSS: Difference between revisions
Content deleted Content added
mNo edit summary |
|||
(11 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<div style="border: 1px solid #49a72d; background: #d0f5c5; margin: 0 0 2em 0; padding: 1em; text-align: center;"> |
|||
'''DONE''' |
|||
</div> |
|||
== Idea == |
== Idea == |
||
Enhance accessibility by using a semantic list (& |
'''Enhance accessibility by using a semantic list''' (<ul>). With some css magic we can '''keep the look 'n feel''' of the current lang templates :)<br /> |
||
It only requires to add some CSS to [[MediaWiki:monobook.css]] and people to use <code><div class="divlang">...</div></code> and a <code>ul</code> list in the lang templates (see example below). Since those templates are not frequently edited, it would not be hard to maintain (I can check). |
|||
== Result == |
== Result == |
||
Line 13: | Line 17: | ||
</div> |
</div> |
||
To |
== To be added to MediaWiki:monobook.css == |
||
<s>To actually see the result, you need to add the following lines in your [[User:YOU/monobook.css]] (then, update it and refresh this page):</s><br /> |
|||
It's alive in [[MediaWiki:monobook.css]] :) |
|||
<pre> |
<pre> |
||
.divlang { |
.divlang { |
||
background: #F9F9F9; |
background: #F9F9F9; |
||
border: 1px solid #E9E9E9; |
border: 1px solid #E9E9E9; |
||
font-size: smaller; |
|||
margin: 0 0 1em 0; |
|||
padding: 0.5em 1em; |
|||
text-align: left; |
|||
} |
|||
// ... blabla ... // |
|||
.divlang ul { |
|||
display: inline; |
|||
margin-left: 0; |
margin-left: 0; |
||
padding-left: 0; |
padding-left: 0; |
||
} |
} |
||
</pre> |
|||
== Source code of the example == |
|||
.divlang ul li { |
|||
border-left: 1px solid #E4E4E4; |
|||
display: inline; |
|||
list-style: none; |
|||
margin-left: 0; |
|||
padding: 0 0.5em; |
|||
} |
|||
<pre> |
|||
.divlang ul li.firstlang { |
|||
<div class="divlang"> |
|||
border-left: none; |
|||
<ul> |
|||
display: inline; |
|||
<li class="firstlang">[[Current events|English]]</li> |
|||
list-style: none; |
|||
<li>[[Actualités|Français]]</li> |
|||
margin-left: 0; |
|||
<li>[[Actualiteiten|Nederlands]]</li> |
|||
padding-left: 0; |
|||
<li>[[新闻动态|中文]]</li> |
|||
} |
|||
</ul> |
|||
</div> |
|||
</pre> |
</pre> |
||
__NOTOC__ |
Latest revision as of 23:46, 6 August 2006
DONE
Idea
Enhance accessibility by using a semantic list (<ul>). With some css magic we can keep the look 'n feel of the current lang templates :)
It only requires to add some CSS to MediaWiki:monobook.css and people to use <div class="divlang">...</div>
and a ul
list in the lang templates (see example below). Since those templates are not frequently edited, it would not be hard to maintain (I can check).
Result
To be added to MediaWiki:monobook.css
To actually see the result, you need to add the following lines in your User:YOU/monobook.css (then, update it and refresh this page):
It's alive in MediaWiki:monobook.css :)
.divlang { background: #F9F9F9; border: 1px solid #E9E9E9; // ... blabla ... // margin-left: 0; padding-left: 0; }
Source code of the example
<div class="divlang"> <ul> <li class="firstlang">[[Current events|English]]</li> <li>[[Actualités|Français]]</li> <li>[[Actualiteiten|Nederlands]]</li> <li>[[新闻动态|中文]]</li> </ul> </div>