So here it is. My first MediaWiki theme. I wanted to take the skinning to a new level. Therefore, I implemented several AJAX / Javascripts to the skin.

First I want to give credit to Toykilla as this theme is based on his skin (which is a heavily modified version of the Monobook theme). Now, on to the changes/features:

• First, you'll notice that the content boxes along the left side can be re-arranged. This is done using AJAX and is stored on the local computer so the order stays the same for future visits. Also, each box can be collapsed or expanded by clicking on the (+) or (-). This is based on the Docking Boxes (dbx) script.
• Next, I've added a feature called "My Favorites". Basically, under the title of each page is a link that says "Add to favorites", when clicking on this link, it will add the page to the left navigation box for easy access. The pages can be removed if no longer needed and the list is stored as a cookie on the user's machine so they won't lose it. This avoids any messy database functions. Also, there is a helpful javascript popup explaining this to your visitors. This feature is similar to a "shopping cart" script and was mostly coded by hand. There is some redundancy in the code so if someone feels like cleaning it up, feel free.
• Lastly, I have embedded a Google search box in the left navigation pane. This avoids having to add any extensions to your Wiki and makes for easy access to the search engine.

So feel free, download it and please let me know what you think of it in the comments. You can also check out the pictures below. If you end up installing it, please let me know so I can link to your site as a preview. Enjoy! Oh, and if you really like it, you might consider donating.

To install:

Unzip the contents of Andys_skin (both Andys.php and the Andy folder) to the "skins" directory in your Mediawiki installation.  Then login, go to "my preferences  → skin →and select Andys.  If you'd like to make it the default skin for your site, edit LocalSettings.php and add the following line:

$wgDefaultSkin = 'andys';

Make sure 'andys' is in lowercase.  If you would like to preview this skin, you can see it here:

TrackBack URI for this entry

Comments (36)

Subscribe to this comment's feed

Show/Hide comments

Acolyte said:

	Whenever I change page outside of Special: namespace, the plus/minus images are not shown anymore on panels, plus I cannot drag them. Favourites work fine though.
	report abuse vote down vote up

April 22, 2008 | url
Votes: +1

Andy said:

	Can you please provide a link to your Wiki so I can test?
	report abuse vote down vote up

April 24, 2008
Votes: +0

Acolyte said:

	It is already provided in the url.
	report abuse vote down vote up

April 27, 2008 | url
Votes: +0

HTPCnz said:

I like what you have tried to accomplish here...have tested it on my site These are issue I have noticed on my site: Firefox: -Page tabs not sitting flush on top of article/body (discussion, edit, history etc)...display hovering above article/body... -No changes to my Share This! sidebar extension, not changed cosmetically not able to be condensed...but my Top 10 Contributors sidebar extension does... And it pulls the Share This! sidebar block right to the top, not movable -Issue with some special pages...in particular my AWC Forum...all sidebar mods wont work when in AWC Forum special page... IE6: -Page tabs not sitting flush on top of article/body (discussion, edit, history etc)...display overlapping article/body... -No changes to my Share This! sidebar extension, not changed cosmetically not able to be condensed...but my Top 10 Contributors sidebar extension does... And it stays fixed at the bottom where it normally is in Monobook... -Issue with some special pages...in particular my AWC Forum...all sidebar mods wont work when in AWC Forum special page... -Sidebar boxes not displayed properly, not displaying the far right side of the heading background, and /- buttons not flush against right side edge. Would love to see fixed, as would like to use as main skin...but not with those issues obviously http://www.htpcnz.net

report abuse vote down vote up

April 30, 2008 | url
Votes: +0

Rick said:

Hi, Love the skin !!! I'm running it on 2 different Wiki's on an internal LAN. One works fine, the other is experiencing the problems described by Acolyte where the AJAX fetures such as moving and toggling the boxes open or closed only works when on a Special: page. The Wiki's are largely configured the same way. I've disabled any extensions and options that are different between the two but still can't get it to work. Any suggestions would be greatly appreciated. Rick

report abuse vote down vote up

April 30, 2008 | url
Votes: +0

Andy said:

