[Mediawiki-l] howto include different page.css into one MediaWiki:CentralCSS.css page for organizing css cascade sheets?

[HiddenId]

Hi,
We've created one page called MediaWiki:CentralCSS.css . This page is supposed to "call" css subpages.

Then we've created 5 css subpages, called :
* MediaWiki:Reset.css
* MediaWiki:Layout.css
* MediaWiki:Colors.css
* MediaWiki:Typo.css
* MediaWiki:Special.css

Now, we'd like the 5 css subpages been "called" into the central one.

What should we write into the MediaWiki:CentralCSS.css in order to get the css rules writen in subpages, working across the central css page ?

something like : [[MediaWiki:Reset.css]] ? putting name of pages into brackets [[ xxx ]] ?

Thanks a lot for your help

AC
_______________________________________________
MediaWiki-l mailing list
Media...@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-l

[nakohdo]

See http://meta.wikimedia.org/wiki/Help:Embed_page for instructions on how to
transclude pages.

hth
Frank

--
View this message in context: http://wikimedia.7.n6.nabble.com/howto-include-different-page-css-into-one-MediaWiki-CentralCSS-css-page-for-organizing-css-cascade-s-tp4503305p4514589.html
Sent from the WikiMedia General mailing list archive at Nabble.com.

[Krinkle]

On Feb 24, 2012, at 5:25 PM, HiddenId wrote:

> Hi,
> We've created one page called MediaWiki:CentralCSS.css . This page is supposed to "call" css subpages.
>
>
> Then we've created 5 css subpages, called :
> * MediaWiki:Reset.css
> * MediaWiki:Layout.css
> * MediaWiki:Colors.css
> * MediaWiki:Typo.css
> * MediaWiki:Special.css
>
> Now, we'd like the 5 css subpages been "called" into the central one.
>
> What should we write into the MediaWiki:CentralCSS.css in order to get the css rules writen in subpages, working across the central css page ?

From within a css file the only way to import another css file is to use "@import". So if your wiki is installed at https://example.org/w/ and articles viewed at https://example.org/wiki/Article. Then you'd put somethig like this into your central .css:

@import url('/w/index.php?title=MediaWiki:Layout.css&action=raw&ctype=text/css');

I don't know where you are using "MediaWiki:CentralCSS.css" but there is a css page by default on MediaWiki wikis called "MediaWiki:Common.css" that is loaded on all pages, perhaps use that instead to load your css pages.

And store the other ones as sub pages from it, to keep the MediaWIiki:-namespace clean.

So MediaWiki:Common.css would contain

@import url('/w/index.php?title=MediaWiki:Common.css/layout.css&action=raw&ctype=text/css');

-- Krinkle

[Krinkle]

On Feb 27, 2012, at 1:31 PM, nakohdo wrote:

> See http://meta.wikimedia.org/wiki/Help:Embed_page for instructions on how to
> transclude pages.
>

That's for wikitext pages only, not for javascript and css pages. JS/CSS can only
be included via the native language syntax of javascript and css, not via wikitext
transclusion.

-- Krinkle

[HiddenId]

Hi Krinkle.
I've not reach to make your solution running.
I propose to try something:

Let's try to focuse on the modification of the #p-personal CSS used by monobook and vector skin.

Then, using your method, here what we have:

1. Defaut skin used: Vector

2. CSS parameter to modify: #p-personal
3. CSS modification to apply: #p-personal {width:100%; background-color:green;}
4. CSS page where this CSS modification is written: MediaWiki:Vector.css/Layout.css page of our wiki. This page contains only one line;
   {width:100%; background-color:green;}
5. Using of @import rule inside MediaWiki:Vector.css: This page contains this line and only this line:

   @import url('/w/index.php?title=MediaWiki:Common.css/layout.css&action=raw&ctype=text/css');

6. Refreshing the browser: we use Firefox, we made ctrl+F5
7. Results: no change. The new CSS rule written in MediaWiki:Vector.css/Layout.css, is not applied.

