How to upload a journal template

So while browsing the journal related galleries, I figured out that there are several things that happen again and again… and people start to wonder why things don’t work right or people don’t use their templates.
That’s why I am going to try to explain some basic things you should keep in mind when publishing your templates.

Ready? Let’s go!

---

Making a preview

Before you are going to upload anything you have to write your code – obviously. After that part is done, you should make a preview of your template. Either use the initial graphic layout you have created or make a screenshot of the working journal.
The first thing is quite easy. You just need to save your journal layout as a jpg or png. For the screenshot hit the “print screen” key on your keyboard and paste the content to any graphic program. Cut out the needed journal part and save it as a jpg or a png as well.


Some example with a good preview:
  



Why you should make a preview?
When people are browsing the journal galleries the preview is all they see of your skin. If you are using a preview that shows everything of your journal the chances that people will use it are higher because they already know what your journal will look like.

In case you just use the background image as a preview, people have to guess what it could look like or they have to test install it to see if they like it – most of the time people will ignore your template then.


_{The following tutorials are general screenshot tutorials, but should be helpful though. Instead of submitting it to the screenshot gallery, read more about submitting below.}
  




At this point you should decide if you want to use add your code as a “Journal Skin” or a “Complete Journal CSS”.
The “Journal Skin” will give other people the chance to use your templates with a few clicks only, while they have to install everything manually when you are going to use the “Complete Journal CSS” category.

Upload as a Journal Skin

Using the new install option for deviantART journals makes it pretty easy for other people to use the template. However it is a bit more work to upload those skins.

:thumb145221679:


One thing you have to keep in mind is, that when you have prepared your code to be a “Journal Skin” you shouldn’t upload it to the “Complete Journal CSS” gallery.
Once you hit the “How to” button and save the given code as a .txt file, you should only use it for uploading it as a skin.
The reason is that there will be additional information in the code that allows to add code to the CSS, Skin Header and Skin Footer form and will be able to differ between them.
If you use a CSS code with those snippets and upload it as a “Complete Journal CSS” it will just cause errors for anyone that will use the code.

In case you are unsure if your CSS code is such a “Journal Skin” code, open the CSS file and check for  type="text/css"> at the top. If it is there, then there will be some more similar code at the bottom as well and it is a “Journal Skin”. If you can’t find any of those bits, then you should upload it as a “Complete Journal CSS” or follow the instructions of the given tutorials.

If you have used any additional code for the content area add those code snippets to the description of your “Journal Skin” otherwise people won’t know how to add extra features.


The Journal Skin gallery: browse.deviantart.com/darelate…

Upload as a Complete Journal CSS

If you decide that you want to upload your template as a “Complete Journal CSS” there are several ways to do so.

The most used way is to prepare a zip-file that contains everything someone else will need to use the template. Means to that file should be all images, the whole HTML and CSS code and maybe some instructions added. Those instructions should be easy to understand and tell people how they have to use your code. And you should highlight the different code snippets for the content area, as well as for Skin Header and Skin Footer to avoid confusion.

Another way to make your code available for usage and if you don’t use any images or already have them hosted somewhere is to just add a HTML or txt file.
The code will then appear directly under the preview image, so that people just have to copy and paste it.

_{Sadly there aren’t any tutorials for this way to add a template yet.}


The Complete Journal CSS gallery:  browse.deviantart.com/darelate…

---

I hope that this helps some of you a bit and also makes you understand why you should use a real preview image of your template.

Other useful CSS related news articles by me:
Permission to use CSS skins needed? news.deviantart.com/article/96…
Journal/Gallery templates – A Guideline news.deviantart.com/article/85…



This news article was brought to you by your local CSS Fairy