Shop Forum More Submit  Join Login
Basics for Journal Skin by daPhyre Basics for Journal Skin by daPhyre
Basic HTML & CSS for Journal Skins

This is a continuation of [link]
Traducción al español: [link]


If you are willing to make your own Journal Skin, but you have no idea of the basics of HTML and CSS, I'll be able to let you a hand with them right now.

First thing you must know, is that header and footer uses HTML format to be build. You probably already know some of the basics and apply them in your everyday journals and comments. Let me give you a clue:

< b>Bold< /b>
< i>Italic< /i>
< u>underline< /u>
< s>strike< /s>
< tt>teletype< /tt>
< small>small< /small>


Now, lets learn some of the less know but more asked for Journals:

Anchors: Probably not know for its name, but universally recognised for its function. It makes LINKS!
< a href="http: //example.com/webpage.html">Go to Example.com< /a>

Images: Images are an always asked feature. With this you can show any image from the web. It has two attributes: src, the source of the image, and an alternative text to be displayed if the image can't be shown; most popular in text-only browsers and special software for people with special visual needs.
< img src="http: //exapmle.com/source-of-image.jpg" alt="Alternative text" />

Divisors: It creates a box that can be manipulated anyhow you like with CSS.
< div class="stamps">Content of divisor< /div>

Spans: Similar to divisors, but it affect only a part of a paragraph.
This is a < span class="red">red text< /span> because I < span class="red">love< /span> that color.

These might be the most used, but they are many many more. If you want to know more about HTML, i recommend htmldog.com.

----

Now, let's go to the most important part of Journal Skins: CSS.

To make an CSS style, you just got to call the class you want to affect, preceded by a dot, or call directly to the tagname you want to affect. Examples:

