Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:iconginkgografix: More from ginkgografix


More from deviantART



Details

Submitted on
December 19, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
2,460 (3 today)
Favourites
96 (who?)
Comments
51
×

Starting with dA CSS

Wed Dec 19, 2012, 9:15 AM
Back when CSS was allowed for journals for the first time there had been only a few deviants like ClaireJones, Lilyas or kuschelirmel-stock who provided free skins for everyone. Through the time more and more people enjoyed working on CSS skins and we also got the chance to skin our galleries.

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.



:heart: by nirman General

:pointr: Where can you use CSS/HTML
On 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.

:pointr: Restrictions
No 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 :nod:
:bulletgreen: :bulletgreen: Requirements
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 you :la: Many other people have done this before, awesome people like Ikue, thespook or ginkgografix, and now it's me too :giggle:
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 :lol:
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



:heart: by nirman Differences between Installable and Downloadable Skins

On 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!
:bulletgreen: 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:
:thumb1553144





:heart: by nirman 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
:bulletgreen: 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.

:bulletred: if they mention that they don’t want you to modify the skins they offer, don’t do it.
:bulletred: 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&




:heart: by nirman Resources to get started

If 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.
.:Ungruze your journals by ginkgografix Old vs Gruze Journals by ginkgografix ABC of dA CSS - Part 1 by ginkgografix ABC of dA CSS - Part 2 by ginkgografix .:Common Mistakes by ginkgografix .:Gallery Structure by ginkgografix .:Gallery Structure: Big Thumbs by ginkgografix

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



:heart: by nirman CSS related Groups

These 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.

:iconecssited: :icondeviantcss: :iconiterators:
:iconjournalskin: :iconcss-babes: :iconjournalcss: :iconmastercss:





A general guide for those that want to give CSS coding on dA a try.
Add a Comment:
 
:iconshadowflashdabearded:
Shadowflashdabearded Featured By Owner Apr 4, 2013
Appreciate it
Reply
:icongreymoccasin:
GreyMoccasin Featured By Owner Mar 4, 2013
From those of us who are perpetually
CSS mesmerised and confounded, we
salute you! :rose:
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 4, 2013
:hug:
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 3, 2013  Hobbyist General Artist
Always good to mention the respect for CSS community here. Since people seem to not regard the coding as intellectual property. And that all coders may have different permissions, or even different rules for various skins.

I have had people ask if they can have the code for someone else's commission. Which will get an emphatic no from me. If they want a commission, that is one thing, but not someone else's commission. That'd be like asking for a painting of someone else's baby. :lmao:

Great resources. Great article. :)
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 4, 2013
I think it's something that can't be mentioned often enough. Especially to younger people and those new to CSS.

A while ago i was constantly contacted by someone to help them fixing things. After a while i figured out that all the stuff was for commission. Told the person, that if they offer commissios they should be able to provide what they offer on their own, not always just with help of others. It's ok to ask every now or then, but not all the time.

Thanks!
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 4, 2013  Hobbyist General Artist
Yikes, that is crazy. I would never offer commission for something I couldn't do 100%, or at least make sure my client is aware of my expertise. Examples, etc. I didn't take gallery commissions for a long time until I learned their new codes and was confident enough that I could produce a satisfactory skin for it. I barely take art commissions. But that is mostly because people do not seem to realize they need to see what I am capable of and what my style is before they expect something completely different. Though I have no problem working in different styles and mediums, they are going to be fully aware that it is new to me.
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 6, 2013
Yeah, that's how things normally should be. If you can't do it, don't offer it as a service. But i guess mostly younger people aren't aware of that and just hope to get a little extra money/points that way.

Art commissions is something i rarely do, especially as this can be extremely art to please someone with your personal style. If they have something special in mind and you aren't able to visualize it then it will be a neverending task.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 6, 2013  Hobbyist General Artist
Yup, and we aren't art slaves ;P My bf was recently working on a commission for over a month that was supposed to be a two week project. The kid kept saying 'make it nice' and 'yea, that's good but make it better'... These type of directions do not help artists at all. Nice, better, good... Everyone has different definitions. And all the examples he showed him were different than what he was asking to have him do. He ended up redesigning it 3 times. Then the kid never paid him, so he never delivered the work.

So that was a month he could have been working on official skins for the site he freelances for. He's not going to take more commissions for a while.

I'm lucky so far, everyone who has commissioned me is usually happy with the first idea I come up with. My bf says that is because they are all women and much better at saying what they want. lols. Guys ask for something cool and epic. Girls say I want this, this and this. Guess it is kinda true :lmao: What is your experience?
Reply
:iconginkgografix:
ginkgografix Featured By Owner Mar 6, 2013
Hm, happened to me with male and female commissioner. I guess it's more a matter of how serious they are and if they really know what they want themselves. My latest website took 11months from start to finish. Mainly because it was an issue of "move that bit from here to there", naw change it back and change things over there etc.

I always tell people right away that they should really think about what they want and what it should be for. Or i give them a direction of what is possible. Luckily those that want websites are much more serious, than those who want "just" journal skins etc.
Worst case is, if people tell you "but you usually do such great things, this still doesn't look as great" :p They don't realize that each day is different and that something that works on a different design, does not automatically work for their ideas as well.

So it's nothing i would generalize, it's always a very special problem.
Reply
:icongillianivy:
GillianIvy Featured By Owner Mar 6, 2013  Hobbyist General Artist
:nod: One reason I like to try to make a mock up. That way they have an idea how it is going to look. Though, I am inconsistent with that and if we pretty much agreed on a design I just do it. :B
Reply
Add a Comment: