User:Jd/Proposal/LangCSS: Difference between revisions

From Wikimedia Foundation Governance Wiki
Content deleted Content added
Jd (talk | contribs)
Jd (talk | contribs)
 
Line 19: Line 19:
== To be added to MediaWiki:monobook.css ==
== 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):
<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;
padding-left: 0;
}


.divlang ul li {
border-left: 1px solid #E4E4E4;
display: inline;
list-style: none;
margin-left: 0;
padding: 0 0.5em;
}

.divlang ul li.firstlang {
border-left: none;
display: inline;
list-style: none;
margin-left: 0;
margin-left: 0;
padding-left: 0;
padding-left: 0;

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>