@Acolyte: Can I ask what browser you are using? Also, can you provide a login to your Wiki so I can try to change the skin and test it? @HTPCnz: Most of the cosmetic problems that you are reporting can be fixed in the Main.css file. For Firefox specific issues I believe there is a FirefoxFixes.css file (or something) in the skins folder that you can edit. I will take a look at it and see if I can make some fixes. What version of Firefox are you using? As for the extensions you're using, I haven't tested the skin with those. It's possible that they implement some other Java call that is interfering with the Java in the skin. Are you getting an error at the bottom of the page? @Rick: What browser and version are you using?

report abuse vote down vote up

April 30, 2008
Votes: +0

HTPCnz said:

Firefox v2.0.0.14 IE v6 Another bug: -The favorites save and work, except when saving special pages, such as a forum thread...when I try, it actually saves and the link is available in the favorites box, but once I navigate outside the forums/special pages, the link disappear...but reappear if I navigate back to the forums/special pages Errors I recieve in Firebug: (When in special pages/forum) -syntax error http://www.htpcnz.net/Special:AWCforum&action=st/id13/skins/Andys/ajax/dbx.js Line 1 -syntax error http://www.htpcnz.net/Special:AWCforum&action=st/id13/skins/Andys/ajax/dbx-key.js Line 1 -syntax error http://www.htpcnz.net/Special:AWCforum&action=st/id13/skins/Andys/boxover.js Line 1 Loading up a mediawiki namespace, such as the site support page, brought up this error 6 times: -$A is not defined http://www.htpcnz.net/phpfreechat/data/public/js/prototype.js Line 105

report abuse vote down vote up

April 30, 2008 | url
Votes: +0

Rick said:

Andy, both sites run an an internal LAN and hence are not available on the internet. I've tried using both firefox and IE. I don't see any errors at all. I spent some time last night working through the dbx.js file and to the best of my skill I figure that dbx.js identifies the brower as "not supported". It's really wierd in that pages from the Special namespace work fine. I'm not familiar enough with MediaWiki to know if there are any restrictions on javascript when accessing non "Special" pages or whatever. The strange thing is that a very similar configuration ie same MediaWiki 1.12, PHP,mySQL,IIS configuration works fine on another server. What's even more strange is that the site that doesn't work on either my laptop or desktop computer works ok for another user on their computer !!!!

report abuse vote down vote up

April 30, 2008 | url
Votes: +0

Rick said:

	Andy, the problem appears to be related to a users account some how. If I create a new user and log in as that user then everything works as it should !!!!
	report abuse vote down vote up

April 30, 2008 | url
Votes: +0

Andy said:

@HTPCnz: Is there any way you can disable the phpfreechat extension and try it again on your main namespace? As far as the forum goes, it seems like it's something conflicting between AWC's code and my own. I've never actually installed my skin on a site that has the forum integration. I'm thinking that it's puking on that colon in the title (Special:AWCforum). I can TRY to see if I can test it out and fix the issues. @Rick: That's really weird. The only issues I've come across is it NOT working with the special pages. It seems like colons make the javascript crap out. I suppose there's a way to escape them, I just don't know javascript well enough. So are you saying the 2 installs are pretty much exactly the same? Or is one running a different version of MW? As far as the not working on your computer, maybe you have javascript turned off in your browser(s)? That's the only thing I can think of. Are your versions of IE or FF the same on your desktop as they are on the other person's computer?

report abuse vote down vote up

April 30, 2008
Votes: +0

Andy said:

	@Rick: Ahh yes, so you have anonymous editing disabled? Hmmm, try adding the skin to your Whitelist. Maybe Mediawiki:Andys.js and MediaWiki:Andys.css. That might remedy the issue.
	report abuse vote down vote up

April 30, 2008
Votes: +0

Rick said:

Andy, I got it working by deleting my username from the database and recreating my account (with the same username). Go figure !!! I've also modified some of the CSS files to fix the alignment issues in Firefox and IE 6 I moded the main.css and changed the top value to:- #p-cactions { position: absolute; top: 22px; Similarly in IE60Fixes.css this was changed to #p-cactions { position: absolute; top: 12px; I also added the following to IE60Fixes.css to fix up the mis alignment of the titles of the nav boxes on the left. div.dbx-handle h5 { width: 105%; }

report abuse vote down vote up

April 30, 2008
Votes: +0

