How to make a Skin for dA Journals
How to make a Skin for dA Journals
Tutorial
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 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 or
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 () so you have to use the divs (). You can use this technique for add a submenu or just for a graphic reason.
A concrete example:
Header Journal entry
Title MENU TEXT HERE
This is just a journal entry test.
TEST
TEST
This is just a journal entry test.
Footer
:thumb86912020:
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 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 "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
div.journalbox {
border: 0px;
background: #000000 url('journalbox.png') repeat-y left top;
1
text-align: center;
cursor: default;
width: 550px;
}
.journaltop {
border: 0px;
background: transparent url('journaltop.png') no-repeat left bottom;
color: #FF6900;
2
font-size: 10px; text-align: right;
height: 300px;
width: 515px;
margin: 0px 0px 0px 10px;
}
.journalbox .journaltop img {
3
display: none;
}
.journalbox .boxtop {
4
color: #AA0000;
text-align: right;
}
.journalbox .journaltop span {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
5
font-size: 10px;
font-weight: thin;
text-align: right;
}
.journalbox .journaltop h2 {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
6
font-size: 11px;
font-weight: bold;
text-align: right;
}
.journalbox .list .f {
border: 0px;
background: transparent no-repeat left top;
7
color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style: url('listicon.png') inside;
}
.journalbox .list .a {
border: 0px;
background: transparent no-repeat left top;
8
color: #AA0000; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
list-style: url('listicon.png') inside;
}
.journalbox .list {
border: 0px;
background: transparent no-repeat left top;
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
9
font-size: 9px;
text-align: left;
line-height: 3px;
width: 515px;
margin: 0px 0px 0px 12px;
}
.journalbox .list .f strong {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
10
font-size: 9px;
font-weight: bold;
}
.journalbox .list .a strong {
color: #AA0000;
11
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px;
font-weight: bold;
}
.journalbox .journaltext {
border: 0px;
background: transparent no-repeat left top;
color: #AA0000;
12
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px;
text-align: center;
width: 515px;
margin: 0px 0px 0px 10px;
}
.journalbox .journaltext A:link {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
13
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.journalbox .journaltext A:active {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
14
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.journalbox .journaltext A:visited {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
15
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.journalbox .journaltext A:hover {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
16
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.journalbox .journalbottom A:link {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
17
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.journalbox .journalbottom A:active {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
18
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
.journalbox .journalbottom A:visited {
color: #AA0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
19
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- how to fly from košice to other cities
- global editorial
- university of kansas
- python programmer books
- undserstanding dpi and pixel dimensions
- town of simsbury
- consumer access no blocking transparency
- download 21 cool drawing wallpapers cool pictures to draw
- download map sword art online minecraft
- magicavoxel tutorial pdf
Related searches
- how to make a spreadsheet
- how to make a sales call
- how to make a sale
- how to make a mocha frappuccino
- how to make a song for free
- how to make a website for free
- how to make a will for free
- how to treat a skin rash
- how to make a document a link
- how to make a word a link
- how to make a appointment for dmv
- how to make a jpg a png