Shop Mobile More Submit  Join Login

Journal {CSS} Guide - Beginners

Sun Jul 14, 2013, 9:18 AM


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:
  1. What is HTML?
  2. What is CSS?
  3. HTML tags and attributes
  4. CSS classes, selectors and properties
  5. How HTML and CSS work together
  6. How CSS and HTML works in DA journal skinning system
  7. 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. :giggle: 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! :la:

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.

  1. All HTML tags such as <a>, <b>, <h3>, <blockquote>, etc.
  2. Classes (can be used in DA)
  3. 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. :giggle:

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. :eyes:

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! :nod:


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 :P) 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 :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
Add a Comment:
 
:iconarzika:
arzika Featured By Owner Jan 22, 2016  Hobbyist Digital Artist
hey
Some reason everytime I click "edit skin" the options won't show up and I can't delete one of Maygebee journal skins :( (Sad)

Reply
:iconjiniwashita:
jiniwashita Featured By Owner Jan 16, 2016  Hobbyist Digital Artist
I should have stayed in school @_@
Reply
:iconnaruko6783:
naruko6783 Featured By Owner Jan 17, 2016  Professional Artist
lol XD
Reply
:iconnaitomeiya:
NaitomeIya Featured By Owner Jan 5, 2016  Hobbyist Digital Artist
I was able to survive the html basics in Computer class back in highschool.
I should be able to learn this no sweat! /o/

The instructions are very easy to understand. Very useful tutorial.
Deserves a spot in daily deviations, this journal. Od //shot
Reply
:iconmorganacannon:
morganacannon Featured By Owner Jan 28, 2016  Professional General Artist
You wouldn't believe how jealous anyone older than you is that you had html basics in computer class in highschool. I'm teaching myself html from scratch at 24 and my day-job working brain is so slow. 
Reply
:iconnaitomeiya:
NaitomeIya Featured By Owner Jan 30, 2016  Hobbyist Digital Artist
:iconlazycryplz: The html basics we tackled at highschool were already tackled by freakin' deviantART itself. Like the bold tag or the strike tag or the hr divider thingy and the p tag crap. We were taught only how to format and arrange text, nothing else. O)-<
Reply
:iconmorganacannon:
morganacannon Featured By Owner 5 days ago  Professional General Artist
<3 School tries. but god it fails at keeping up with current technology and completely underestimates the potential of students who are goshdarn bored with their methods but would strive and bust to learn things like html given the chance, I've heard stories of self-learned kids who use a combination of school resources supplied for homeschooling and the internet to bust their potential abilities wide open and soar way in front of normal school kids academically. Education needs to change and I actually believe maybe a few years in front of us there are academics and forward thinking individuals already trying.
Reply
:iconinfograflow04:
Infograflow04 Featured By Owner Dec 14, 2015  Hobbyist Digital Artist
Hello. I'm into HTML and CSS designs, and I was happy to discover that feature. One point you may have forgotten to mention is that in order to save your journal skin you have to be core member, else you're stuck pretty much...
Reply
:iconthe-shiny-eevee:
The-Shiny-Eevee Featured By Owner Dec 6, 2015  Hobbyist Digital Artist
If I do the art would somebody help me with the coding XD ?
Reply
:iconsunnychest:
SunnyChest Featured By Owner Nov 26, 2015  Student Digital Artist
Hi! Sweet tutorial, I just woud like to know how could I put a header image on the top of it.
Reply
:iconinfograflow04:
Infograflow04 Featured By Owner Dec 14, 2015  Hobbyist Digital Artist
When you modify your journal entry just switch to HTML mode and add a simple <img src="laction of your pic"/> tag wherever you want to add your picture
Reply
:iconsunnychest:
SunnyChest Featured By Owner Dec 16, 2015  Student Digital Artist
Thank you! :la:
Reply
:iconinfograflow04:
Infograflow04 Featured By Owner Dec 17, 2015  Hobbyist Digital Artist
You're very welcome (dunno if it helped about 3 months later...) 
Reply
:iconsunnychest:
SunnyChest Featured By Owner Dec 26, 2015  Student Digital Artist
It's okay, I'm pretty slow myself.. : D
Reply
:iconsha-arts:
sha-arts Featured By Owner Nov 20, 2015  Professional General Artist
I really appreciate the time you took in making this entry. It's extremely thorough!

I have a question or two or three...:)

1- I'm assuming that with these basics I should be able to create my own Gallery Skin as well?
2- Do these basics also apply to learning how to make profile menus such as the ones you sell (menus with sections to your gallery for instance)?
3- Do you have tutorials on DA on how to make the above two items mentioned or know of any good ones for them?

