Utility for Journal Skins

STARTER DEFINITION

HTML Tag: All the things that define HTML pages like <p> <div> and . Must be closed with </tagname>
HTML attribute: things that go into TAGS and define how it works. Sample: <a href="http://www.deviantart.com"</b>></b> ("a" is the tag for links and the attribute "href" tell where to go when you click on it)
CSS Classes: Classes are the main sintax of CSS, and is composed like this: .classname{ ...attributes list... }
CSS attributes: as the HTML attributes, the CSS ones define what CSS classes do. Sample: .classname{ color:#000; }(" .classname" is the name of class, defined by you, and the attribute "color" define the color of the text)

USEFUL HTML TAGS
<div> This tag defines a division or a section in an HTML document. For us the most important attributes are: class and style. In Journal it's useful to create link bar and sidebar.
<p> This tag defines a paragraph. For us the most important attributes are: class and style. I use it often to create a paragraph divider.
This tag defines an hyperlink, the most important attribute is: href.
<b> or <strong> Bold Text
<i> or <em> Italic Text
<u> Underline Text

CSS CLASSES

There's two tipe of classes:
.classname{ ...attributes list... }: this can be applied to TAG defining the attribute "class" like this: <tag class="classname"></tag> (as you can see the "." is not needed in the html attribute)
tagname{ ...attributes list... }: thiss will be automatically applied to all the defined tags. Sample: p{ color: red; } mean that all the "p" tags will have the text colored in red.
The difference as you can see is the "." before the name, if you write ".p{}" will define a class named "p" and not apply to <p> tags.

Mainly it's used without any tag declaration, but if you want to use the same classname for two different tags, you can do it by adding the tag name before the class name, like this:
div.classname{ ...attributes list... } or p.classname{ ...attributes list... }
this will apply to tags that have the attribut class set on "classname": <div class="classname"></div> will be different from <p class="classname"></p>

Special classes (called pseudo-classes) are used for tag <a> to define the state of mouse:
a:link: for every links.
a:hover: when mouse is passing on your link. (the most important, and used)
a:visited: when you've already visited a link, the style could change.
a:active: after you click on a link, will stay active for few seconds.

Anyway you can use only "a" and
"a:hover" for a basic rollover effect.

HERE SOME CSS ATTRIBUTES I MOST USE IN MY CODING.


VISUAL ATTRIBUTES

color:#000000; color of the text.
font-family:Verdana; The font used for text.
font-size:__px; the size of the text.
font-style:italic; equivalent of <i> and <em>
font-weight:bold; equivalent of <b> and <strong>
text-decoration:underline; equivalent of <u>
text-align:left; (left/center/right) position of the text

background-color:#000000; color of the background
background-image:url([link]); the image to use as background, you need to upload the file in external site first. Then when the code is complete DA ask to upload within the journal css file.
background-repeat:repeat-y; (repeat-x/repeat-y/no-repeat) where your background must be repeated; orizontaly, vertically or no repeat. Not insert if you want full repetition.
border:1px solid #000000; the border around your <div>, first param is the size, second the tipe (solid/dotted/dashed etc) and the last is the exadecimal color.

width:__px; no need explanations
height:__px; no need explanations
line-height:__px; the height of the text-line. Useful when you want to center vertically the text to fit with a background.


POSITION AND UTILITY ATTRIBUTES

position:absolute; for put the <div> where you want, need to be positioned with definition of other attributes.

left:__px; define the distance from the left side.

right:__px; define the distance from the right side.
top:__px; define the distance from the top side.
bottom:__px; define the distance from the bottom side.

margin:__px; the distance between border and other element.

padding:__px; the distance between border and content.

overflow:hidden; (hidden/scroll/auto) when you define the size of your <div> with weigth/height you may want the content not to exceed this dimension, so you can define if the exceed must be hidden, or just to show a scroll bar. If you want the <div> to resize to fit the text, just ignore this attribute.
display:none; use to hide object in your journal, for example the separation line between "comments" and "previus journal".

---

BASIC CLASSES FOR THE JOURNAL.
Remember to delete the text between "/*" and "*/"
.journalbox {
/*container box of all*/
}
.journaltop {
/*top of the journal, containing title and date*/
}
.journaltop h2 {
/*containing title and small icon*/
}
.journaltop h2 img {
/*top small icon*/
}
.journaltop span {
/*contain the date of the journal entry*/
}
.journaltop tri {
/*small down-pointer image*/
}
.gr-body {
/*container of the text and the mood parts*/
}
.journaltext {
/*container of the text*/
}
.journalbottom {
/*container of comments and prvious links*/
}
.commentslink {
/*Link to comments */
}
.hsep {
/*comment and previous separator (the | symbol)*/
display:none;
}
.prevlink {
/*Link to previous entry*/
}
li.a {
/*uneven rows of mood/Listening/reading etc*/
}
li.f {
/*ven rows of mood/Listening/reading etc*/
}
.shadow-holder{
/*container of thumbnail*/
}
.shadow-holder img{
/*image of thumbnail*/
}

TIPS AND TRICKS FOR CODING YOUR JOURNALS.

• !important
  this rules must add before ";" to specify the important of the class. For normal coding it's not much useful, but with DA could be used sometimes to give our classe's attributes more value than the DA coding.
  Example: background-color:#000000!important;
  
  



• even (li.a) ad uneven (li.f) rowsDeviantart coded this classes to assign priority to uneven (li.f) rows, so you have to pay attention and put in your css in the order i show you in the list, AND add the "!important" rules to each line. If you not do this, the attributes assigned to li.a will be totally ignored.
  
  



• Header imageThe book image near the title in the top could be hidden, but not changed. You can use the attribute display for this purpose like this: display:none;. Same way to hidden the link separator between comment and previous.
  
  



• padding and width
  You have to pay attention to this, there's a difference between IE and FF:
  IE: the padding is already INCLUDED in the width
  size.
  FF: the padding will be ADDED to the width definition.
  
  Could seem an insormontable problem, but there's a trick! you'll have ti do this:
  padding:10px;
  width:90px;
  // for FF
  _width: 100px // for IE
  The point is to add
  "_" to the beginning of IE line: FF will ignore the line, as a comment, but IE not.
  Also the IE line have to be AFTER the FF one, because if there's two same attributes in the class, only the last will work.

VARIOUS LINKS.

• favebox This will be usefull until the new journal system will be released: show how much fav your journal have. I never used it but i see lot of people that do.


• I use phothoshop for this purpouse, but this is an useful link for me, when I'm too lazy Hexadecimal color