Difference between revisions of "Nuvola Skin"

Revision as of 05:01, 12 July 2009

In the summer of 2009, I created the Nuvola skin for MediaWiki. I had originally started it in the summer of 2006 (less than a year after I had gotten my website.) It is based off of the Nuvola icon set for KDE 3 by David Vignoni and the MediaWiki homepage design draft I adopted for my homepage. It is based off of the Monobook skin, which is the MediaWiki default. I kept the content area and layout, because I liked it. I wanted to create a new skin because all of the MediaWiki skins suck. With Wordpress, everyone installs a new skin, and every site looks unique. With MediaWiki, almost no one uses a new skin.

I did not get much done in 2006, except some new file icons and a start to the CSS. I did do a full design on paper which I can not find anymore. In 2009, I decided to finish the skin. The skin is comprised of 3 main elements: far better drop downs, a new sidebar, and a new footer.

Drop Downs

The drop downs for MediaWiki were the first things I ever really coded with CSS. They were ugly and never really fit in with the site design. In addition, they did not work well in all browsers (although I can not conclusively determine that the new ones work better or if the browser manufactures changed their code). Lastly, the HTML code appeared before the content. On a text based browser, you had to scroll though the drop down menus every time, and it was not the best for search engines. The new skin puts the drop downs at the bottom of the HTML code and the CSS makes it display at the top.

The drop downs are now hard coded to speed up the site. The old ones were dynamically created as the "sitenotice", and I think I could do that again except for IE8 which requires strict nesting adherence that MediaWiki did not do for me.

Sidebar

Because I removed the old personal area and page tabs, a lot more items needed to go in the sidebar. The challenge was to differentiate between the items to make them easy to scan. I dropped some duplicate items, such as the link to the Main Page because people know to click on the logo to go home. On browsers which support CSS print stylesheets (aka Not IE6), there is no print view icon. I want people to break out of the habit of looking for the print view button. I originally planned to put a notice saying "just hit print", but I decided against it.

I did not think that the old site bar made it easy for people to start editing. That is why I made the edit button big and yellow.

The comments button I also made it easier to let people make a comment. The "comment" link is the same as clicking the comments tab and then clicking on the "+" tab. I still have a "View comments" link to go to the comments page. The links change colors depending on if they are active; "comment" lights up if a user is logged in (because must be logged in to edit), and "view comments" only lights up if there are comments.

I did not like the current split between navigation and toolbox; it seemed like some items should be in the other one and items were mixed between page specific (ie related changes) and site specific (ie special pages). Instead, I combined all of the links relating to the current page on top, and put the links to other pages on the site under the search bar (using the search bar as a divider).

Footer

Extra Non-Skin Items

Google Search

I made some hacks to the internal pages for my site which makes it easier to use. They are not part of a skin per say. For search results, I display Google Custom Search results below MW search results in an iframe. I was able to "hack" the Google results so that it would search the query the user had entered. This is handy because the MW search is not the best and Google might have some results. It also allowed me to remove the separate Google box I had before.

Scribd iPaper

For documents, I have used the Scribd iPaper plug in JS to automatically display documents in the browser using Flash. (currently broken)

The code is a bit of a hack and is only tested on my rules (ie must be logged in to edit)

Optimization