.red{color:#f00}
h2{color:#009}


They are many properties that can be modified to get our results. Before we got to them, let me explain a little about colors and measures:

Colors: They are many ways to represent them. The easiest and most common is an hexadecimal number in Red-Green-Blue format, where #000 is black and #fff is white.

Measures: They are many ways to represent them. The easiest and most common is pixels, for example 400px. If your don't include the "px" unity, it could lead to an error.

Now having clarified this, let's meet the most popular CSS properties:

color, font-size and font-family: They changes the font color, family and size. A font-family must end in "serif" if you are using a font with strokes in the tips (like Times New Roman), or "sans-serif" if you don't (like Arial). Example:
.text{color:#333;font-size:16px;font-family:'arial' sans-serif}

background: It changes the background color and/or image. It can include one or more of this: background color, background image, background repeat (repeat, repeat-x, repeat-y, no-repeat) and background position (top/center/bottom left/center/right). Examples:
.f.a{background:#ccf}
.gr-body{url('http: //example.com/source-of-image.jpg') no-repeat bottom right}


border: Creates a border to the selected box. It needs a width, a type and a color. Types could be solid, dotted, dashed, double, groove, ridge, inset, outset, or simply none.
.text{border:1px solid #00f}

margin and padding: Margin creates a space from the border to the outside. Padding creates a space from the border to the inside. You gotta love this two fellas.
.text{border:1px solid #00f;margin:50px;padding:20px}

margin is magic: Margin is also a magical property. For example, if you want to center the whole journal box, you need a margin:0 auto:
.gr-box{width:400px;margin:0 auto}

And, if you want something to be bellow from where it is originally, margin-top can help with it:
h2{margin-top:40px}

It also works on the other way:
h2{margin-top:-40px}

width, height and overflow: You probably notice already you can specify the width and height of any box. What if the content is bigger that your box? That is what overflow is for. It can have one of four values: visible (default, the text gets out of the box), hidden (the text outside the box is not shown), scroll (it creates an scroll to move around the box), auto (it creates the scroll ONLY if the content is bigger than the box).
.stamps{width:400px;height:400px;overflow:scroll;margin:0 auto}

These would be the basics, if you want to know more about all the CSS properties, you can look at them at htmldog.com/reference/cssproperties/..

I hope this basic tutorial can help you to make your own Journal Skins. Happy codding =D.
Add a Comment:
 
:iconbluesixtynine:
bluesixtynine Featured By Owner May 27, 2013
Thanks very much.
Reply
:icondaphyre:
daPhyre Featured By Owner May 27, 2013  Hobbyist Writer
A pleasure! I hope it helps you ;)
Reply
:iconbluesixtynine:
bluesixtynine Featured By Owner May 27, 2013
We will see. :XD:
Reply
:iconkisekinokami:
kisekinokami Featured By Owner Feb 9, 2013  Student Digital Artist
I can't ever get the prevlink to work... help?
Reply
:icondaphyre:
daPhyre Featured By Owner Feb 24, 2013  Hobbyist Writer
Sorry, which prevlink do you mean?
Reply
:iconkisekinokami:
kisekinokami Featured By Owner Feb 24, 2013  Student Digital Artist
The once next to the 'Comments' one... :>
Reply
:icondaphyre:
daPhyre Featured By Owner Feb 26, 2013  Hobbyist Writer
I just can't find what you mean :S
Reply
:iconkisekinokami:
kisekinokami Featured By Owner Feb 27, 2013  Student Digital Artist
Nvm.
Reply
:icondaphyre:
daPhyre Featured By Owner Feb 27, 2013  Hobbyist Writer
Huh... Ok..
Reply
:icongravitii-cs:
Gravitii-CS Featured By Owner Aug 10, 2012
This is confusing...
Reply
:icondaphyre:
daPhyre Featured By Owner Aug 10, 2012  Hobbyist Writer
How is it confusing, and how can it be more clear? ;)
Reply
:icongravitii-cs:
Gravitii-CS Featured By Owner Aug 10, 2012
Well, I don't really know what you mean by this: .red{color:#f00}
h2{color:#009}

And a few other random things, but I think it would be good for someone who knows more about this stuff than I do, cuz I know NOTHING about it. XD
Reply
:icondaphyre:
daPhyre Featured By Owner Aug 13, 2012  Hobbyist Writer
Oh yes! I summarized it in the section colors:

"The easiest and most common is an hexadecimal number in Red-Green-Blue format, where #000 is black and #fff is white."

So, [.red] is the name of the class, [color] is the property which we want to change, and [#f00] is the color in hexadecimal number (In this case, red color).

These are just basic examples, but if you want to know more, you can search on Google about "CSS", which is the name for this coding system. My favourite reference is in htmldog.com ( [link] ), where I learned with detail about all this. If you have any more problems, please tell me, I would be glad to help ;)
Reply
:iconmathmatixchicky:
mathmatixchicky Featured By Owner Dec 27, 2011  Student General Artist
So when I'm typing all this to submit it, do I submit it as text when I'm submitting art?
Reply
:icondaphyre:
daPhyre Featured By Owner Jan 3, 2012  Hobbyist Writer
This code if for Journals. You must write it in the "CSS Skin" under "Edit Skin" ;)
Reply
:iconmathmatixchicky:
mathmatixchicky Featured By Owner Jan 4, 2012  Student General Artist
haha! Thank you so much! *Must attempt in next 2 weeks*
Reply
:icondaphyre:
daPhyre Featured By Owner Jan 4, 2012  Hobbyist Writer
Good luck! If you need any help, don't hesitate in asking me ;)
Reply
:iconlovely-dreamcatcher:
Lovely-DreamCatcher Featured By Owner Dec 8, 2011  Hobbyist Photographer
Scrollbars?
Reply
:icondaphyre:
daPhyre Featured By Owner Dec 8, 2011  Hobbyist Writer
Check the last part: "width, height and overflow".
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner Oct 9, 2011  Professional Interface Designer
tt seems to not work :B
Reply
:icondaphyre:
daPhyre Featured By Owner Oct 9, 2011  Hobbyist Writer
Comments doesn't support TT.

The original code was in [link] , but back then TT had a bug (now corrected), and now the text became uneditable...

Beside, text-only didn't support the tutorial category, so there had to be some sacrifices instead of others. And that is why...
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner Oct 9, 2011  Professional Interface Designer
I'm referring to your artist's comments.
Reply
:icondaphyre:
daPhyre Featured By Owner Oct 9, 2011  Hobbyist Writer
That's what I said on the first line! =P

"Comments doesn't support TT."

I must learn to talk less when I'm not asked to :XD:'
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner Oct 9, 2011  Professional Interface Designer
...ah :lol: but artist's comments are a very different thing from comments! That's why I was confused :lmao:

So wait, you can't edit the artist's comments anymore? :O_o:
Reply
:icondaphyre:
daPhyre Featured By Owner Oct 9, 2011  Hobbyist Writer
Yeah, I forgot that little detail XP'...

No, what I can't edit is the other file... To bad this one doesn't support... Would there be any alternative to show them that way? :S
Reply
:iconnamenotrequired:
namenotrequired Featured By Owner Oct 10, 2011  Professional Interface Designer
:giggle:

I don't get the problem - if you can edit the artist's comments, you can fix it, right?

Or do you mean the Spanish translation? Yup, simply turn off beta testing for a moment :XD:
Reply
:icondaphyre:
daPhyre Featured By Owner Oct 10, 2011  Hobbyist Writer
I'm confused now more that ever @-@'...

I just need to know a way to show teletype in comments, or another way to make the code look different... I tried Italic and it doesn't looks really good at all u.u'
Reply
(1 Reply)
:iconheartlessinu:
HeartlessInu Featured By Owner Oct 7, 2011  Hobbyist Digital Artist
This is too awesome, thanks!
Reply
:icondaphyre:
daPhyre Featured By Owner Oct 7, 2011  Hobbyist Writer
Yourwelcome! Hope it comes really handy to you ;)
Reply
:iconlamich21:
Lamich21 Featured By Owner Aug 24, 2011  Student Artist
Se ve muy completo el tutorial ^^
Reply
:icondaphyre:
daPhyre Featured By Owner Aug 24, 2011  Hobbyist Writer
¡Gracias! Espero sea de ayuda nn~
Reply
Add a Comment:
 
×


More from DeviantArt



Details

Submitted on
August 15, 2011
Image Size
30.6 KB
Resolution
400×300
Submitted with
Sta.sh
Link
Thumb

Stats

Views
2,825
Favourites
107 (who?)
Comments
34
Downloads
65

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.
×