Project Educate: User Friendly Journal Skinning

Mar 29, 201314 min read

Deviation Actions

gillianivyart

Published: Mar 29, 2013

8.3K Views

Community Week

This article is written for fellow CSS coders who already have basic+ knowledge of deviantART journal codes. This is not a beginner's tutorial.

User Friendly Journal Skin Coding

I've been making journal skins on DeviantART since 2010, I'd dabbled in CSS before, but never for other people. I know what my codes are and how to use them to their full potential and often, just code on the fly when I want something to do something. But making free and commission skins here showed me that I needed to make them as easy to use as they are pretty. And really, who wants to type in a lot of extra HTML when they go to write a journal? It is easy enough to access the artist's comments.

But even then, copy & paste, memorize that.... It can be a lot to deal with if you do not know CSS and HTML. Which is the reason most people get someone else's skin design in the first place. So, to minimize the code work you can actually use standard HTML for quite a lot. You want your user to just install and begin writing a journal right away without having to look up how to use it. Extra codes and fancy things are wonderful, but the core use of text is where the focus needs to be. And there are ways to add extra fancy boxes, etc without the need for additional HTML.

What are the Core Standard HTML codes?

First, text formatting. Such as Bold, Strong, Italics, Emphasis, Underline, Strikeout, Abbreviation, Acronym, Code, Teletype, Insert, Subscript, Superscript and Small. These all need little extra than basic knowledge HTML. Even if someone does not know how to do the bold or italics text, this is in the Sta.sh Writer's WYTIWYG editor. And users can switch to HTML mode to do more advanced editing. There are also Subheadings 1-6, though the editor only offers 1-5 and normal.

So that is Bold, Italic, Underline, then Subheading sizes. After that, we have Unordered List, Ordered List and Blockquote. Then Left alignment, Centered and Right alignment. And finally, the links. I like to code for just about everything, including paragraph. I like to use paragraph to make an alternate blockquote style or feature box. Instead of a long div class with a code name to memorize, they can simply use the <p></p> tag.

How do you write the HTML for these?

<b>Bold</b>
<strong>Strong</strong>
<i>Italics</i>
<em>Emphasis</em>
<u>Underline</u>
<ins>Insert</ins>
<abbr title="#">Abbreviation</abbr>
<acronym title="#">Acronym</acronym>
<small>Small</small>
<code>Code</code>
<tt>Teletype</tt>
<strike>~~Strike~~</strike>
<sub>_Subscript</sub>
<sup>^Superscript</sup>
<blockquote>Blockquote</blockquote>
<p>Paragraph</p>
<hr> -- Horizontal Rule
<h1>Subheading 1</h1>
<h2>Subheading 2</h2>
<h3>Subheading 3</h3>
<h4>Subheading 4</h4>
<h5>Subheading 5</h5>
<h6>Subheading 6</h6>

How do you write the CSS codes?

b{}
strong{}
i{}
em{}
u{}
ins{}
.abbr{}
acronym{}
small{}
code{}
tt{}
strike{}
sub{}
sup{}
blockquote{}
p{}
hr{]
h1{}
.text h2{} (I add .text so it does not effect the title of the journal)
h3{}
h4{}
h5{}
h6{}

