We continue to develop resources related to the COVID-19 pandemic. See COVID-19 initiatives on Appropedia for more information.
Appropedia:User experience/New skin
Update 26 Jan 2015:
- We have a volunteer developer working on adding social media buttons to the Vector skin.
- It's possible we'll want to implement VisualEditor in the near future. This currently only works with Vector and Monobook (out of the 4 skins available to Wikipedia users).
- There is a skin called Readable/ used on this MW+SMW site. It is very light and clean, very easy to read, and good for people not used to wikis. However it presumably doesn't work with VisualEditor.
The rest of this page is out of date.
- 1 MediaWiki skin
- 2 Wordpress themes for the blog
- 3 Tools
This page is for discussion and collaboration on improving the user experience (UX) on Appropedia. This includes look and feel, and navigability.
Appropedia is working on a new skin. See:
- Drafts of what the new skins might look like - see image on right, and the Photoshop file (you'll have to close the casino ads - please pardon these, and let us know on the talk page if you know a better free file host for large files).
- Main Page tests
- mw:Manual:Skinning - instructions on how to create a skin for MediaWiki.
- Curt has bought a copy of MediaWiki Skins Design by Richard Carter.
- Who in the Appropedia community understands skins and can spare a few hours to help? Or even less, to help with specific questions.
- Contrast checker
- Help us pick our site colors - Appropedia community blog.
- Why Programmers suck at Picking Colors - suggests:
- that a "better way to model color is the HSV color space (sometimes called HSB: hue, saturation and brightness): most color-picking dialogs of graphic programs have an HSV mode and it’s clearly much better than RBG because it allows you to easily go back to the ‘linear contrast’ strategy by just changing the brightness and keeping hue and saturation fixed."
- the NASA color picking approach - although this is more for functional interfaces rather than attractive skins. Could be useful for aspects of Appropedia's development in future.
Examples of nice MediaWiki skins
Comments and suggestions
- Think about which links we want to make prominent. E.g. making "edit" very prominent may help emphasize the reader's ability to edit and escourage people to take that step. (Note how prominent it is at AboutUs.)--Chriswaterguy · talk 04:the 02, 13 March 2008 (PDT)
- Green is a very common color, esp on sustainability-oriented sites. Could we use a textured brown, something like the current background? For narrow strips of color, we could experiment with a finer texture. --Chriswaterguy (talk) 20:53, 29 March 2008 (PDT)
- Then again, Tressie's new logos are very nice, with a blue-green thing happening that could give us a good choice of colors. --Chriswaterguy 20:31, 3 June 2008 (PDT)
- Serif fonts? --Chriswaterguy 20:31, 3 June 2008 (PDT)
- GrassrootsWiki looks nice, but simple. --Chriswaterguy 17:10, 5 December 2009 (UTC)
- I quite like the inverted headers at http://www.developmentcommons.org - a green bar with white text. --Chriswaterguy 18:33, 6 January 2011 (PST)
I'd like to suggest these aims and priorities in developing a skin. Feel free to edit them. --Chriswaterguy 19:21, 24 March 2009 (UTC)
- Simplicity (e.g. see WikiGender)
- Easy navigation
- Clear, easy to read, with an elegant choice of colors.
- searchbox at top? (Maybe start with new Wikipedia skin...)
- size = ... 160% of present size?
- profile page links visible without scrolling down (e.g. User contributions)
Near the top right of the fan wiki en.battlestarwiki.org is an image (usually of a character) which links to the relevant wiki article. The image changes periodically (and the link and link text along with it), or when following a link or doing a hard refresh. This could be good for us - rotating through featured projects and other featured pages. --Chriswaterguy 07:42, 17 April 2008 (PDT)
- I notice they don't have a logo at the top left the way most MediaWiki sites do, so this is probably the site logo, moved and somehow made to alternate. --Chriswaterguy 20:38, 3 June 2008 (PDT)
Starting from a skin other than Monobook
Nice clean skins:
- MistyLook skin for MediaWiki seen here - and has a matching WordPress theme: http://wpthemes.info/misty-look/ - unfortunately this seems not to be open source (only a $20 donation, but presumably we can't share it.)
- OpenIDNet MediaWiki skin for http://wiki.openid.net/ - less pretty, but tidy & could have useful code.
Tests on the dev wiki
Skin developers can be given admin privileges on the Appropedia dev wiki.
The skins are found at on the dev wiki at:
- Common.css The defaults for all skins
- Approdev.css However this is not active until someone uploads the relevant file(s) to the server.
(Question: the files are at 2 places, e.g. for Wikipedia they are at http://en.wikipedia.org/style/monobook/main.css and en:MediaWiki:Monobook.css but for other skins, they are not necessarily in the MediaWiki space. How does this work, and which one(s) need to be changed, to change the skin?
- The list of all pages in the MediaWiki namespace. (Search for .css pages.)
To allow someone to display a skin without selecting it in preferences, add the appropriate suffix to the end of the url, &useskin=skinname where skinname is the skin name in lower case with no spaces. E.g.:
See more by editing your preferences file and clicking "Preview".
Wordpress themes for the blog
Wordpress theme resources
- Valid CSS seems like it's probably important.
- Elegance - if we can move sidebar and logo left.
- Free Wordpress Themes
- http://themecorp.com/themes/cityscape/ - clean
- Darwin - A lean & clean WordPress skin. Example.
- WordPress Support Forum
- Choosing a WordPress Theme
- Designing WordPress Themes For the Slowing Web
- How Do You Choose a WordPress Theme?
- How to Move and Change the WordPress Sidebar
Finding matching colors (based on uploaded image, e.g. logo):
- Hexadecimal Colour Codes for HTML - try out text and background colors & generate the hex code.
- Check that hex color code.
THe colors of the clear-blue-green logo (from Tressie) are:
- blue: 86aed5 and
- green: 54b680
Using these didn't seem to work well.
The actual colors used in the first draft of the Wordpress blog ("Appropedia's 13") are the following. I can't remember which set I based it on, but nn a couple of cases I halved the intensity, by dividing the RGB values, 2 digits each in the hex codes, by 2. Otherwise they were too pale for easy reading:
- unvisited links #1E674E - bright green-blue but half as intense. RGB values were halved (so 1E674E)
- visited links: #727A7A grey - half as dark
- background - white
For more details see Appropedia:User experience/New skin/Appropedia's 13 for WordPress style.css