What sort of mistake have we done ?

Ac

---------------------------------------------------------------------------
-> Krinkle message/thread #3 27 Februar:
---------------------------------------------------------------------------

From within a css file the only way to import another css file is to use "@import". So if your wiki is installed at https://example.org/w/ and articles viewed at https://example.org/wiki/Article. Then you'd put somethig like this into your central .css:

@import url('/w/index.php?title=MediaWiki:Layout.css&action=raw&ctype=text/css');

I don't know where you are using "MediaWiki:CentralCSS.css" but there is a css page by default on MediaWiki wikis called "MediaWiki:Common.css" that is loaded on all pages, perhaps use that instead to load your css pages.

And store the other ones as sub pages from it, to keep the MediaWIiki:-namespace clean.

So MediaWiki:Common.css would contain

@import url('/w/index.php?title=MediaWiki:Common.css/layout.css&action=raw&ctype=text/css');

-- Krinkle

________________________________
De : HiddenId <courriel_...@yahoo.fr>
À : "media...@lists.wikimedia.org" <media...@lists.wikimedia.org>
Envoyé le : Vendredi 24 février 2012 17h25
Objet : [Mediawiki-l] howto include different page.css into one MediaWiki:CentralCSS.css page for organizing css cascade sheets?

[HiddenId]

Sorry I made written mistakes in my previous post.
Here is this post, with written mistakes corrected:

Hi Krinkle.
I've not reach to make your solution running.
I propose to try something:

Let's try to focuse on the modification of the #p-personal CSS used by monobook and vector skin.

Then, using your method, here what we have:

1. Defaut skin used: Vector

2. CSS parameter to modify: #p-personal
3. CSS modification to apply: #p-personal {width:100%; background-color:green;}
4.
CSS page where this CSS modification is written:
MediaWiki:Vector.css/Layout.css page of our wiki. This page contains
only one line;
   #p-personal {width:100%; background-color:green;}

5. Using of @import rule inside MediaWiki:Vector.css: This page contains this line and only this line:

   @import url('/w/index.php?title=MediaWiki:Vector.css/Layout.css&action=raw&ctype=text/css');

6. Refreshing the browser: we use Firefox, we made ctrl+F5
7. Results: no change. The new CSS rule written in MediaWiki:Vector.css/Layout.css, is not applied.

What sort of mistake have we done ?

Ac

________________________________
De : HiddenId <courriel_...@yahoo.fr>
À : MediaWiki announcements and site admin list <media...@lists.wikimedia.org>
Envoyé le : Jeudi 8 mars 2012 11h15
Objet : [Mediawiki-l] Re : howto include different page.css into one MediaWiki:CentralCSS.css page for organizing css cascade sheets?

[Krinkle]

What version of MediaWiki are you running?

Can you include a link to your wiki so we can look at it?

- Krinkle

[HiddenId]

Hi Krinkle.
Thanks for your help.
Unfortunatly, we are testing on a local installation. The wiki is not accessible.
Does it mean, you have tested your method on a wiki using mediawiki engine, to change #p-personal CSS from common.css, or any other equivalent CSS monobook css placed in common.css, and you succeed in it ? And if so, as a consequence, you wander if something concerning our wiki installation avoid a normal processing, do you ?

Here bellow, informations concerning the version.
Ac

--------------------------------------------------------------------

