User blog:Matt Hadick/Wikia Gothic Community Takeover

Does your Wikia community have a dark side? Here's your chance to show it off and win in our Gothic Community Takeover. We're going Gothic in anticipation of the upcoming movie, I, Frankenstein, and all Wikia communities are invited to get in on the action with a theme-appropriate redesign showing off your dark side. The best Gothic design will receive special recognition on Wikia's Entertainment home page, and on social media!

What exactly can you do? Create a custom skin (one with a gothic tone that also captures the spirit of your community), choose an appropriate font, make a dark wordmark, and add any gothic-inspired other elements that your community is feeling (gargoyles, demons, the full moon, fog, you get the idea).

You'll have until 1/20 to create the design -- it should launch then and run until 1/25. We'll post a list of participating communities here, and on 1/24 we'll announce the winner!''' You must post in the comments on this page to let us know if your community plans to participate! And let us know if you have any questions in the comments as well.'''

Check out Moviepedia for some gothic inspiration, and view the how-to tips below.

The minor changes made to Moviepedia are just a simple example, but in case you're interested in learning:

Adding a custom font to your wiki
@import url(http://fonts.googleapis.com/css?family=Tulpen+One); @import "http://fonts.googleapis.com/css?family=Tulpen+One";
 * 1) Navigate to http://www.google.com/fonts and find a font you like. (The example font I've selected is "Tulpen One")
 * 2) To the right of the font's text example, you will see two icons next to the "Remove from Collection" button. You'll need to click the "Quick-use" icon, which looks like a box with a right-arrow in it. Gfreefonts_quickuse_icon_003.jpg
 * 3) Now scroll down the page to "3. Add this code to your website:" and click on the "@import" tab.
 * 4) Highlight and Copy the displayed text - which should look something like this:
 * 1) Now navigate to the MediaWiki:Wikia.css page for your wiki (EXAMPLE: movies.wikia.com/wiki/MediaWiki:Wikia.css), and click "Edit."
 * 2) Being careful not to interfere with any existing code, paste the copied text onto a blank line, and make the following important changes: Replace the parentheses with quotes " " and remove "url" so that the line of code now looks like this:
 * 1) Make sure everything looks correct, and click "Publish" to save your edit.

Sometimes the system will take a short while to process this change, but you should now be able to display your custom font by using the standard font-family: variable as seen here:

Changing the global navigation font on your wiki
One of the tricks your new custom font can be used for is customizing your wiki's global (top) navigation menu, as we've done here on this wiki. The easiest way to do this is to enter this simple piece of code to your wiki's MediaWiki:Wikia.css page:  .WikiHeader { font-family: 'Tulpen One'; }

This is the same .css page referred to in the custom font section above, again using "Tulpen One" as the example custom font. In some cases (as with Tulpen One) it may be necessary to change the font size, since different fonts may appear smaller or larger than the default Wikia font. In order to do this, the following three sets of code are needed for the three menu levels:

Level 1
 .WikiHeader > nav li { font-size: 36px; }

Level 2
 .WikiHeader > nav .subnav-2 li { font-size: 24px; }

Level 3
 .WikiHeader > nav .subnav-3 li a { font-size: 24px; }

Often times the font will not need to be re-sized, but if it does, this is the adjustment.

Have fun, and don't be afraid to get creative!