You can actually write things that are all going to be the same style stacked:
b, i, u, small{color:#ffffff;}
I like to stack a lot of elements, less coding to write and not so long!

Lists and Things

Writing a list, I recommend everything be written all in one line. This way, they do not have weird spacings in between and look nicely grouped together. <ul>Unordered List <li>Unordered Item</li> <li>I like to add spaces</li></ul> It may not look as pretty on the input box, but on the live journal it makes a huge difference. Coding can get a little bit more complicated if you make child elements on this, but it really is not very difficult.

ul{} -- Unordered List
ul li{} -- Unordered List Item
ul li li{} -- Unordered List Item Child
ol{} -- Ordered List
ol li{} -- Ordered List Item
ol li li{} -- Ordered List Item Child

Okay, not really so bad, but the problem is that your moods are also list items. So they will adopt the list styling unless you specifically tell them not to:
.list li{list-style:none;}
That should eliminate that!

Images and dA Embeds

Here's the fun part! At least to me, but I really enjoy doing CSS, which if you don't, maybe it is not the best activity for you... I like this especially since it is what can really make a journal skin shine. Everyone likes featuring art. But to really make their feature stand out, it needs a lovely layout and lots of options. Now there are several different types of images, not just your standard thumb code. The codes for these can sometimes be tricky, as a simple thumb actually has layers of codes. And a secret one most people might not even know about! How do I find these secrets? I right click and "Inspect Element" in Google Chrome or Firefox. I use Chrome now. If you don't really know your way around this, play with it a bit. The Firefox version has a 3d view that lets you dissect a website like it were cake. If that makes sense... That would be how I discovered the code for the secret italic, embedded deviations and embedded videos. Let's have a look:

Standard Thumb with secret italic!

Embedded Deviation and Embedded Video.

Assuming my readers do not know how to code standard thumbs, I will go ahead and explain it. The thumb code is the code dA generates when you submit a deviation or journal. This is located on the info bar, just under the fav.me link. :thumb#:. You post that in your journal and a thumbnail of the deviation is generated. Behind the scenes there is a lot more to it.

.shadow{}
.shadow-holder{}
.shadow-holder img{}

or
a.thumb{}
a.thumb img{}
which I rarely ever use. Just as it seemed redundant since I am already using the shadow-holder which has more layers.

This code effects big thumbs :bigthumb#: and the lit thumb as well. As more and more people are featuring literature and other articles in their journals, it is important to include the oft forgotten lit thumb codes. Because otherwise, they may end up entirely illegible and ruin your gorgeous skin. And if you don't code it neurotype-on-discord will give you a

face. Lit CV's appreciate lit thumbs.

a.lit{} -- The entire thing
q{} -- The text area
q strong{} -- The title
img.lit{display:none;} I remove the image usually, because I can!

I like to make additional styles for emotes/stamps/png thumbs where the bg is transparent and might not look very good with a border or something. So I make a cancel code. I use <em>:thumb#</em> as it is easy to remember em=emote. But really, you can use any standard core html codes to contain the thumb code. And here is how the CSS would look:

em .shadow{}
em .shadow-holder{}
em .shadow-holder img{}

The em version of thumbs is the only one effected. And this code is simple enough rather than making a div <div class="clear">:thumb#:</div>. Easy for the coder and the user.

I do the same thing, only using <small>:thumb#:</small> to create a mini gallery effect. So much less code and HTML than making a container just for these little thumbs when I can write small and that's it. Easy to remember and gives an extra feature style to the user.

small .shadow{}
small .shadow-holder{}
small .shadow-holder img{}

Back to this secret italic thing. Why is it even there? You may have noticed that in official skins, they may have a neat hover effect where a little magnifying glass may pop up on the image or something along those lines. The code is already there for you to implement this! Nothing for the user to do. You simply add an image to the hover of the image italic:

.shadow-holder img:hover .shadow-holder i{}

Moving on. I'm sure you may have noticed large images in journals. In Sta.sh, it is as simple as adding images from the "add items" sidebar. But there is actually an easy code for this. At least, easier than looking up the urls for the link and the image to use <a href.... > and <img src...> tags. DeviantART has their own special codes. <da:deviation id="#" /> where the # is the thumb code without the word thumb before it. So you simply copy the thumb code into the id and it generates your link and thumbnail. You add in the width (height is not needed) and you have a preview image any size you like. Previously, I would make a special container to display these, as the da code is not effected by the thumb code styles. So I thought it would be extra codes for the user to have to input. Or so I thought:

.embedded-deviation{}
.embedded-image-deviation img{}

Finding the video embed was simple after that. I haven't tested on the Vimeo ones, but the following codes work for Youtube and dA Film. First your embed, <da:embed profile="youtube|vimeo|film" id="#" />. And your code:

.daembed{}
iframe{}

Conclusion

With the above codes, you can make extra fancy journals that the user needs very little HTML knowledge in order to get it to work. Of course, there is so much more you can do, adding special divs and all. But the point of this article is ease. I have made a template of my blank codes to ease my own use of them. It can be tiring typing all of that ;D And you are welcomed to have a look. I update it as I find new things or change how I code. Generally, I will put in a small notation and bold newer things. You may copy and save it. I do not need credit for anything. But if you find my template useful, I do not mind a shout out, a thank you or pointing people in my direction. DevART also changes their codes periodically, so I would add those as well. Gillian's Journal Skin Template.

Sorry that this is not really a beginner's lesson. But there are several tutorials that can be found to start off delving into deviantART CSS. Groups such as deviantCSS eCSSited CSS-Babes journalcss are good places to look at resources. I also keep a collection of most Frequently Referenced resources, for things like custom boxes and handy CSS guides. People ask me all the time how to code this or that, so I keep these thumbs handy. I recommend faving them yourselves and saying a thank you to the creators. I hope newcomers will find that we have a very tightknit and welcoming community of coders.