Applying the custom divs in your journal
This is the part that may confuse some people without actually being told what to do. This will give you a rough idea of how to use the divs I've provided in my template. Just reading this should give you a good idea of how to create your own.
.journalbox .journaltext .jcustom {
margin: 0px 5px 0px 5px !important;
background-color: #------ !important;
color: #------ !important;
font-size: 11px !important;
padding: 15px 15px 15px 15px !important;
display: block !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-color: #------ !important;
width: auto !important;
}
That is our div for the 'section box' as I like to call them. Just check out this screenshot below on the test journal I did using the same CSS I've provided:
As you can see, there are three differences in the content. The darker background is the main content of your journal. The lighter grey is the custom div I explained above, and the darker grey inside this one is the second div, as shown below.
.journalbox .journaltext .titles {
font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
color: #------ !important;
text-align: center !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-color: #------ !important;
background-color: #------ !important;
width: auto !important;
}
So, how does one get it to display like this? Quite easily. If you've been using deviantART journals for a while, you will know how to align your text using <div align="center">textext</div>, for example. Using the custom divs works in pretty much the same way, only using class instead of align.
Use something like below. I've put it into a 'tree' type of order, to make more sense of it:
<div class="jcustom">
<div class="titles">Your Title Here</div>
The text that will be displayed in the first div will go here. Eg, if you were talking about your cat, put all the text and ramblings here.
</div>
As you can see, we have a div class inside another div class. When writing your journal, you don't have to format it in the way I did above, but you can do it like this:
<div class="jcustom"><div class="titles">Your Title Here</div>
The text that will be displayed in the first div will go here. Eg, if you were talking about your cat, put all the text and ramblings here.</div>
Each time you want a new box around your content, just do it all over again. Just remember to close the div classes with </div> when you want a box to finish.
Also, remember that in my template, the custom divs have the names .jcustom (the main box around the content) and .titles (the box around the title within the main content box). You don't have to use these for class names. In my own journal CSS, one is for example .nycustom and I have another one for the links the top of my journal which is simply .links.
Also, my template has used a 'long way' for custom divs, to keep the journal structure (this is for beginners afterall), but it can be shorted to something like this if you want to change it and keep it simple:
div.jcustom {
margin: 0px 5px 0px 5px !important;
background-color: #------ !important;
color: #------ !important;
font-size: 11px !important;
padding: 15px 15px 15px 15px !important;
display: block !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-color: #------ !important;
width: auto !important;
}
It works both ways, so it's up to you whether you want to keep using the longer version or use the shortened div.jcustom / div.titles.
If you're still not sure or understand, feel free to ask any questions on the deviation page where you downloaded this tutorial. I'd be happy to answer them or help out. Alternatively, you can just keep reading until you get that "Ohh, I get it". ;)
Oh and if you're wondering what your journal will look like (with the exception of colours), it will look something like below:
