List of the tutorials so far
Learn how to limit the width of your text to improve readabilty. It's an easy trick and solves the problem of extremely wide running texts, especially an issue on wide screen monitors.
Theory/Examples Ratio: 70/30
Size: S
Difficulty: beginner
Size: S
Difficulty: beginner
Due to the many different sizes a journal can have on dA, it is a good practice to think about how wide you want your skins to be. You will find the pros and cons of "fixed width" versus "responsive" skins.
Theory/Examples Ratio: 80/20
Size: M
Difficulty: beginner
Size: M
Difficulty: beginner
Learn the basics of using images in your CSS files. The technical aspects are covered, as well as best and worst practices. You will also find a big list of resources for working with images for skins.
Theory/Examples Ratio: 60/40
Size: L
Difficulty: medium
Size: L
Difficulty: medium
A little dive into both CSS and HTML to help you structurize news and articles more user friendly.
Theory/Examples Ratio: 90/10
Size: L
Difficulty: low
Size: L
Difficulty: low
Learn about web-safe fonts, the fallback hierarchy and about the most common text-properties to use in CSS. You will find code examples and a colletion of tips for working with text in skins.
Theory/Examples Ratio: 50/50
Size: XL
Difficulty: medium
Size: XL
Difficulty: medium
Basics about how lists work, how they are coded, what they are good for and how to get the best results out of your content with lists.
Second half is a tutorial on how to use a nested list in order to make a drop down navigation menu.
Second half is a tutorial on how to use a nested list in order to make a drop down navigation menu.
Theory/Examples Ratio: 50/50
Size: XL
Difficulty: medium - advanced
Size: XL
Difficulty: medium - advanced
Learn how to add images, create custom bullet points and arrow shapes to these pseudo elements.
It's a rather long tutorial in the end and may not be for beginner level. Knowing your way around CSS helps to code the pseudo-elements and it will save you some frustration
It's a rather long tutorial in the end and may not be for beginner level. Knowing your way around CSS helps to code the pseudo-elements and it will save you some frustration
Theory/Examples Ratio: 30/70
Size: XL
Difficulty: medium - medium
Size: XL
Difficulty: medium - medium
Breaking down the journal layout!
Here is an overview of the HTML elements a journal is built up from and a template for the CSS to style them. You are welcome to copy paste what I provide and base your new skins on it.
Here is an overview of the HTML elements a journal is built up from and a template for the CSS to style them. You are welcome to copy paste what I provide and base your new skins on it.
Theory/Examples Ratio: 50/50
Size: XL
Difficulty: medium - advanced
Size: XL
Difficulty: medium - advanced
How to style thumbs and embedded deviations in journal skins.
Get to know all the classes you need to know in order to style thumbs and embedded deviations. Learn a few hacks to have it easy peasy
Get to know all the classes you need to know in order to style thumbs and embedded deviations. Learn a few hacks to have it easy peasy
Theory/Examples Ratio: 50/50
Size: XL
Difficulty: medium - advanced
Size: XL
Difficulty: medium - advanced
There are a few issues that you can run into when creating a journal skin or writing up a journal entry in regards to the title of the journal. Since it is an editable part of the writers, it looks quite different when writing a journal and once the journal is submitted.
Theory/Examples Ratio: 70/30
Size: XL
Difficulty: medium
Size: XL
Difficulty: medium
A basic journal skin template for you to use and edit as you like.
I even offer this basic skin as an installable skin, just check it out in the article.
I even offer this basic skin as an installable skin, just check it out in the article.
Theory/Examples Ratio: 20/80
Size: S
Difficulty: beginner - advanced
Size: S
Difficulty: beginner - advanced
The CSS Tricks are a mix of general CSS (and occasionally HTML) and specially for dA written tutorials. Everything that works on dA, will work everywhere else; but not necessarily vice versa.
Questions and Suggestions
If you have a specific question or an idea for a future article, you are more than welcome to suggest to me! You can leave a comment here or write me a note The tricks will be most useful when I know it is a topic people are actually interested in.
For more on CSS and HTML …
Here are some groups that offer tutorials and many other awesome things
Browse the Journal and Gallery Tutorial or Web Design Tutorial galleries on dA.
And as always I strongly suggest you go check out and bookmark the Mozilla Developer Network as it is a wonderful go to site for help and reference!
Have a suggestion?
Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.