Yu's Precious Journal Skin - info and live preview

6 min read

Deviation Actions

Minakie's avatar
By
Minakie
Published:
1.3K Views




Get this journal skin here.

I made a suggestion on the forums for us to be able to change the scrollbar's color. You can find it here.

You can add a tittle like this one by writing <h1> and then closing it with </h1> at the end of the tittle.



The links shown on the link area on the top are preview samples and are not finished, you'll have to edit the code yourself, by changing USERNAME with your username, USERNUMBER with your user id number (find how to get it here) and NOTEURL with a link to your notes (find how to get it here). You can also change those links with your own.

Now let's learn how to add one of those customized dividers.



These dividers have a transparent background, so that you can use them anywhere in your journal, as will be shown bellow. All you need is to add  <hr> to your text.


You can also type your text inside a box if you need one (for stamps, art features...), by typing <div class="scroll-boxdark"<p> on your journal.

This box's height is 150 pixels but you can try making it bigger or smaller by changing the height on the coding if you know how to do it.

Now, let's add another divider for you to see what it looks like inside the scrollbox.



At this point, don't forget to close the scroll-box code with </div>.



And, again, you can add more text here.


This lighter scroll-box can be added by typing <div class="scroll-boxlight"<p> and it's also 150 pixels high like the lighter one.

pixel cherubs playing trumpets by Minakie
You can also align an image's thumbnail left or right of your text and make it circle the image either with <div class="float-left">:thumbxxxxx:</div> or <div class="float-right">:thumbxxxxx:</div>.


pixel cherubs playing trumpets by Minakie

And you can make that thumbnail a bit bigger to suit your needs by writing <:bigthumbxxxxx:> instead of just <:thumbxxxxx:>.

Again, don't forget to close the dark scroll-box code with </div>.



Yeah, you guessed it, you can add more text here.


You can use the code <div class="darkbox"> to create a darker green rounded box to add a P.S. or whatever else you want to set apart from the box.

Again, let's add another divider for you to see what it looks like inside the darker box.


And, once again, don't forget to close the box's code with </div>.



You can use this area for your mood status, things you're currently working on or whatever pleases you.

  • These useful bullets can be added by typing <li>. They have a transparent background, just like the dividers, which means they can also be used anywhere on your journal.

  • You can repeat as many times as you want if you are making a list.

  • Type </li> at the end of each topic/sentence.


Remember, you must not remove the journal credit found bellow.


journal design, coding and Yu © Minakie
© 2012 - 2024 Minakie
Comments0
Join the community to add your comment. Already a deviant? Log In