PDA

View Full Version : Trouble adding ext-all.css to MediaWiki



jukkajurvansuu
12 Nov 2009, 1:44 AM
I'm having some problems adding ext-all.css file into my MediaWiki or any other page that is dependent of complex styles.

I'm trying to make an extension that adds the ExtJS functionality for MediaWiki extensions, but some styles seems to be interfering with each other.

The situation is as follows: I add the ext-all.css to the MediaWiki page first, before I add any styles that MediaWiki defines. Then the MediaWiki does it's things by adding its common .css files and the skin .css that user has chosen from settings. These styles generally define all basic elements, like tables, headers, marginals etc.

This works great atm, except for that some styles are now broken from ExtJS components, because MediaWiki skins define styles like this:


<style type="text/css">
table {
background-color: white
}
</style>

This rule makes the Ext.Toolbar component look wrong, because now the table inside toolbar is white. It overrules the background-image that toolbar is supposed to show.

That is just one example, there must be some other problems with styles that I haven't found yet.

Basically I can't alter the way skins do their things, they manipulate the look and feel of page as they wish, but I somehow need to get ExtJS components look like they are supposed to...


Below is a test case where you can see this situation yourself:



<html>
<head>

<link rel="stylesheet" type="text/css" href="components/extjs-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="components/extjs-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="components/extjs-3.0.0/ext-all.js"></script>

<style type="text/css">
table {
background-color: white
}
</style>

<script type="text/javascript">
Ext.onReady(function(){

var tbTools = new Ext.Toolbar({
renderTo: Ext.getBody(),
items: [new Ext.Button({
text: 'Button'
})]
});
});
</script>
</head>

<body>
</body>

</html>

jay@moduscreate.com
12 Nov 2009, 4:56 AM
I'm guessing mediawiki does not use a reset css - does it?

jukkajurvansuu
12 Nov 2009, 5:10 AM
I don't think so. How do I do it? Does it mean that I just include some css file after ext-all.css? I found this reset-min.css from ExtJS folders, is this what I should use?

jay@moduscreate.com
12 Nov 2009, 5:11 AM
the rest evens the playingfield across browsers - thus the word "reset".

My thought is that the reset is messing up the mediawiki CSS.

jukkajurvansuu
12 Nov 2009, 10:21 PM
Hmm... I think it's the other way around. MediaWiki is messing with ExtJS css. This is because the Toolbar looks right if I don't load MediaWiki skin, where the common html tags are defined to be used with MediaWiki article layout.

Could this be a bug, because is it normal that altering the table tag css is supposed to affect the ExtJS component style, like in the test case I provided?