Mediawiki upgrade: help needed

[Tobi]

I upgraded mediawiki to 1.16.0 in the test environment. Functionally everything seems to work, so I will deploy it in production in a few weeks. (for security)

However the style is still very broken, and because I'm not good at debugging CSS
formatting bugs, I'm throwing this into the community

So I'd like to urge anyone who knows why it's broken like this to tell me (like add/change this and this in CSS file foo.css) or preferably even fork the website on github (branch: mediawiki-1.16.0), commit your changes there and send me/us a pull request.

Here is a list of things I've seen that are broken. I'll keep this up to date as fixes are provided:

• white background on bottom of page
• header menu (home/about/games/...) detached from banner
• some pages completely unreadable, e.g. Special:Statistics
• TOC boxes broken, also note the styling difference between media width < 1200px and media width >= 1200px! (resize your browser window to see this)
• Wiki search results look ugly
• Selected item in Preferences page looks ugly

Good luck!

http://test.springrts.com/wiki/

EDIT: Don't make actual page content changes there as it's a throw-away test database!

[SinbadEV]

According to firebug the reason for the white background is:

http://test.springrts.com/mediawiki/ski ... ed.css?270 (line 381)

body.ns-0 {
background-color:white;
}

This is taking precedence over the other body styles because it is a body.class style.
EDIT=================================================
White Background Tables seem to be defined in:
http://test.springrts.com/mediawiki/ski ... ed.css?270
look for .wikitable ... in particular change "table.wikitable" and ".wikitable th" background-color to something darker (the color of the text in these tables might need to be adjusted as well

[Tim Blokdijk]

Well, the problem with the white background is defined in:
http://test.springrts.com/mediawiki/ski ... shared.css
Comment out the last entry

Code: Select all

body.ns-0 {
	background-color: white;
}

And that's fixed, the other things I would have to look into..

[EDIT]
SinbadEV beat me to it..
[/EDIT]

[AF]

Rather than comment out and modify the mediawiki stylesheets, spend a few months happy, find a horrible exploit, do an upgrade, and repeat all the work again, why don't we create an additional final override stylesheet that takes the CSS rules we dont like and defines them again but with the desired values?

[SinbadEV]

Rather than comment out and modify the mediawiki stylesheets, spend a few months happy, find a horrible exploit, do an upgrade, and repeat all the work again, why don't we create an additional final override stylesheet that takes the CSS rules we dont like and defines them again but with the desired values?

feel free :D

[Tobi]

Thanks, included those fixes now.

AF: good point, feel free to do so

If it doesn't happen I trust my git skills enough to simply re-apply these changes on top of a newer mediawiki whenever that comes out. (Need to do that kind of thing anyway for phpbb with it's stupid mods.. ) (edit: or I will do it once I get sufficiently irritated by doing this)

[SirArtturi]

Well, the reason why menubar/nav seems to be detached from banner is that lineheight for it is inherited from here(notice that theres no line-height in current css for menubar):

Code: Select all

p, pre, td, th, li, dd, dt {
line-height:14pt;
}

I fixed it with these (not sure if the best way, but at least it works):

Code: Select all

.headertd {
line-height:0 !important;
padding:0;
}

Code: Select all

table.menubar td {
line-height:0 !important;
padding:0;
}

[Tobi]

Thanks, applied.

Though I left away the !important marks, they didn't seem needed on my firefox and chrome. Any reason you added those?

I found a new formatting bug too, related to the table of contents on the wiki pages.

If media width is < 1200px the border radius is missing (probably always has been, as I don't see it in the CSS), and if media width >= 1200px the border radius is present, but suddenly also a background image/gradient is present for the "Contents" header, and there is a rectangular box around the curved-borders box. Half of these issues are also present in current site, but still could be nice if someone could take a look at it

It's probably related to this part of spring.css:

Code: Select all

/* TABLE OF CONTENT */
@media (min-width: 1200px) {
  #toc[summary=Contents]  {position: relative; right:0px; top:5px; width:240px; overflow: hidden;
                           border: 1px solid #111; border-spacing: 0px;
                                                   margin-left:20px; margin-bottom:20px;
                                                   -webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;
                           background: #38464F;}
  #toc tr td > ul         {margin-top: 0.5ex; margin-right: 0.5ex;}
}
@media (max-width: 1199px) {
  #toc[summary=Contents]  {background: transparent; border: none; border-spacing: 0px;}
  #toc div                {line-height: 20px; padding-left: 5px; padding-right: 5px;
                           border-bottom: 1px solid #20292E;
                           background: transparent url("/images/news_bar.png");}
  #toc                    {margin-left: 5px; margin-right: 0; padding: 0;} 
  #toc td                 {margin: 0; padding: 0;} 
  #toc tr td > ul         {margin: 0; padding: 5px;
                           border: 1px solid #20292E; border-right:0px; border-top:0px; background: #38474e;}
}

In the mean time I will deploy 1.16 to the production site as the most glaring formatting bugs have been fixed.

Thanks for the help everyone

[abma]

i get this on the test site: (Firefox 3.6.12 + Windows XP)




( http://test.springrts.com/phpbb/ )

[Tobi]

Ahh, was just going to post about that yeah.

Delaying deployment for now..

If someone can fix that it would be nice. It is caused by this, in styles.css:

Code: Select all

.headertd {
    line-height: 0;
    padding: 0;
}

If I comment out line-height there the forum works, but then in mediawiki the menubar looks ugly.

No clue why the complete phpbb forum would fall under .headertd, maybe the DOM is just completely broken..

[SirArtturi]

Okay, looks like enforcing lineheight to zero, or actually at any value in header element seems to conflict several issues elsewhere. So draw back that rule.

Anyway, I still think that problem lies in here:

Code: Select all

p, pre, td, th, li, dd, dt {
line-height:14pt;
}

Theres seems to be no such rule in current css.

Edit: Correction. Such rule actually exist. So just ignore this!

[Tobi]

Fixed in test. (just moved the offending thing to the wiki stylesheet only..)

[Tobi]

Deployed mediawiki 1.16.0

[SirArtturi]

menubar still not appearing correctly.
Remember to include lineheight to table.menubar td also

Code: Select all

/* FIXES FOR MEDIAWIKI 1.16.0 */
.headertd                {line-height: 0;}
table.menubar td     {line-height: 0;}

[Tobi]

I've put that in the "overall" style. (styles.css iirc)

Menubar appears correctly for me. (maybe try ctrl+f5 or so to refresh caches a bit more)

[abma]

there is also an syntax error:

http://github.com/spring/spring-website ... r.html#L27

i think, this should be </td></tr>

see also: http://validator.w3.org/check?uri=http% ... 2Fphpbb%2F

[AF]

It shouldnt be there fullstop, tr and td elements should only occur inside tables. Instead we have a table here with no opening table tag, a closing row and cell tag with no opening tag, and theyre right before the body closing tag, this all makes no sense!

But yes, </tr></td> shouldnt happen, they need swapping at the very least

[koshi]

wiki search result page looks weird still

edit: also preferences, 'selected tab'