How to make a Skin for dA Journals Tutorial

http://darkaion.deviantart.com

With this tutorial I wanna explain the basic objects needed to make a Cascading Style Sheet (CSS) for the deviantART Journal.

Before to start you need to know:

• The CSS feature can be used only by subscribed user • deviantART accepts CSS/CSS2/CSS2.1/CSS3 • The CSSs aren’t both in all browser

Tools

I usually use the Notepad, is simple and works, but you can use a CSS editor like Dreamweaver. You have to know the basilar HTML and CSS references. If you haven’t familiarity with these you can visit http://www.w3schools.com/ and read the tutorials you need.

Classes

You need to know the classes used in dA page.

Journal (.journalbox)

• .journaltop • .boxtop • .list (“a” and “f”) • .journaltext • .journalbottom

Free image hosting

If you want you can upload your images (if use them in the CSS). I use http://xs.to or http://imageshack.us

The “dA” size

In a page with 1280×1024 resolution the deviantART journal module has 580 pixel width. The width size is really important when it is showed in the profile page. When you design the graphic remember this. You can make a CSS with a static width or use a repeated image. The use of a repeated image decreases the weight of the page.

Footer and Header

The footer and the header are two important tools for the creation of a skin. They could be used to include HTML code. dA doesn’t support the tables (<table>) so you have to use the divs (<div>). You can use this technique for add a submenu or just for a graphic reason.

A concrete example:

Header <b>Title</b> <div class="CustomTopMenu">MENU TEXT HERE</div>

<div class="CustomJournalEntry"> Journal entry This is just a journal entry test.

TEST

TEST

This is just a journal entry test.

Footer </div> <div class="CustomFooter">:thumb86912020:</div>

