WikiShrek mobile before

My main page in the old skin. As you can see, the images were in a table and were cut off, so you can only see the poster for the first film.

Since the new mobile skin doesn't accept custom CSS/JS, my wiki's main page looked awful. It had those picture link things (we called them portal elements), but the pictures were different sizes and offsets to align the charater's head in the middle, and so on. And they were cropped by a surrounding div to all be the same size. Since their style was removed in the new skin, there were now just a bunch of pictures ranging in size in a table that ran over the edge of the page and got cut off. But, I figured out how to redirect my main page if it uses the new skin, the code is as follows:

<script type="text/javascript">
/** Redirect main page for wikiamobile **/
 if (skin == "wikiamobile") {
  if (document.URL.indexOf("redirect=no") == -1) {
    window.location = "[URL to redirect to]";

Obviously, you can't put that code on the page or in the Common.js file, but what you can do is put it in a MediaWiki page (I named it MediaWiki:MPRedir) and then use Verbatim tags (for example, <verbatim>MPRedir</verbatim>) on your main page to make it redirect to your mobile main page (mine is here), which can be phone-optimized. You can use the same technique to change the text of the header back to your wiki's main page title and to add additional scripts and styles.

I hope this helps make your wikis' main pages look great for all users, I know it helped me! Emoticon_happy.png

By the way, this can also be used to implement the touch icon changer I discussed in my last blog post, if you were wondering about how to implement that into the new skin.