HOME | DD
Hairac β Utility for Journal Skins
Published: 2011-07-30 17:12:46 +0000 UTC; Views: 2494; Favourites: 64; Downloads: 23
Redirect to original
Description
STARTER DEFINITIONHTML Tag: All the things that define HTML pages like
HTML attribute: things that go into TAGS and define how it works. Sample: <a href="http://www.deviantart.com"> ("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
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:
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
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": will be different from
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
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
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
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
Related content
Comments: 17
This is a life savor! Thank you for making it!
My only question is, how do you make the background lineΒ (in li.a)Β on the mood bar go away/become transparent like li.f? I attempted the !important, but I don't know if I'm using the correct CSS for this area.
Thank you for your precious time!
π: 0 β©: 1
Hi! They have to be in the same order as showed here
π: 0 β©: 1
Ah!
It somehow worked after a few times and I believe that is why! Sometimes common sense makes us silly!
Thank you so much again!
π: 0 β©: 0
Thanks for this: both the image and the list helped me a lot!
π: 0 β©: 1
And I'm glad you did it! For beginners there is nothing harder than "simple, easy" things!
π: 0 β©: 0
how do you replace the links on jurnal enterys
π: 0 β©: 0
Do you know how to make words bold, italic, underline, italic underline, etc? I need it for my Journal.
Thanks~!
π: 0 β©: 1
Bold: Text
italic: text
underline: text
π: 0 β©: 1
Thank you so much~! You have truly saved my life...and my story. O_O
What would you like me to do in return? Perhaps an internet cookie??? 
π: 0 β©: 1
no prob! Thank to you to notice me the absence of this basical info ^__^
π: 0 β©: 1
Anytime, sour lime!! 
Soooo, wanna be friends?! :{DDD
π: 0 β©: 1
why I should think you're mad? XD
π: 0 β©: 1
IDK I looked over it, and the way I typed it sounded...mean and a bit b***hy...but I didn't mean it like that!! Swear it on...this here pancake! O_O So..friends?!
π: 0 β©: 0
OKay, I have been trying to figure out where to actually make a new journal skin for the longest time, and I am having no luck, so where is it that I can start out with a blank journal skin that I can create?
π: 0 β©: 1
When submitting a new journal entry in the top you can find "edit skin" but there's no css text, my list have this pourpose ^^
(anyway this isn't the only lesson, just an introdution!)
π: 0 β©: 1