Metallic

This is for my battle with `pica-ae over at #theEpics
Media: JOURNAL (design and css)
Theme: Metal
Limits: only one image file.

To make it interesting we decided to only use one image file. I had originally decided to make a sprite sheet of the screws and fancy buttons but I really wanted to use that perforated metal texture for the featured section so I pushed a little harder and made the screws etc using css

If I had to rate the ease of this journal it would be a medium... Everything is really easy but because it involves math for the header links I bumped it up.

Header Explanation - Easy:
After you install and enable the skin edit the skin so you can adjust the header section. There are 5 premade header links that you can adjust the links and text to suit your needs. You can label them anything you want and link them to anywhere you wish. If you wish to add more links please read the "medium" section below for more assistance.

Header Explanation - Medium:
If you wish to add more than the 5 premade links you will need to add the following html in the header before the last list item labeled "last":
<li><a href="http://URL">More...</a></li>
Once you've added another link however the css wont display the bar properly so there's one more thing you need to do. Scroll through the CSS part of the journal and look for ".links li a{". Because the width of that bar is set to 100% and there are originally 5 buttons the width is set to 20% for each of them. If you add more you will need to adjust the widths percentage to account for the extra link. With the width of most browsers though I wouldn't make too many more links. I've supplied the percentages for up to 8 below, but beware if they are small the links wont be legible.

6 links = 16.66%
7 links = 14.28%
8 links = 12.5%

Once you've edited the html and css you can save for later use and write as you normally would. For other code to use for headers and the featured section in the journal itself use the code below:

<div class="head">Raised Header Text</div> -or-
<div class="head2">Inset Header Text</div>

Long line break: <hr>

<div class="feature">Feature Title
:thumb: :thumb: :thumb:
</div>

Long description is long ... sorry about that. As always, any questions feel free to ask :)
Live Preview