HTPCnz said:

Disabling the Chat extension removed the errors displayed on the site support page, described above, although this is a substantial feature I do not wish to remove completely... I notice with the forums, it works fine in the initial special page Special:AWCforum/ it appears to not like it when going further in, as you said the address, Special:AWCforum/?action=st/id20....the '?action=st/id20... being the problem?

report abuse vote down vote up

April 30, 2008 | url
Votes: +0

Daniel said:

	I managed to locate the issue of windows not being draggable nor minimizable. I went into Editing preferences and un-checked "Enable section editing by right clicking on section titles (JavaScript)". Then I went back to main page, completely reloaded it, and it worked. Other JavaScript settings didn't affect the workability of your code.
	report abuse vote down vote up

May 04, 2008 | url
Votes: +0

Andy said:

	@Daniel: Awesome! Glad it works! @Rick: Thanks for posting the FF CSS fixes. @HTPCnz: Still trying to figure out the Forum integration problem.
	report abuse vote down vote up

May 04, 2008
Votes: +0

HTPCnz said:

	I appreciate that Andy As I said, would love to have this skin as my main skin, love the functionality! Moving and minimizing the boxes, and having favorites...its a great skin.
	report abuse vote down vote up

May 06, 2008 | url
Votes: +0

HTPCnz said:

While I like what you have done, and would be happy to get just that running issue free on my site, can I make a suggestion... Looking around at the extensions and skins currently available for MediaWiki, you appear to have broken new ground with the movable and collapsible ajax portlets, and the favorites portlet...(being easy to install for MediaWiki) but I wonder if you could take it further... I'm thinking of a personalized user home page/portal. Just like the BBC.com website, have the main page a range of movable ajax portlets, that can be configured or removed by the user... The content for the portlets themselves would have to be made/decided by the administrator, but thought your skills and work to date, could achieve that to some degree? That would be an impressive feature, nothing like it available currently for MediaWiki (thats easy to install/minimal programing skills required) What you think?

report abuse vote down vote up

May 18, 2008 | url
Votes: +0

jorgusch said:

Andy, Fantastic work!! Really, this is something the media wiki project needs desperatly! I want to get complete nebies on the page who shal modify specific pages for a while. 1) the moving ability will extremely simplify the structure 2) the favorite page allows to the newbies to come back to the particular sites. To the Skin: It would be nice, if it would be possible to combine the ajax-functions and other skins. For instance, I'd like to have round corners on top… In general, I say this should be part of wiki-distribution as an option in general... To the Wik - this is nothing more but an suggestion or desperate need for help of a user without any knowledge of programming You obviously try to find solutions outside of the box. Meanwhile, MediaWiki is working for a long time on a solution to allow users to add articles in another language. In my opinion this a crucial aspect for wikis with a certain focus. There are always some able to translate between languages - this advantage is missing at this point. For instance, I want to build a page for exchange students describing Unis across Europe - they cannot speak all langauges while looking for the right place, but some students might describe it in Dutch and other translate it into German. My apologizes, for this blabla. Thanks! jorgusch PS: The buttons on the top are distanced from the text in FF2., but my installation might be messed up meanwhile - I am waiting for 3..

report abuse vote down vote up

May 25, 2008 | url
Votes: +0

Stephani Muzyczek said:

Currently i have your skin installed on my wiki on a stick. the /- / moveable toolbar works for all namespaces except (main) when i am on the normal pages i see a regular sidebar but when i got into all pages or MediaWiki:Sidebar everything is rearrangable.. Any ideas on how to fix this? I actually see the same thing when i go to the links you have here under 'sites currently using my skin' for the first link.. i don't see the /- but for the second link everything looks normal.

report abuse vote down vote up

September 28, 2008 | url
Votes: +0

Tommy said:

	I must be the dumbest user alive, I cant get this skin to work, as far as I know installing it just means copying it to the skins folder, and setting it to be used in localsettings.php, but that does not do anything, it just loads the monobook skin instead? Any ideas?
	report abuse vote down vote up

November 04, 2008 | url
Votes: +0

Andy said:

	Glad to see people are still using this!
	report abuse vote down vote up

December 27, 2008
Votes: +0