1. Version informations (from Special page Version)
--------------------------------------------------------------------
Installed software
Product     Version
MediaWiki     1.18.1
PHP     5.3.2-1ubuntu4.14 (apache2handler)
MySQL     5.1.41-3ubuntu12.10
Installed extensions
Other
Language Selector     Language selector on every page, also for visitors     Daniel Kinzler
Polyglot     Support for content in multiple languages in a single MediaWiki     Daniel Kinzler
PrefSwitch (Version 0.1.2)    Allow users to switch sets of preferences     Trevor Parscal and Roan Kattouw
Extension functions
wfLanguageSelectorExtension and wfPolyglotExtension
Parser extension tags
<gallery>, <languageselector>, <nowiki> and <pre>
Parser function hooks
anchorencode, basepagename, basepagenamee, canonicalurl, canonicalurle, defaultsort, displaytitle, filepath, formatdate, formatnum, fullpagename, fullpagenamee, fullurl, fullurle, gender, grammar, int, language, lc, lcfirst, localurl, localurle, namespace, namespacee, ns, nse, numberingroup, numberofactiveusers, numberofadmins, numberofarticles, numberofedits, numberoffiles, numberofpages, numberofusers, numberofviews, padleft, padright, pagename, pagenamee, pagesincategory, pagesize, plural, protectionlevel, special, subjectpagename, subjectpagenamee, subjectspace, subjectspacee, subpagename, subpagenamee, tag, talkpagename, talkpagenamee, talkspace, talkspacee, uc, ucfirst and urlencode

________________________________
De : Krinkle <krink...@gmail.com>
À : HiddenId <courriel_...@yahoo.fr>; MediaWiki announcements and site admin list <media...@lists.wikimedia.org>
Envoyé le : Jeudi 8 mars 2012 12h16
Objet : Re: [Mediawiki-l] Re : Re : howto include different page.css into one MediaWiki:CentralCSS.css page for organizing css cascade sheets?

[HiddenId]

Hi Krinkle again.

I've made some test, using @import rules inside MediaWiki:Common.css page, but, using a persofile.css placed in a directory I've created inside the mediawiki engine directory. I've called persofile.css inside MediaWiki:Common.css page using the complete url adress of this file (see bellow). In that way, it works fine. But is it a good practice ? What about direct relative url address that might be preferred instead of complete url address ?

Ac
__________________________________________________________

Method with complete additional personal CSS directory and complete css file url:

1/ creation of a directory called "PersoFilesCSS" inside the directory where mediawiki is installed
2/ inside /PersoFilesCSS folder, creation of a css file called colors.css
3/ Put inside this colors.css file this line, modifying #p-personal css component of monobook skin: div#p-personal {background:yellow;}
4/ Inside MediaWiki:Common.css page, I've placed this @import rule:
    @import "http://localhost/private/mdw/PersoFilesCSS/colors.css"
5/ Then refresh browser, and it works

________________________________
De : HiddenId <courriel_...@yahoo.fr>
À : Krinkle <krink...@gmail.com>; MediaWiki announcements and site admin list <media...@lists.wikimedia.org>
Envoyé le : Jeudi 8 mars 2012 15h02

[Krinkle]

Yes, that's the cause.

The url given to @import must include a hostname

so for example if you have certain customizations for the Vector skin,
you could put them in: MediaWiki:Vector.css/Layout.css and from
MediaWiki:Vector.css:

@import url('http://example.org/w/index.php?title=MediaWiki:Vector.css/Layout.css&action=raw&ctype=text/css');

If your domain supports http and https, relative protocols are supported as well:

@import url('//example.org/w/index.php?title=MediaWiki:Vector.css/Layout.css&action=raw&ctype=text/css');

That'll work.

Aside from that, this is however a little ineffecient in that it makes multiple HTTP requests.
Why not just put everythign in MediaWiki:Vector.css (which is loaded by default).

-- Krinkle

[HiddenId]

Ok Krinkle.
Thank you for your highlights.
You are right: it may be more relevant to integrate my personal css structure, inside MediaWiki:Common.cssor MediaWiki:Vector.css pages.
It could be more aligned with the way mediawiki works.
Thank again for your kindly help.
Ac

________________________________

De : Krinkle <krink...@gmail.com>
À : HiddenId <courriel_...@yahoo.fr>

Cc : MediaWiki announcements and site admin list <media...@lists.wikimedia.org>
Envoyé le : Vendredi 9 mars 2012 1h09
Objet : Re: [Mediawiki-l] howto include different page.css into one MediaWiki:CentralCSS.css page for organizing css cascade sheets?

That'll work.

-- Krinkle

>________________________________