ikazon on DeviantArthttps://www.deviantart.com/ikazon/art/Green-Minimal-Journal-Design-313705074ikazon

Deviation Actions

ikazon's avatar

Green Minimal Journal Design

By
Published:
654 Views

Description

This is an old favorite! (An old favorite of mine, not necessarily anyone else's...) When I first made this, it was a test to see what I could do without using any images in the design, and this was the end result! The tricky part was the bullet list, but it eventually worked for me, and I'm still pleased with how it turned out.

For downloading, the file included is a text file, the skin itself does not require any images. Here's what you need to know for the actual code: the HTML for two of the functions gets kind of complicated, so here's a brief overview.

Headers: To get a header, just type <div class="header">Your header text goes here</div>

Bullet points: This is a bit more complicated. To use the bullet points, you have to have three sets of
tags, in this order:

<div class="box"> = Without this div class, the bullet points won't overflow into a scroll box, and then it'll look like a gigantic mess.

<div class="dot"> = Without this div class, the bullet points won't show up...

<div class="e"></div> = After all that, the "e" is what makes the bullet point show up. Thankfully, you don't need any text to go in this div, you just need to properly close the tag.

So, after all that, it should look like this:

<div class="box"><div class="dot"><div class="e"></div> Your bullet point text goes here!
<div class="e"></div> Want a new bullet point? Hit enter and put the "e" code in.
<div class="e"></div> Do it again, if you feel so inclined!</div></div>

Now, you can have as many or as few bullet points as you want, but if you have less than five bullet points there will be a gap of white space. Regardless, you MUST put at the end of your last bullet point to close the dot and box divs. If you don't, the journal will bork. A lot.

The feature table:
The feature table was coded by `thespook, and you can find the details of its function as well as the code and how to use it here. If, however, you don't want to read that and would rather just have the template for using the table...here you go.

<dl><dt>description goes in these DT tags. <em>:iconusername:</em></dt>
<dd>:thumb#####: :thumb#####: :thumb#####: </dd></dl>
Image size
692x947px 93.81 KB
© 2012 - 2024 ikazon
Comments16
Join the community to add your comment. Already a deviant? Log In
mishihime's avatar
I'm a fan of minimal designs. Nicely done.