eggtea said:

	I'd like to use this on wikipedia, is there a greasemonkey script for firefox, or a way to use it on wikipedia's custom skin setting in the preference?
	report abuse vote down vote up

January 28, 2009 | url
Votes: +1

Mark Buechler said:

	Your theme has references to missing files like skins/js/includes.js, skins/js/MyNav.php and skins/js/commonNav.php. I've figured out that your theme depends on Scriptaculous, but what else does it depend on? Thanks, Mark.
	report abuse vote down vote up

February 26, 2009
Votes: +0

Andy said:

	Yeah, I might have forgotten to remove some of the references from the original skin. This skin has no dependencies. It should work "out of the box".
	report abuse vote down vote up

March 03, 2009
Votes: +0

Andy said:

	The issue reported by Stephani Muzyczek and Tommy has been resolved thanks to Shawn Stelter. The paths in Andys.php were relative and not absolute, which can cause problems on certain webservers. The files has been updated.
	report abuse vote down vote up

May 08, 2009
Votes: +0

Han said:

Andy, I came across this skin, and after reading about it, it seems like the exact thing i was looking for. Love the "favorite" feature. Not sure if you are still supporting this, but as some users above, after loading the skin, the drag, open/close feature on the wiki page just isn't available, not even for any special page. I've gone through the suggestions above, but still not working. Hoping you will be able to help me out. thx

report abuse vote down vote up

July 10, 2009
Votes: +0

Andy said:

	I've added some installation instructions. Give them a shot. I just installed it on the latest version with no issues. I just setup a test wiki here - http://testwiki.cookandy.com
	report abuse vote down vote up

July 12, 2009 | url
Votes: +0

mitja said:

	Hi, I tested your skin IE8, MW1.15.0 and it looks OK though: -moving items on the left does not work. -picture in upper left corner is gone (red cross) -fonts are really small -add to favorites is great One more thing: how to translate things like Add to favorites, etc.?
	report abuse vote down vote up

July 15, 2009
Votes: +0

Andy said:

	@mitja: My guess is that IE 8 messes up the styling (as IE usually does). At this point the skin has only been tested on IE 6/7 and Firefox 2/3. If I get some spare time in the near future I'll try to grab IE 8 and see if I can make some adjustments. As for the translation, you can find the text in Andys.php. Just modify it to your liking.
	report abuse vote down vote up

July 15, 2009 | url
Votes: +0

mitja said:

	Well, it is the same in Firefox 3.0.10 looks nice, favorites working, but can't move arround in sidebar... Might be something on the server or MW side?
	report abuse vote down vote up

July 16, 2009
Votes: +0

Andy said:

	It must be installed wrong. I can view the one I installed in Firefox 3.0.11 just fine.
	report abuse vote down vote up

July 16, 2009 | url
Votes: +0

andre said:

	i've the same problem as mitja has. everything working but sidebar drag and drop boxes. it cannot be a problem of the browser, it works with your test wiki.. have you changed something recently? thanks a lot
	report abuse vote down vote up

August 18, 2009
Votes: +0

Andy said:

	Actually no, I downloaded the skin from my site before I installed it to make sure I was using the same version. What version of Mediawiki?
	report abuse vote down vote up

August 18, 2009
Votes: +0

andre said:

	it's version 1.15.1 of mediawiki. I've installed it in the intranet, so you cannot have a look at it...
	report abuse vote down vote up

August 19, 2009
Votes: +0

veders said:

	I've the same problem as Andre. With mediawiki 1.15.1 and installed on intranet. Also the "favourites work but not the drag and drop boxes (which I find the best feature of this skin. Any suggestions ?
	report abuse vote down vote up

January 19, 2010
Votes: +0

Efreak said:

I'm using 1.15.3. I haven't tried favorites. Drag and drop works fine; there's a bit of a delay between the page loading and the saved settings being applied, but thats fine. Using either Firefox 3.6.3 or Google Chrome 4.1.249.1045, the page headers dont display correctly; where there should be an open space under the correct header and they should all line up with the top of the main area, they're a few pixels above it instead. Compare your screenshots with your example (the other sites load faster), or my site.

report abuse vote down vote up

April 22, 2010 | url
Votes: +0

Show/Hide comment form

Name

Email

Website

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

Write the displayed characters

Add Comment