Topic on Project:Support desk

Adding external CSS and JS to wiki

6
Jonathan3 (talkcontribs)

I'd like to add Responsive Tables to my wiki. It needs the following to be added:

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="responsive-tables.css">
<script src="responsive-tables.js"></script>

I tried to add it using Extension:Widgets but it didn't work for me (maybe because it incorporated it within the body part of the web page rather than in the head?)

I guess I could manually edit the skin, but is there a recommended way of doing this in a way that wouldn't require me to repeat it on an upgrade? Thanks.

Bawolff (talkcontribs)

Use mediawiki:common.js and mediawiki:common.css you'll need to adjust the loading code though to work from within a css / js file instead of html.

Jonathan3 (talkcontribs)

I'm a bit lost. No doubt it will seem obvious in hindsight. I pasted the CSS and JS into Common.css and Common.js respectively but still to no avail. I'll keep trying things...

Jonathan3 (talkcontribs)

I'm half way there. I added the following to a Widget page and it works. I'd just blindly copied and pasted, without adding the full URLs, the first time.

<link rel="stylesheet" href="https://zurb.com/playground/projects/responsive-tables/responsive-tables.css">
<script src="https://zurb.com/playground/projects/responsive-tables/responsive-tables.js"></script>

I would still be interested how to do it within MediaWiki. I guess I could at least use a local copy of the CSS/JS files.

Peculiar Investor (talkcontribs)

You might want to also read through Help:Cascading Style Sheets. I found it very helpful to understand how the various CSS and JS files are used. I don't see anything that specifically relates to loading external CSS and JS.

Bawolff (talkcontribs)

generally you use @import for external css, and mw.loader.load for external js

Reply to "Adding external CSS and JS to wiki"