From FatWreckWiki
So, you wanna create a skin, huh?
Here are some basic instructions and the files necessary for you to create a customized skin for the wiki. Why would you do this? Well, each band, ideally would have its own theme. So, we need one for that, but also, if someone thinks they could make something else great for a band, make it and send it to us. A basic knowledge of CSS will be useful. We'll consider all submissions for live use on the Fat Wreck Wiki.
Instructions
Step 1.
- Choose a band. Our Bands page should have a complete list of Fat Bands for you to choose from. If there is a band that you notice is missing (we just used the current roster from the site) then post it on the discussion part of the Bands page.
Step 2.
- Download the skin package zip file. Extract it wherever you want.
- Open up
Skinning.html in a web browser, and you'll see a sample FatWreckWiki page (just a local copy that's on your computer).
- In the package, there's also a folder named
newskin. All of the changes that you're going to make must be made to the files in this folder. The other two folders (fatwreckwiki and images) are just there to display the page on your computer properly.
- In the
newskin folder is a file named namespacestyle.css. This is the CSS file that is imported last by the main page and therefore you can override/change everything in this file.
- A good first step is to delete the two lines that say:
uncomment/delete this line to get this file working as an example. After doing this, if you refresh Skinning.html in your browser, you will see that the wiki now has a new skin. All of the changes that happened there were done in the namespacestyle.css file.
Step 3.
- Edit the
namespacestyle.css file according to how you want the page to look. It would be nice (and there will be a better chance that your skin will actually be used) if you don't change any width or height values for the page itself. We want to keep a certain uniformity for all skins. You could go with the following order:
- Change the
skin.jpg graphic. This file represents the background image.
- Change the
default.jpg graphic. This file is the header displayed above the content part of the page. Please don't put the Fat Wreck Wiki logo in this graphic because that logo is on a different layer and will be put over the default.jpg later.
- Back in the
namespacestyle.css file, adjust where the logo is put over the default.jpg by changing the css for the #p-logo div like it is done in the example.
- Set the import for the border images. Change the line in the import statement to one of the css files in the subfolders of the
fatwreckwiki/styles/ folder like it is done in the example. With this import statement, you are defining the images to be used for the borders around the content of the page. There are a few different colored images already in the styles folder but it's also possible to make your own set of border graphics by copying one of those folders (e.g. gumax_grey) to the newskin folder and modifying the included images. Then you would have to link the import statement to the css file in the newly created folder.
Step 4.
- Zip up the updated newskin folder and email it to us at skins@fatwreckwiki.com. Let us know what band you intend the skin to be used for. All submissions will be considered, but we make no guarantees that your file will be used.
Skin Package
FWWSkinPackage.zip