It goes without saying that anyone can answer these questions and that I am thankful for the efforts of anyone who does so...:D
Reply
:iconglitcher:
glitcher Featured By Owner Nov 11, 2015  Hobbyist Digital Artist
This didn't make sense to me. I didn't see anything called ".gr-box" or ".gr-top" in my journal style sheet. Instead I see ".journaltop" and ".journalbox". Are you getting completely different CSS from me?
Reply
:iconicykuda:
IcyKuda Featured By Owner Oct 6, 2015  Student General Artist
Congratulations. You've made a guide that is more informative on HTML/CSS than the whole year of my web designing class. (my class depended on Dreamweaver, so I was on my own for learning HTML/CSS. :\)

Very nice guide. I've learned a lot from reading this.

My class must've been real bad because I passed with a perfect grade and didn't know that CSS didn't make things happen alone.
Reply
:iconayera-roses:
Ayera-Roses Featured By Owner Aug 13, 2015
okay Not to offend you're hard-work here, but seriously I was just looking for a simple ( AND SHORTER ) guide to customizing my own skin for my journal -__-#

 I know its none of your fault that I have such little patience to go through HTML and crap, I meant its been ages since I've touched any coding and this just tugs on my "I so dont wanna see another code in my life" button really hard.

Cant you just simply show me a generalized program that I can just copy and paste and edit a few things in between to customise it ? :/  There is just too much basic HTML drama that I really dont need to know while I'm planning on doing some simple fun artwork -_____________________-#



BUT THanks anywayyy ! *Forcefully smiles*
Reply
:iconinfograflow04:
Infograflow04 Featured By Owner Dec 14, 2015  Hobbyist Digital Artist
Just use a WYSIWYG HTML editor such as adobe dreamweaver and copy and paste you CSS in DA. That's teh simplest thing I can suggest... What has been done here is so amazing. You know, even if HTML is one of the simplest coding languages out there, it still takes time to learn... What has been done here is to shorten to it's maximum everything to let you proceed with your customisation as soon as possible and for that you can't just *forcefully smile*. This thread deserves way more respect than that sorry :/
Reply
:iconfaketsuki:
FakeTsuki Featured By Owner Sep 12, 2015  Hobbyist General Artist
I agree with the owner on this. You can't just dive into coding. Lest it be half assed and not that great.
Coding takes time, and a lot of learning, as well as mistakes :>
Reply
:iconaviivix:
Aviivix Featured By Owner Sep 1, 2015
Coding is difficult to learn. It's like learning a language. Sure you could just use a translator like Google Translate but that's not really learning the language is it? That's like saying, "JEEZ CAN'T YOUR LANGUAGE JUST BE SIMPLER?" It's a tedious task to code things and if you don't have the patience to sit through this tutorial (which is in all actuality just barely scratching the surface!) then maybe you shouldn't be trying to learn how to code in CSS, since this task is clearly too complicated for you. The long and short of it is, this is probably the shortest, simplest, most basic tutorial you can get. If this is trying your patience, then maybe you should press that "I don't wanna see another code in my life" button since you're not gonna get very far with that mentality. There's no way to dumb this down or make it any simpler than it is.

Something that might interest you more is drawing out the whole skin in a program and paying someone to do all this coding for you, since it's a skill they have and you don't care to learn.
Reply
:iconcursed-grimdark:
Cursed-Grimdark Featured By Owner Aug 11, 2015  Student Digital Artist
Is there a way I can make a journal css skin without using a PM?
Reply
:iconaerisorion:
AerisOrion Featured By Owner Oct 18, 2015  Hobbyist General Artist
nope xD
Reply
:iconglixeworld:
Glixeworld Featured By Owner Aug 2, 2015  Professional Traditional Artist
This only gave me a weird font & pink text! I want a background & web links!
Reply
:iconaerisorion:
AerisOrion Featured By Owner Oct 18, 2015  Hobbyist General Artist
you need to be core member for that
Reply
:iconglixeworld:
Glixeworld Featured By Owner Oct 29, 2015  Professional Traditional Artist
FUCK!
Reply
:iconcantrona:
Cantrona Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
Thank you so much for this!!

All I was really looking for was a very simple skin to add a little flair (but not too much so as to be distracting) to my 
page in general, and this was a total life savour! 
I feel like I'm ever so slowly picking up on this coding thing little by little. And thats super satisfying because it seems
so daunting! 
Most of it still goes completely over my head though ^^;
Reply
:iconrebelc0g:
Rebelc0g Featured By Owner Jul 30, 2015  Hobbyist General Artist
Am i legit the only person who can't figure out how to customize anything XD. 
Reply
:iconavantinostalgia:
AvantiNostalgia Featured By Owner Jan 12, 2016  New Deviant Professional Digital Artist
You're not alone.) Besides of how to make an image as a link I know nothing. Giggle 
Reply
:iconnatakiro:
Natakiro Featured By Owner Edited Jun 7, 2015  Hobbyist General Artist
So I've finally got around to making my first journal skin, and this helped so much! Thank you! :meow: However, I'm having problems making <div class="smbutton smbutton-blue"> show up as the clickable blue box in my journal; it has the click property. but you can't see the box. How do I fix this? :? Is there some clashing classes or something? I'm also having trouble making a box that fits to its contents, much like those smbutton boxes. :/ I tried a bunch of stuff but I'm not getting anywhere.
It's for this journal:
Blue Stripes ~ Free Journal Skin by Natakiro
Reply
:iconsaltyarts:
SaltyArts Featured By Owner Jun 1, 2015  Hobbyist Digital Artist
Geez you have to do all this just to add a journal skin and change font color.
DA is growing an army of Coders over here
Reply
:iconsameore:
Sameore Featured By Owner Aug 18, 2015  Hobbyist General Artist
:giggle:

