Technical Documentation:Wiki Design Tips

This blog is to help people who want to create their own appearance for their wiki, basically design tips.

General Theme - colors
Thought I would add a quick note about background and text color. When you choose the hexadecimal or just regular colors, make sure the text is easily readable. A common trap people fall into is that "they know what it says" but then incorrectly assume everyone else can as well thus ending up with a poor text to background color that strains the eye. This can cause headaches and also drive readers & editors away from the wiki.

Examples:
 * Pink text on Red background - Valentines Day
 * a light color displayed on a darker shade of the same color
 * Yellow text on Red or Orange background
 * light colored text on a light color background
 * white text on pink background
 * white text on a very brightly shade color

Wiki Background Image
add this css to your mediawiki:common.css

url(https://domain.com/w/Special:FilePath/Image.png)

Creating Character Portals
What I do first is decide the exact size that I want the circle/square to be. For this example, I'll use 150x150. So I select the Rectangular Marquee Tool, and in the bar across the top, click the Style drop-down menu and choose "Fixed size". (To make a circle instead, right-click the Rectangular Marquee Tool and select Elliptical Marquee Tool.) This is where I'd enter 150 px for both the height and the width. Now, whenever I click anywhere on the image, the selection box (or circle) will be exactly 150x150.

From there, I just resize the image (Image > Image Size...) and click with the marquee tool set to 150x150. NOTE: After clicking to create the selection box, you can move it around by clicking & holding inside the box and dragging it around. If the part of the image inside the selection box is still to big, I just keep resizing and recreating the selection box until it looks good. Then I just copy the selection (Ctrl+C), create a new file (Ctrl+N) and paste the selection (Ctrl+V).

source: JoePlay

Custom Fonts
Looking for a unique custom font? Try the following resources:
 * dafont
 * free text effects
 * 1001freefonts, tutorials

source: JoePlay