CSS .CustomJournalEntry {background: #f2dbdb;} .CustomTopMenu {background: #e5dfec;} .CustomFooter {background: #dbe5f1;}

Submit in deviantART

You have only two ways to submit your journal. The Complete Journal CSS and the Journal Skin.

• deviantART Related / Journal CSS / Complete Journal CSS • deviantART Related / deviantART Skins / Journal

Submitting a Complete Journal CSS you can submit what you want, but for a complete skin you have to submit an archive contains the CSS, the images and the other HTML codes (if want add them). Submitting a Journal Skin you have to go in your update journal module and fill the forms with the CSS and the footer and header (if you want add them) in the

“Options” tab, then click “How to…” and copy the code in “How to share”. Now you have to submit it in http://www.deviantart.com/submit/?catpath=darelated/deviantartskin/journal/ the deviantART Related > deviantART Skins > Journal category as Text File (*.txt) after you submit it you have to upload the images when it will be request. When a skin will be installed the dA user with subscription can use it with a simple click on “Install Skin” in the deviation page.

The style

In the next steps I explain to you how to create a simple layout and a simple style with a low use of colors (3 or 4 maximum). I usually use the same template and I just edit it, this is really helpful to keep an error-free layout.

In the next lines I’ll wrote a CSS used in my Journal Skin http://www.deviantart.com/deviation/123264975 “Red Smile”. This journal has static width and is compatible with IE and Mozilla Firefox, but the margins and borders aspect change by browser to browser so I have to use the relative positioning.

This is the CSS what I’ve submitted for the dA CSS

Normal CSS

1

div.journalbox { border: 0px; background: #000000 url('journalbox.png') repeat-y left top; text-align: center; cursor: default; width: 550px; }

2

.journaltop { border: 0px; background: transparent url('journaltop.png') no-repeat left bottom; color: #FF6900; font-size: 10px; text-align: right; height: 300px; width: 515px; margin: 0px 0px 0px 10px; }

3 .journalbox .journaltop img { display: none; }

4

.journalbox .boxtop { color: #AA0000; text-align: right; }

5

.journalbox .journaltop span { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: thin; text-align: right; }

6

.journalbox .journaltop h2 { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; text-align: right; }

7

.journalbox .list .f { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; list-style: url('listicon.png') inside; }

8

.journalbox .list .a { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; list-style: url('listicon.png') inside; }

9

.journalbox .list { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; text-align: left; line-height: 3px; width: 515px; margin: 0px 0px 0px 12px; }

10

.journalbox .list .f strong { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; }

11

.journalbox .list .a strong { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; }

12

.journalbox .journaltext { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; text-align: center; width: 515px; margin: 0px 0px 0px 10px; }

13

.journalbox .journaltext A:link { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; }

14

.journalbox .journaltext A:active { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; }

15

.journalbox .journaltext A:visited { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; }

16

.journalbox .journaltext A:hover { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }

17

.journalbox .journalbottom A:link { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; }

18

.journalbox .journalbottom A:active { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; }

19

.journalbox .journalbottom A:visited { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: underline; }

20

.journalbox .journalbottom A:hover { color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }

21

.journalbox .journalbottom { border: 0px; background: transparent url('journalbottom.png') no-repeat right bottom; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bolder; text-align: left; vertical-align: middle; height: 79px; width: 515px; margin: 0px 0px 0px 15px; }

Extra CSS

22

.journalbox .journaltext .daiontext { border: 0px; background: transparent no-repeat left top; color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; text-align: justify; width: 512px; }

23

.journalbox .journaltext .daiontext li { color: #AA0000; list-style: url('minilisticon.png') inside; }

24

.journalbox .journaltext .daiontext hr { border: 1px solid #AA0000; color: #AA0000; height: 2px; position: relative; top: 8px; left: 0px; }

25

.journalbox .journaltext .daiontext strong { border: 1px solid #AA0000; background: #AA0000 url('strong.png') repeat center top; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bolder; text-align: justify; position: relative; top: -10px; left: 5px; padding: 0px 2px 0px 2px; margin: 0px 2px 0px 2px; }

26

.journalbox .journaltext .daiontext div.daionscroll { overflow: auto; width: 500px; height: 150px; }

27

.journalbox .journaltext .daionlogo { border: 0px; background: transparent no-repeat right top; position: absolute; top: 0px; left: 0px; }

Images journalbox.png

1 Vertical Repeat

journalbottom.png

21 No Repeat

journaltop.png

2 No Repeat

strong.png

25 Repeat

listicon.png

7/8 No Repeat

minilisticon.png 23 No Repeat

daionlogo.png

27 No Repeat

Extra HTML Code Skin Header <div class="daiontext"> Skin Footer </div><div class="daionlogo"><a href="http://darkaion.deviantart.com/"

title="Created by DarkAion"><img src="http://xs139.xs.to/xs139/09214/daionlogo624.png" alt="Created by DarkAion" /></a></div>

Breaker <hr><strong>TEXT HERE</strong> Scrollbox <div class="daionscroll">TEXT HERE</div>

Result Normal With Extra HTML Code

OK. Now we can analyze this. I use the numbers of the classes that I named previously. In the next table I’ll include an entry of my journal so you can view a concrete example.

27

2/4/5/6

1

1

2

22/12

24/25

23

21 (Link: 17/18/19/20)

10/9/7

11/9/8

10/9/7

Design subdivision

Photoshop can help you saving a lot of time. With the tool “sections” ( ) you can subdivide the graphics so when you save it you obtain the images subdivided. If you use a gradient you can save it with 1px height when you use a 0° or 180° gradient (set repeat to repeat-x) and with 1px width when you use a 90° or 270° gradient (set repeat to repeat-y). If you use a pattern with 45° orientation you can create a square with matching points, you can repeat it so you will save weight of the skin. Example:

I’ve just repeated a little square.

CSS Proprieties and Layout Design

You have to know some useful proprieties. I’ll explain to you the proprieties showed in an example popular class. I usually use one declaration, for example I use: border: 2px solid #000000; Instead: border-width: 2px; border-style: solid; border-color: #000000;

CSS

.class { border: 13px solid #FF0000; background: #000000 url('image.png') 0 0 no-repeat fixed top left; color: #FF0000; font: normal normal normal 9px Verdana; text-align: justify; height: 300px; width: 550px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }

Result

Properties and Options

Property Options Descriptions Values Border Size border-width Sets the width of the

border thin

medium

thick

inherit

USER DEFINED

Style border-sytle Sets the border style none

hidden

dotted

dashed

solid

double

groove

Ridge

inset

outset

inherit

Color border-color Sets the border color USER DEFINED in Hex (ex. #000000) or Colors (ex. Black)

Background Color background-color Sets the background color

USER DEFINED in Hex (ex. #000000) or Colors (ex. Black)

Image background-image Sets the background image

none

URL

Position background-position

Sets the background position

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

USER DEFINED the X per cents and the Y per cents

USER DEFINED the X position and the Y position

Repeat background-repeat Sets the background repeat

repeat

repeat-x

repeat-y

no-repeat

Attachment background-attachment

Sets whether a background fixed or scrolls with the rest of the page

fixed

scroll

Color Color color Sets the font color USER DEFINED in Hex (ex. #000000) or Colors (ex. Black)

Font Family font-family Set the font name as generic (ex. Sans-serif) or specific (ex. Verdana)

family-name

generic-name

Size font-size Set the font size xx-small

x-small

small

smaller

medium

large

x-large

xx-large

larger

length

USER DEFINED in Per Cents

Size font-size-adjust Preserve the X height of the font

none

USER DEFINED in Number

Stretch font-stretch Condenses or Expands the font

normal

wider

narrower

ultra-condensed

extra-condensed

condensed

semi-condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

Style font-style The font style (ex. Italic)

normal

italic

oblique

Variant font-variant Sets the font as small-caps

normal

small-caps

Weight font-weight Sets the weight of the fonts (ex. Bold)

normal

bold

bolder

light

lighter

100

200

300

400

500

600

700

800

900

Text-Align Alignment text-align Text Alignment justify

center

left

right

Height Height height Height USER DEFINED

Width Width width Width USER DEFINED

Extra Elements Cration

Here I’ll show how you can create the extra elements like the scrollbox. Hereunder you’ll find the CSS and the HTML codes. If you want you can customize it but remember this: dA support only <div>, no <table>. One important tool for the creation of menu and navigation bar is the absolute or relative position. Create extra elements is really simple…

Scrollbox The scrollbox is a div with one or two scrollbars. The scrollbars will be displayed when a div has a static width or height or both. You have to set the overflow property. In the example I’ll create a vertical scrollbar. The overflow property has four values: visible, hidden, scroll, auto. The default value is visible.

CSS HTML .scrollbox { overflow: auto; width: 500px; height: 150px; }

<div class="scrollbox"></div>

Breaker A breaker is a line what can be used to divide paragraphs or elements. I usually use a horizontal line, the <hr> tag, and a strong text, the <strong> tag. So you can do copy and paste when you need it. Hereunder I’ll write a code that works in IE and Firefox. You can set a background image in the strong text. The colors I’ll use are black and red, but can customize them.

CSS HTML .breaker hr { border: 1px solid #AA0000; color: #AA0000; height: 2px; position: relative; top: 8px; left: 0px; } .breaker strong { border: 1px solid #AA0000; background: #AA0000 repeat top center; color: #000000; font: normal normal bolder 14px Verdana; text-align: justify; position: relative; top: -10px; left: 5px; padding: 0px 2px 0px 2px; margin: 0px 2px 0px 2px; }

<hr><strong>YOUR TEXT HERE</strong>