I was like: "Damn shit..."
Reply
:iconshibekutaato:
ShiBekutaato Featured By Owner May 19, 2015  Student Digital Artist
Crap...I was hoping for drag and drop. HTML and CSS, I don't have any type of coding software.
Reply
:iconlytrigian:
Lytrigian Featured By Owner May 22, 2015  Hobbyist Writer
You don't have Notepad?
Reply
:iconshibekutaato:
ShiBekutaato Featured By Owner May 22, 2015  Student Digital Artist
I use a PC, I can only access notepad at school, and they don't like us doing our own things. I wasn't aware that Macs are what artist use at the time. I'm also waiting on a new hard drive...But I'll get to it eventually
Reply
:iconlytrigian:
Lytrigian Featured By Owner May 22, 2015  Hobbyist Writer
Can't tell if trolling...
Reply
:iconshibekutaato:
ShiBekutaato Featured By Owner May 23, 2015  Student Digital Artist
I wish buddy
Reply
:iconlytrigian:
Lytrigian Featured By Owner Edited May 23, 2015  Hobbyist Writer
Notepad is the text editor that has come with every version of Windows since 1.0. If you have a PC, you have Notepad. You don't need "coding software" -- whatever you mean by that -- to type in CSS and HTML. Just a text editor. Or, you can just type it directly in on the skinning page.
Reply
:iconshibekutaato:
ShiBekutaato Featured By Owner May 23, 2015  Student Digital Artist
I was used to using that duck thing on the Mac, also didn't know that I had notepad...and also didn't know about notepad...Thank you!
Reply
:iconjestembazyliszkiem:
JestemBazyliszkiem Featured By Owner May 5, 2015
Fantastic guide! 
Very well written and explained. Everything is legible and I seriously enjoyed reading it :clap: 
Thank you for your hard work  :wave: revamp 
Reply
:iconshycookiieex:
ShyCookiieeX Featured By Owner May 3, 2015
I don't understand any of this >A<
Reply
:icondariakoumori:
DariaKoumori Featured By Owner Apr 21, 2015  Hobbyist General Artist
Thank you very much, it is really very helpful info!^_^
Reply
:iconchella1010:
chella1010 Featured By Owner Apr 21, 2015  Hobbyist Traditional Artist
Guess the only way to learn something is the way you learned it when you where a child: READ AGAIN AND AGAIN AND AGAIN untill it has gotten it's own category in your head- Just like when you went from knowing absolutely nothing to speaking and then it just came to be something you don't need to understand, just know, ahahh. Have to read this over and over and over again, eh ;w;
Reply
:iconpantherflint:
PantherFlint Featured By Owner Edited Apr 12, 2015  Student General Artist
Dude, I only have a one month premium membership.

Can someone please help me? I don't understand any of this, but I really REALLY want to!
Reply
:iconkrisfirebolt:
KrisFirebolt Featured By Owner Apr 12, 2015  Hobbyist General Artist
wait, where do i make the background an image instead of a solid color? did i miss that part?
Reply
:iconbanjelerp:
Banjelerp Featured By Owner May 3, 2015  Hobbyist General Artist
It's part of the selector declaration section.  You have to click on the link he provided about the properties, and it shows "background-image" as one of the properties.  He also provided an example: 
  • body {background-image:url("images/back40.gif");}
Hope this helps!
Reply
:iconiggyvillagekoopa:
IggyVillageKoopa Featured By Owner Mar 11, 2015
That was AMAZING!
Reply
:iconaenier:
Aenier Featured By Owner Mar 7, 2015  Student Interface Designer
Oy vey, as a person who has never taken an advanced computer class ever, this is a lot to learn. You broke it down really well though, so I think I get most of what you did! OFF TO EXPERIMENT!
Reply
:iconsnowyarctics:
SnowyArctics Featured By Owner Feb 21, 2015
thx so much this was very helpful!
Reply
:iconvachisu:
Vachisu Featured By Owner Feb 21, 2015  Hobbyist Digital Artist
So helpful! We are currently learning html in class and that made me interested in making journal skins • w • thank you for this~
Reply
Add a Comment:
 

Featured in Collections

Babbling Blogs by nimbusphoenix

Journals by KittiRawr

JorunalorContests by MusicalCombusken


More from DeviantArt



Details

Submitted on
July 14, 2013
Link
Thumb

Stats

Views
50,393 (20 today)
Favourites
1,474 (who?)
Comments
485