How to make a Skin for dA Journals

Transcription

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
Journal entry
<b>Title</b>
<div class="CustomTopMenu">MENU TEXT HERE</div>
<div class="CustomJournalEntry">
This is just a journal entry test.
TEST
TEST
This is just a journal entry test.
</div>
<div class="CustomFooter">:thumb86912020:</div>
.CustomJournalEntry {background: #f2dbdb;}
.CustomTopMenu {background: #e5dfec;}
.CustomFooter {background: #dbe5f1;}
Footer
CSS
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
2
3
4
5
6
7
8
div.journalbox {
border: 0px;
background: #000000 url('journalbox.png') repeat-y left top;
text-align: center;
cursor: default;
width: 550px;
}
.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;
}
.journalbox .journaltop img {
display: none;
}
.journalbox .boxtop {
color: #AA0000;
text-align: right;
}
.journalbox .journaltop span {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: thin;
text-align: right;
}
.journalbox .journaltop h2 {
color: #AA0000;
font-size: 11px;
font-weight: bold;
text-align: right;
}
.journalbox .list .f {
border: 0px;
background: transparent no-repeat left top;
color: #AA0000;
font-size: 9px;
list-style: url('listicon.png') inside;
}
.journalbox .list .a {
border: 0px;
color: #AA0000;
font-size: 9px;
list-style: url('listicon.png') inside;
}
9
10
11
12
13
14
15
16
17
18
19
.journalbox .list {
border: 0px;
color: #AA0000;
font-size: 9px;
text-align: left;
line-height: 3px;
width: 515px;
}
.journalbox .list .f strong {
color: #AA0000;
font-size: 9px;
font-weight: bold;
}
.journalbox .list .a strong {
color: #AA0000;
font-size: 9px;
font-weight: bold;
}
.journalbox .journaltext {
border: 0px;
color: #AA0000;
font-size: 9px;
text-align: center;
width: 515px;
}
.journalbox .journaltext A:link {
color: #AA0000;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.journalbox .journaltext A:active {
color: #AA0000;
font-size: 10px;
font-weight: bold;
}
.journalbox .journaltext A:visited {
color: #AA0000;
font-size: 10px;
font-weight: bold;
}
.journalbox .journaltext A:hover {
color: #AA0000;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.journalbox .journalbottom A:link {
color: #AA0000;
font-size: 10px;
font-weight: bold;
}
.journalbox .journalbottom A:active {
color: #AA0000;
font-size: 10px;
font-weight: bold;
}
.journalbox .journalbottom A:visited {
color: #AA0000;
font-size: 10px;
font-weight: bold;
}
20
21
.journalbox .journalbottom A:hover {
color: #AA0000;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.journalbox .journalbottom {
border: 0px;
background: transparent url('journalbottom.png') no-repeat right bottom;
color: #000000;
font-size: 10px;
font-weight: bolder;
text-align: left;
vertical-align: middle;
height: 79px;
width: 515px;
}
Extra CSS
22
23
24
25
26
27
.journalbox .journaltext .daiontext {
border: 0px;
color: #AA0000;
font-size: 9px;
text-align: justify;
width: 512px;
}
.journalbox .journaltext .daiontext li {
color: #AA0000;
list-style: url('minilisticon.png') inside;
}
.journalbox .journaltext .daiontext hr {
border: 1px solid #AA0000;
color: #AA0000;
height: 2px;
position: relative;
top: 8px;
left: 0px;
}
.journalbox .journaltext .daiontext strong {
background: #AA0000 url('strong.png') repeat center top;
color: #000000;
font-size: 14px;
font-weight: bolder;
position: relative;
top: -10px;
left: 5px;
padding: 0px 2px 0px 2px;
}
.journalbox .journaltext .daiontext div.daionscroll {
overflow: auto;
width: 500px;
height: 150px;
}
.journalbox .journaltext .daionlogo {
border: 0px;
background: transparent no-repeat right top;
position: absolute;
top: 0px;
left: 0px;
}
Images
journalbox.png
Vertical
Repeat
1
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
Skin Footer
Breaker
Scrollbox
<div class="daiontext">
</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>
<hr><strong>TEXT HERE</strong>
<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.
1
27
2/4/5/6
2
22/12
24/25
23
1
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;
height: 300px;
width: 550px;
}
Result
Properties and Options
Property
Options
Descriptions
Values
Border
Size
border-width
Sets the width of the
border
Style
border-sytle
Sets the border style
Color
border-color
Sets the border color
thin
medium
thick
inherit
USER DEFINED
none
hidden
dotted
dashed
solid
double
groove
Ridge
inset
outset
inherit
USER DEFINED in Hex
(ex. #000000) or
Colors (ex. Black)
Color
background-color
Sets the background
color
Image
background-image
Sets the background
image
Position
backgroundposition
Sets the background
position
Repeat
background-repeat
Sets the background
repeat
Attachment
backgroundattachment
Sets whether a
background fixed or
scrolls with the rest
of the page
Color
Color
color
Sets the font color
USER DEFINED in Hex
(ex. #000000) or
Colors (ex. Black)
Font
Family
font-family
family-name
generic-name
Size
font-size
Set the font name as
generic (ex. Sansserif) or specific
(ex. Verdana)
Set the font size
Background
USER DEFINED in Hex
(ex. #000000) or
Colors (ex. Black)
none
URL
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
repeat-x
repeat-y
no-repeat
fixed
scroll
xx-small
x-small
small
smaller
medium
large
x-large
xx-large
larger
length
USER DEFINED in Per
Cents
none
USER DEFINED in Number
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
normal
italic
oblique
normal
small-caps
normal
bold
bolder
light
lighter
100
200
300
400
500
600
700
800
900
Size
font-size-adjust
Preserve the X height
of the font
Stretch
font-stretch
Condenses or Expands
the font
Style
font-style
The font style (ex.
Italic)
Variant
font-variant
Sets the font as
small-caps
Weight
font-weight
Sets the weight of the
fonts (ex. Bold)
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 {
<div class="scrollbox"></div>
overflow: auto;
width: 500px;
height: 150px;
}
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 {
<hr><strong>YOUR TEXT HERE</strong>
color: #AA0000;
height: 2px;
position: relative;
top: 8px;
left: 0px;
}
.breaker strong {
background: #AA0000 repeat top
center;
color: #000000;
font: normal normal bolder 14px
Verdana;
position: relative;
top: -10px;
left: 5px;
}

How to make a Skin for dA Journals

Transcription

Similar documents

CSS for Page Layout

Red Yeast Rice

Examining How Dyslexics Adjust Their Visual Environments to Aid

Introduction to Web Programming

APPROVED: - Catholic District School Board

English

English - CSS

Retailigence - Sizmek Ad Feature

SULLIVAN`S SOLUTION p. 10 - The College of St. Scholastica

DEVELOPMENT OF WEB-BASED TELEPHONE INFORMATION

INM 2014 lecture notes - courses.iicm.edu

PORTFOLIO