Shop Mobile More Submit  Join Login


Submitted on
February 19, 2011
File Size
10.3 KB


99 (who?)
Metallic by Ikue Metallic by Ikue
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 :B

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:

Long description is long :faint:... sorry about that. As always, any questions feel free to ask :)
Live Preview
Add a Comment:
pawcanada Featured By Owner Feb 4, 2014  Hobbyist Traditional Artist
I love this design. Thanks for making it :D
Ikue Featured By Owner Feb 5, 2014  Hobbyist Digital Artist
My Pleasure! ^^
Deacon-Blues-83 Featured By Owner Jun 11, 2013
Wow ,
I really think this is very beautifully done.
I love the subtle coloring .
The style is so clean and crisp . Excellent work !:iconpceplz:
Ikue Featured By Owner Jun 13, 2013  Hobbyist Digital Artist
Thanks so much! :D
Deacon-Blues-83 Featured By Owner Jun 13, 2013
:icontuxedoplz: You're very welcome!!

And Thank You ~ I love it.:giggle:
DamonWakes Featured By Owner Jan 1, 2013   Writer
This looks like a nice, subtle skin! :-) I'll definitely give it a try.
Tarantulakid96 Featured By Owner Dec 17, 2012  Hobbyist Digital Artist
Awesome, I'm totally using this! :dummy:
Ikue Featured By Owner Dec 19, 2012  Hobbyist Digital Artist
miontre Featured By Owner Apr 25, 2012  Hobbyist Photographer
Wow. :noes:
This is pretty amazing!
Ikue Featured By Owner Apr 26, 2012  Hobbyist Digital Artist
Add a Comment: