Just now (Monday 05, 2013 / 02:51 AM CEST) I included a fix for the link display in the journal skin. Everyone who downloaded it before said date should donwload the skin again. It's not world-shattering if you're okay with it or don't have any problems. But if you do, here it is. Everyone having installed this skin after said date is in the green since, as I said, I updated the source code.
Thanks to *ParisWriter
for pointing it out, and a ton of thanks to `GillianIvy
, who told me where I would find that evil piece of code miscreant.
Thanks so much for the DD!
First off, some thanks are in order:
I want to thank Kiam
who has taught me a great deal about coding.
I also want to thank =SimplySilent
who provide a lot of darn helpful resources for free, including skins, tutorials, and answering some questions.
A "Yay!" for Google Webfonts. Just saying. I'm using a bit of Windows's Cambria, but mostly Google's Bitter
You may install it, of course - that's what it is here for, after all - you may use it, and naturally you'll have to change it to suit your liking. All I ask is that, if you should like and install it
, that you may
it and maybe leave a comment. Please do not re-upload this journal skin, remove the credits, or hijack the codes or graphics. I thank you in advance.
HOW TO USE/HOW TO CUSTOMIZE
==> THE DROPDOWN MENU
You will find the necessary code in the header area.
<div class="menu">The Warden-Commander's Cache
is the heading of the dropdown menu. You can change it to whatever you like, just make sure to choose a title that is not longer than the background image. After that, there comes a
container that contains the links. A link contains of the actual link and a link description. For example, if you want to link to your profile page, change the #
container and leave My Profile
as it is. You could also instead link to your Twitter account, or your website, and change #
and My Profile
accordingly. The same goes for the rest of the links. Just make sure to keep the
container intact and you can add and remove and change almost as many links as your heart desires. Refrain from removing any other code, like the stupidheader, which is, in fact, the header image.
==> THE LISTS
You should be familiar with those. All I did was change their appearance a little. If not, refer to this here page: FAQ #104: What HTML formatting can we use on deviantART? And what is the format for these codes?
==> THE HEADINGS, WITH AND WITHOUT BACKGROUND
For the non-capitalized, non-background heading:
<div class="title1">YOUR TEXT</div>
If you want it centered, go with this:
<div class="title1" align="center">YOUR TEXT</div>
For the capitalized, non-background heading:
<div class="title2">YOUR TEXT</div>
<div class="title2" align="center">YOUR TEXT</div>
For the left-aligned heading with background (tbg1):
<div class="tbg1">YOUR TEXT</div>
You know how to align your text in case you want to.
For tbg2 (always centered):
<div class="tbg2">YOUR TEXT</div>
For tbg3 (always centered):
<div class="tbg3">YOUR TEXT</div>
For tbg4 (always centered):
<div class="tbg4">YOUR TEXT</div>
For tbg5 (always centered):
<div class="tbg5">YOUR TEXT</div>
==> THE BLOCKQUOTES
These here beauties consist of two elements: a div container as well as a span container. The div is the overall container containing quote and span container, while the span should hold the quote's author's name or really whatever. Use the blockquotes as you see fit. So, the blockquote is an already existing feature I punked up a tad (See the above linked FAQ entry). BUT you have, as I said, the option to wedge a span container between it. Whatever I do, it keeps formatting the blockquote, I added a * to it. DELETE THE STAR BEFORE USE, because if you keep the *, the blockquote won't work.
For the 100% blockquote:
<*blockquote>"THE QUOTE."<span>QUOTE AUTHOR</span></blockquote>
For the 40% right-aligned blockquote:
<*blockquote class="right">"THE QUOTE."<span>QUOTE AUTHOR</span></blockquote>
For the 40% left-aligned blockquote:
<*blockquote class="left">"THE QUOTE."<span>QUOTE AUTHOR</span></blockquote>
==> JOURNAL COLUMNS
For the two columns:
<div class="halve">YOUR TEXT COLUMN ONE</div><div class="halve">YOUR TEXT COLUMN TWO</div><div class="clear"></div>
For the three columns:
<div class="trisect">YOUR TEXT COLUMN ONE</div><div class="trisect">YOUR TEXT COLUMN TWO</div><div class="trisect">YOUR TEXT COLUMN THREE</div><div class="clear"></div>
to the end of the columns is imperative to avoid ugly graphical errors. Don't forget to put it, and don't place a space between any of it.
==> IMAGE AND LITERATURE THUMBS
This is easy, because you don't actually have to do anything except for using the thumb link. Each deviation provides such a thumb. Put the code in and let the magic happen. I do advise you, though, not to put more than three images or pieces of literature in one line.
Under Deviation Linking
: FAQ #81: How can I create links to other deviants, deviations, or websites?
==> THE SCROLL BOXES
The minimum height of the scroll boxes are 100px, so if you're below 100px, there won't be a scroll bar.
Dark font, light background:
<div class="scrollbar1">YOUR TEXT</div>
Light font, dark background:
<div class="scrollbar2">YOUR TEXT</div>
==> FINALLY, THE TWO DECO DIVIDER LINES
For the one I've been using mostly in the preview:
For the red-ish one:
And that's it! Have fun and enjoy, my devious friends.