Hi there,
If you are reading this blog then I assume that you are interested in learning about deviantART Journal Skins. In this beginner’s tutorial I’ll be covering the basic understanding of HTML, CSS and DA’s journal skins. I’ll be explaining everything in details from the scratch so that you do not miss anything. I have designed this tutorial in such a way that I can assure you that you’ll be able to achieve a working knowledge of deviantART journal skins.
A little background about myself: I am a hobby-driven artist who mainly deals with CSS and HTML in deviantART (now). I like to teach people about customization and provide helpful guides to achieve them. I have designed and coded over 100+ skins till now in DA and I can confidently say that I have quite a deep knowledge about dA’s journal and gallery skins.
A point of inspiration (may be):
I never had any kind of formal training or courses on HTML and CSS coding. I have self-learned everything myself only by going through online tutorials that were available in dA and outside dA. So, if I can do it you can do it too! Otherwise, if you say I cannot learn or understand CSS it would only mean that you are not interested to learn about it.
At the end of this tutorial you’ll know:
- What is HTML?
- What is CSS?
- HTML tags and attributes
- CSS classes, selectors and properties
- How HTML and CSS work together
- How CSS and HTML works in DA journal skinning system
- How to code your first journal skin
Let's get started!
What is HTML?
HTML is the "mother tongue" of your web browser. HTML is a language, which makes it possible to present information in your browser. Generally, what you see when you view a page on the Internet is your browser's interpretation of HTML. HTML (Hypertext Markup Language) is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
The general syntax of a HTML page is as follows:
- <html>
- <head>
- <link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Sample Web page</title>
</head>
<body>
- <p>Here is a paragraph</p>
</body>
</html>
Don’t worry you do not actually have to understand the above code. Just see what the syntax is that’s all. I’ll explain at a later point in this tutorial why I have mentioned about the above syntax.
What is CSS?
CSS stands for Cascading Style Sheets. CSS defines HOW HTML elements are to be displayed in a web browser. Using CSS we can define the style of each element of HTML elements. The word “sheets” in CSS comes from the idea where you can create external CSS sheets with a .css format and include them in your page.
The following syntaxes show how CSS is used in any given page:
Syntax 1: External Style Sheets (cannot be used in DA by us)
- <head>
- <link rel="stylesheet" type="text/css" href="www.mywebsite.com/pagestyles/mystyle.css">
</head>
Here the file mystyle.css contains the styles defined.
Example:
- a {color:red;}
- p {padding-left:20px;}
- body {background-image:url("images/back40.gif");}
Syntax 2: Inline Styles (cannot be used in DA by us)
- <p style="color:red; padding-left:20px;">This is where the content goes for a paragraph.</p>
Syntax 3: Internal Style Sheet (This is the one used in DA by us)
- <head>
- <style>
- a {color:red;}
- p {padding-left:20px;}
- body {background-image:url("images/back40.gif");}
</style>
</head>
You should just get an idea by now what HTML and CSS are and their syntaxes. Now, let’s get into practical understanding of these.
HTML tags and attributes
HTML tags are keywords (tag names) surrounded by angle brackets like <b>. Normally HTML tags come in pairs like <b> and </b> where <b> denotes the start tag and </b> the end tag.
General syntax of a tag is as follows:
- <tagname>Content inside it</tagname>
Complete list of available tags can be found here: HTML tags
HTML attributes provide additional information about a tag. Attributes are always specified in the start tag. There can be more than one attribute in a single tag.
General syntax of a tag is as follows:
- <tagname attribute=”value”>Content inside it</tagname>
List of available attributes can be found here: HTML attributes
Example: Hyperlinks are defined using <a> tag and the URL address of the hyperlink is specified with the help of herf attributes as below.
- <a href=”http://cyphervisor.deviantart.com”>Hyperlink</a>
CSS classes, selectors and properties
Just like HTML has syntax for writing tags and attributes, CSS also has its own syntax. The syntax of CSS for an element is called as rule.
General syntax of a CSS rule is as follows:
- selector {declaration;}
A declaration consists of a property and value. And each declaration is written as property:value; So we can re-write the above syntax as below:
- selector {property:value;}
selector is generally the HTML tag or a class that you want to style.
declaration is one definite style or function of that selector.
Complete list of available properties can be found here: CSS Properties
Different types of selectors can be found here: CSS Selectors
Examples:
- a {color:red;}
- p {padding-left:20px;}
- body {background-image:url("images/back40.gif");}
How HTML and CSS work together
This is the last phase of understanding how HTML and CSS both work together. I’ll be explaining this with live examples.
See the below image and check how the CSS is defined for the tag <h3>
You can now compare and see how the heading <h3> would have looked with and without CSS.
In the above example we have defined two declaration for the selector <h3> One of the declaration color:red; states the colors of the h3 tag as red and the other one padding-left:10px; determines the space to the left of h3 tag as 10 pixels.
Now let’s learn little bit more on how CSS are defined. I am sure you have seen CSS codes which look like something as follows (at least some of them):
a
{
color:red;
}
a:hover
{
color:green;
}
a.drawbox
{
background:white;
}
.gr-body
{
border:2px dotted #fff234;
}
.gr-top h2
{
background:red;
color:white;
}
.title h3
{
background:red;
color:black;
}
.title .shadow
{
background:red;
color:black;
}
/*see no space between .title and .shadow*/
.title.shadow
{
background:red;
color:black;
}
This can be really confusing for a new-comer! It was a hair-pulling situation for me when I first started learning about CSS coding.
Anyways, I was a noob that time and there was no one to teach me these. But you have got me to save your time! 
Alright, lets understand what does those dots(.) before rules (or classes) signifies, when do you "not" use dots(.), what are classes with a dot(.) between them etc. etc. Argggggh! It drives us nuts! I know I know! Now stay calm, relax your mind and I’ll teach the differences between all these dots and no-dots. It is very easy actually. You just need to flow some thumb-rules for this!
NOTE: I am not going to talk about CSS Id here because we can’t use it in deviantART. CSS Ids have hash(#) symbol before them as compared to dot(.) symbol before classes.
So first thing first, let us see which all elements you can style using CSS.
- All HTML tags such as <a>, <b>, <h3>, <blockquote>, etc.
- Classes (can be used in DA)
- Ids (cannot be used in DA)
As said above, we cannot use Ids so I won’t be explaining this to you.
Styling HTML tags
HTML tags are styled using the following syntax:
a {color:red;}
Notice HTML selectors do not need a dot(.) before them. You can never define the style of HTML by putting a dot(.) before it like this
.a {color:red;} -----> This is incorrect!!!
Styling Classes
Classes are custom selectors that you can define of your own. Example,
.box{background:white; color:black;}
Notice that a class is defined using a dot(.) before them.
NOTE: Starting a classes name with a number (such as .3box or .66mybox) may not work in internet explorer.
Alright! Now have you understood where and why dots(.) are used? Cool! Now let us go into little bit of complex selectors! Take a deep breath.. Lol just kidding.
Okay, let us look at the following selectors:
h3 {color:red;}
h3.redborder {border:1px solid red;}
.greenborder {border:1px solid green;}
.spaceleft {margin-left:20px;}
.redborder.box {color:blue; background:white;}
.redborder .box {color:blue; background:white;}
Let us now make sense of all these selectors one-by-one and then we’ll see how do to use them in HTML.
h3 {color:red;}
Defines the color of text of <h3> tag as red.
How to use this CSS?:
<h3>Heading</h3>
Result:
Heading
h3.redborder {border:1px solid red;}
Draws a red border around any <h3> tag which calls for the .redborder class.
Here we are calling a custom class inside a HTML tag. It can only be use with the <h3> tag because you have not left any space between the <h3> tag and .redborder.
It will not work for other HTML tags. For example: <u class="redborder">Heading</u> will not get the red text color. It will simply get the default properties as below:
Heading
How to use this CSS?:
<h3 class="redborder">Heading</h3>
Result:
Heading
.greenborder {border:1px solid green;}
Defines a class which will draw a green border around the element wherever used.
How to use this CSS?:
<h3 class="greenborder">Heading</h3>
Result:
Heading
Here we are calling a custom class inside a HTML tag. However, it can be used with any HTML tag or custom designed class.
It will work for other HTML tags or classes. For example: <u class="greenborder">Heading</u> will get the red text coloras below:
Heading
Explanation:
When you are calling the .greenborder class in the <h3> tag basically it is including the properties of both <h3> and .greenborder inside it. You can imagine the CSS of the <h3> tag as follows:
h3 {color:red;
border:1px solid green;}
.spaceleft {margin-left:20px;}
Defines a class which will assign a 20px margin to the left of the element wherever used.
How to use this CSS?:
<h3 class="greenborder spaceleft">Heading</h3>
Result:
Heading
Explanation:
When you are calling the .greenborder class plus the .spaceleft class in the <h3> tag basically it is including the properties of <h3>, .greenborder and .spaceleft inside it. You can imagine the CSS of the <h3> tag as follows:
h3 {color:red;
border:1px solid green;
margin-left:20px;}
.redborder.box {color:blue; background:white;}
Defines the class .redborder which will get a blue text and white background only when the .redborder class is used along with it.
Here if you call only the .box class in a HTML tag it will not work because it is defined to work with it's parent class .redborder
How to use this CSS?:
<div class="redborder box">Heading</div>
Result:
Heading
.redborder .box {color:blue; background:white;}
Defines the class .box which will get a blue text and white background only when it is used anywhere inside the parent .redborder class.
How to use this CSS?:
<div class="redborder"><div class="box">Heading</div> </div>
or
<div class="redborder"><h3>Some text here.</h3><div class="box">Heading</div></div>
Result:
Heading
or
Some text here.
Heading
Explanation:
I'll leave it on you to understand! You should be able to figure it out now! 
Some cool tips and tricks!
1) You can define multiple selectors the same declaration by separating them using commas(,). Example:
h3, .gr-body .text, .list
{
font-size:16px;
}
2) You can define styles for a selected tag or classes that which is present inside another tag or classes using the greater than symbol(>) Example:
h3>span
{
color:green;
}
3) You can insert comments in your CSS by using the /* and */ You can use it anywhere in your CSS to put a small note or description. Comments are written inside the /* and */ as follows:
/*This is demo comment*/
How CSS and HTML works in DA journal skinning system
I have often seen people directly going into the journal entry page or stash writer page and starts typing CSS codes to skin their journals. However, I have found only a few who actually understood how the DA journal skin system works.
I am going to make you understand how the DA journal skin system actually works. Now you'll understand why I have explained all about HTML and CSS all this long! If you have skipped the previous steps then I would suggest to scroll up and just go through it.
Take a look at the DA HTML page below:
In the above image you can see the page contains all sorts of classes for your page widgets, scripts, etc. However, you cannot edit any of the classes or scripts of DA (at least if you are not a hacker or cracker
) The only part which you can edit is the <div class="negate-box-margin" style=""> and all the selectors inside it. Making sense now? If you are still unclear, then let me tell you....this is the part you get to edit in your journal editor or stash writer! Duh! Now check out the expanded class of <div class="negate-box-margin" style=""> below and see all the selectors that are present inside it. If you ever had tried to edit a skin then you'll be able to relate the things here on.
Lets make the picture more clear shall we? Let's observe a practical example now. Check out the below image of the journal editor. You can see we write codes something like this:
So now, if you see the CSS code above you see that we are editing the selectors (more precisely the classes) .gr-box, .gr-top and .gr-body from the above <div class="gr-box gr-genericbox" usr="">, <div class="gr-top" usr=""> and <div class="gr-body" usr="">
This is how skins are made in deviantART! (By editing the pre-defined classes of dA and sometimes including your own classes)
How to code your first journal skin
Now, since you understood how to go about editing the selectors (or classes) of deviantART lets go ahead and create a very basic skin.
Below is the skin that we will create:
Let's start!
Open your new journal entry page and paste the Lorem Ipsum in the journal text area and click on "Edit Skin".
New deviantART journal window Tip:
Select HTML mode to insert your text and HTML tags. Otherwise if you insert your HTML tags in the Rich text mode you may get undesirable results.
After you have clicked on "Edit Skin" enter the following CSS code in the CSS area and then enter you desired skin name and save the skin. Don't worry! I'll explain what you have just entered.
.gr-box *
{
background:transparent;
border:0;
margin:0;
padding:0;
}
.gr-top h2 img, .gr1, .gr2, .gr3, .tri, .gr3.gb, .gr2.gb, .gr1.gb
{
display:none;
}
.gr-box
{
background:#efffc0;
border-radius:5px;
border:1px solid #aacd41;
}
.gr-top
{
background:#fdffec;
border-bottom:1px solid #aacd41;
height:50px;
padding-top:10px;
}
.gr-top .gr
{
margin-left:-10px;
}
.gr-top h2, .gr-top h2 a
{
color:#ff589f;
font-family:Times new roman;
font-size:24px;
}
.gr-top span
{
color:#9f9f9f;
}
.gr-body .text
{
padding-top:20px;
padding-left:20px;
padding-right:20px;
}
.gr-body .list
{
background:#fdffec;
border-top:1px solid #aacd41;
padding:10px;
}
.gr-body .list .f.a
{
background:#fdffec;
}
What have you just entered?
DA's journal skin is divided into two main parts: .gr-top and .gr-body and there are .gr1, .gr2, .gr3, etc. which mainly controls the shine effect in corners of the new default skin of DA.
Step 1: Reset the skin
As you have understood from the above, deviantART has a default skin for your journal. So, in order to create a new skin we need to reset every element of the skin. The best way to do that is by using the star (*) selector. The star (*) selector basically applies the CSS to all it's child selectors (or classes). Hence, I have reset the background, border, margin and padding of the whole journal to "nothing" by applying it to the .gr-box *
.gr-box *
{
background:transparent;
border:0;
margin:0;
padding:0;
}
Step 2: Apply style the skin
This step is actually the "creative side" and "technical understanding" of your skin. This is the step which differentiates one skin from the other. You can do infinite number of things here. However, for our understanding I'll be just sticking to the above codes so that you understand the basics and then experiment it yourself.
An expert's tip:
The best way to learn CSS is by experimenting with the elements that you are styling. Try to learn new things from other skins/tutorials and check how elements are manipulated. Learn new properties and attibutes and apply your understanding.
We have removed certain classes from our skin by the following rule. In the below rule you can see that I have assigned the declaration display:none; to all the selectors by separating them with commas.
.gr-top h2 img, .gr1, .gr2, .gr3, .tri, .gr3.gb, .gr2.gb, .gr1.gb
{
display:none;
}
For our demo skin we have done the following in the .gr-box
.gr-box
{
background:#efffc0;
border-radius:5px;
border:1px solid #aacd41;
}
Here we have created a declaration to change the background color by using background:#efffc0; and then we made the corners rounded by using border-radius:5px; and applied a border of 1px width and of solid color using border:1px solid #aacd41;
In the .gr-top selector we have changed the background and gave it a border at the bottom and set the height to fixed 50px. The padding-top was used to push down the content inside it.
.gr-top
{
background:#fdffec;
border-bottom:1px solid #aacd41;
height:50px;
padding-top:10px;
}
We have also edited some of the child classes of .gr-top namely .gr, h2(the journal title), h2 a(the hyperlink of journal title) and span (the date) by changing the font-size, font-family and colors.
.gr-top .gr
{
margin-left:-10px;
}
.gr-top h2, .gr-top h2 a
{
color:#ff589f;
font-family:Times new roman;
font-size:24px;
}
.gr-top span
{
color:#9f9f9f;
}
Finally we have edited some of the child classes of .gr-body namely .text(the journal text area) and .list(the moods area) by changing the border style and color, padding and background colors.
.gr-body .text
{
padding-top:20px;
padding-left:20px;
padding-right:20px;
}
.gr-body .list
{
background:#fdffec;
border-top:1px solid #aacd41;
padding:10px;
}
.gr-body .list .f.a
{
background:#fdffec;
}
Hope you enjoyed this tutorial!
I am a free customization resource provider for the deviantART community. If you like my free customization resources you can donate some points
to me as an appreciation or support.I take commissions to make custom journal/gallery CSS too. Check out my CSS Skins folder. Send me a note to contact me.
Skin copyright © CypherVisor
