These days, and thanks to the great resources about journal and gallery CSS that have been created, it is possible for nearly everyone to code their own skins and/or to share them with others. Still there are many people who struggle with some basic things, which is why we want to focus on some of them here.
General
Where can you use CSS/HTMLOn deviantART you can only use HTML and CSS on your journals, group blogs, your custom gallery folders, as well as your groups' galleries.
When you customize your profile widgets you can't add CSS or HTML like you can for journals/galleries. All you can do is using existing dA code that can be re-used in a way to make it look like a bit more personal. The only exception here is a custom background.
What you should keep in mind is, that this is not officially supported by dA. It’s more like a handy 'bug'.
That’s why it is not possible to add scroll boxes (as I get that question quite often) or anything else that requires additional HTML code.
RestrictionsNo matter if you code for a journal or a gallery there will be restrictions. The most common properties work fine, but don’t expect the latest CSS/HTML additions to be available right away. Additionally a lot of properties don’t get supported for journals/gallery yet.
For example:
- custom web fonts don’t work for galleries, but they work for journals
- text rotation or CSS transition is not available
It is also important to keep in mind that if you work on a skin that you have no idea who is seeing/using it and what their settings are.
CSS3 is all brand new and everyone loves the new features, but even the best feature doesn’t help if it’s not supported by the browsers people use. In worst case you style a great skin, but half of the people can’t see the actual content, because it only works when all properties are supported. Even if it means you have to make compromises, it is often better than to create the most fancy skin ever that will be ignored because it is pretty much useless.
The resolution is something you should keep in mind as well. A few years ago a resolution of 1024*768px was used the most, still you had to keep people in mind with smaller screens. These days most have rather big screens or maybe a dual-screen setup, so the resolution is pretty big, but what about those with a tablet pc or just a smartphone? Think of those as well. Don’t make your journal too wide or too narrow and try to make the important content available for all of them.
Journal/Gallery templates - A GuidelineEven though the CSS features was enabled a long time ago, it seems that there are still a lot of people who are struggling with templates – no matter in which way.
And with every new upgrade the confusion increases a bit more. That’s why I tried to put together the most important information for the feature everyone wants to use, but sadly can’t due to lacking knowledge or missing requirements.
If I missed to explain something in this news article and/or you have a certain question, feel free to leave a comment or even better write a note
Before you even can think about using CSS for your gallery or journal, you should make sure that you able to make use of that feature.
A lot of people – especially since the release of the install feature – are asking me, why they can’t use my templates.
The answer is pretty much simple. As a regular member you need to have a subscription / Premium Membership. Wh
CSS Tricks: Limiting .text widthHello!
Today I wanted to share a little CSS Trick with youMany other people have done this before, awesome people like Ikue, nichtgraveyet or GinkgoWerkstatt, and now it's me too
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long
All about improving Readability!
When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may even get a
Differences between Installable and Downloadable SkinsOn deviantART you have two possibilities to share your skin: as installable or as a downloadable skin.
The first is only available for journal skins with a special structure and saved as .txt files.
That structure is needed to apply the CSS code and the optional Skin Header / Skin Footer elements at the right places once a deviant installs them. Images you have used within your skin will be added to dA during the submission process. This will avoid that people have to add them manually and host them on their own. Before you upload your journal as an installable skin, make sure that it is flawless as you are quite restricted when it comes to making changes at a later time. Means you can only do minor changes. For example you won't be able to add additional code and the images need to have the exact size like before.
Installable skins are mostly used to share journal skins these days because for the person who wants to use them it is an easy and fast way to have them ready for usage.
Gallery skins or packs that include a journal and gallery skin can not be shared like that. To share those you need to upload the needed files either as a compressed file (like .zip or .rar) or need to provide the code and images in any other way.
Images you have used won't get hosted by deviantART, so if you don’t offer this service and already host the images somewhere any deviant that wants to use the skins needs to host them somewhere as well.
As not every deviant is used to HTML/CSS and how it works it is recommend to always give instructions for those skins. Either in the description or as part of the compressed file.
In the end it doesn’t matter in which way you share your skins, you should just choose the one that makes the most sense.
Additionally to that you should be aware that if you create personal/commissioned journals and add them as installable ones, chances are high that more than just the person paying you for it will use it.
How to upload a journal templateSo 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!
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:
:thumb1553144
A custom/free Skin - what does it mean?When you browse through the deviantART related category you can find plenty of journal and gallery skins. While not everything you see is something you like, there will be still a lot of skins you either want to use for your own account or that inspire you to create something new.
But before you go on with that, you always should take a closer look at the deviation, especially the description. In some cases a deviant already mentions in the title if a skin is for free or not.
If it is not for free, keep your fingers off of it. Even if the code is available for you. Just don’t use it. It’s a matter of respect towards the person who requested or paid for this journal to not use it. Or would you want to have something personal to be used by others?
If a skin is available for free, you can go on and use it. However most people that share their CSS skins with you have rules as well. Read them and make sure you understand them.
Just because it is there for you to be used, it doesn’t mean you can do everything you want with it. Using it for your gallery or journal is perfectly fine though.
But
if they mention that you can re-use them in any way you want, do it. But maybe be thankful enough to give credit to the original source if you create something new with the help of it.
if they mention that they don’t want you to modify the skins they offer, don’t do it. if they mention that they don’t want you to use the code or images in any way, don’t do it.From my own experience I can tell you that if you redistribute a skin or parts of it in any way, it is just a matter of (not so much) time until someone will find out. The easiest way to avoid drama is to get in contact with the original creator in case you need special permissions before you use anything. The CSS community is very friendly and willing to help, but only as long as you respect its members.
Journal Skins - When will code be yours?A while ago it happened that i saw a journal skin that looked very familiar to one of mine. After checking the code i realized that it was my journal skin and only images have been replaced.
Because of that and after writing a journal to remind people that it isn't right to do something like that, i was asked when someone can call a journal code their own.
First i wanted to give an explanation via reply, but after thinking about it i realized that this can't be answered easily and should be available for more than one person to read (and to be found later again easily as well).
That's why i asked my watchers and maybe random guests who visit me to tell me when they would consider a journal as their own or when someone could claim such as own code.
To avoid that the answer to that question will reflect just my opinion i will highlight a few opinions from the feedback i got after stating my own point of view on this matter as well.
For those of you who already used a install skin to crea
Free Journal Skins - What does that mean?This news article has nothing to do with me being a Gallery Moderator, but based on my own experiences I know that this is a serious issue that causes frustrations and anger quite often. So this news article is mainly about two things: respect and fair behaviour.
I guess every member of deviantART who owns a Premium Membership has used a free journal skin at least once in their dA life, right?
They make your journals look more personal and attractive. It's a nice feature that everyone likes to take advantage of and the best, it is for free – the skins (not the Premium Membership ;)).
To use a skin all you have to do is to click that install button, agree to the terms that pop up and then you can start using that fancy new layout you just found. It's really easy and if that template doesn't fit your needs 100% you can make modifications to it and be happy.
In some cases it is not enough for people, they want to share their new creations because people like what they have ma
Permission to use CSS skins needed?Recently I get a lot of notes or comments where people ask me for permission to use my journal templates. And I’m sure I’m not the only one.
First I was confused why people do that, but then I figured out that they might get confused by something like this in any description of a template/skin:
You need to have a Premium Account or to be a staff member/volunteer to use this.
Some still don’t know what the requirement for the CSS feature is and that’s why they think that, if they don’t belong to the ones listed above, they have to ask to use it. That is wrong!
Everyone who submits a template to the “Journal Skin” or “Complete Journal CSS” gallery offers their templates for free. Some might have some rules for usage, but still they are all for free use – unless there is some kind of hint, that you have to pay for it. But then you won’t have access to any CSS code.
If&
Resources to get startedIf you want to start coding your own journal or gallery skins it is mandatory that you understand basic CSS. You can always look it up, but you should know how it works, what the syntax looks like and what default classes dA uses.
There are plenty of resources on dA and elsewhere on the web that explain CSS to you. However those at dA are more specialized towards journal/gallery CSS in most cases, so I would stick to those for the first steps.
As always: start simple. I know that it can be boring, but you will do yourself a favour if you start with things like changing the background or font color only. Get used to that and explore more from there.
Here are a few of my own tutorials, more can be found at the groups mentioned below.
There is also a “CSS Did You Know?” series by bradleysays you should take a look at. It shares a lot of different helpful tricks and tips.
Presentation + Custom Boxes; Selectors + Advanced CSS 3D buttons; Linear Gradients + Custom Boxes; Linear Gradient + Styling; Drowpdown Menus (non dA) + Resources; Vertically Aligning thumbs; CSS is copyright too + Replacing images with CSS
CSS related GroupsThese are some of the groups that focus on CSS. Some just feature journal and gallery skins, while some other also offer resources about CSS customization on dA.
