Shop More Submit  Join Login
×

:iconenwings: More from ENwings





Details

Submitted on
August 5, 2008
File Size
11.9 KB
Thumb

Stats

Views
22,992 (2 today)
Favourites
773 (who?)
Comments
365
×
Basic codes for CSS journal

Ok I don’t have any examples (except for my journal) but if you fallow what I say it’s really easy!!

Ok First,
Copy and past this into the space in your journal labeled "add CSS"! I will break it up into sections and help you fill it out!

.journalbox {
border-color: #------;
border-style:------;
background-color: #------;
color: #------;
font-family: -----;
font-size:--px;
text-align: ----;
}
.journaltop {
background-image:url(---------------------);
background-position:----------;
background-repeat: -----------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
padding-top: ------px;
}
.journaltop h2 {
background-color: #------; or
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}
.journalbox .list {
background-color: #------;
color: #------;
font-family: ------;
font-size:--px;
text-align: ------;
}
.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}
.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}
.journaltext a:visited {
color: #------;
font-family: ------;
font-size:--px;
}
.journaltext a:active {
color: #------;
font-family: ------;
font-size:--px;
}
.journaltext a:hover {
color: #------;
font-family: ------;
font-size:--px;
}

.................................................
Notes:
American spelling only
Color= text color
Font-family= font style
Font-size= font size
Text-align= center, align left/right
You can choose whatever colors fonts you want.

……………………………………………..

Lets start with (Journal box) the section witch pretty much controls the entire journal:

.journalbox {
border-color: #------;
border-style:------;
background-color: #------;
color: #------;
font-family: -----;
font-size:--px;
text-align: ----;
}

Ok how you fill all that in. (remember in yours there should be no spaces)

border-color: #------;
This is the border of the journal.
Here we will use a hex code (color code) such as #000000 = the color code for black. You can find all the colors of the rainbow here www.december.com/html/spec/col…. You will use these color codes in every place that requires color. Example with black:
border-color: #000000;

border-style:------;
This is the style of the border. (This line is optional and can be left out.)
You can fill in the blank area with one of the following:

solid
double
groove
dashed
inset
outset
ridge
hidden

Example using solid:
border-style: solid;

background-color: #------;
Like it says it’s the background color of your journal  
Example with a white background:
background-color: #FFFFFF;

color: #------;
Hers the color of the journal's text
Example using black:
color: #000000;

font-family: -----;
Determines the font.
I recommend using the basic fonts because if someone viewing your journal does not have the fonts you have installed, the browser will select it's own default font:
Basic fonts:
Times
Vendera
Comic Sans MS

Example using Comic Sans MS:
font-family: ComicSansMS;

font-size:--px;
Determines the size of the font.
12px is considered an acceptable size.
Example with 12px:
font-size: 12px;

text-align: ----;
Determines the alignment of the text.
You can choose which ever setting you like: center, left, right or justify.
Example with center:
text-align: center;

You’re done with the first step the foundation it should look something like this:

.journalbox {
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
}

……………………………………………..

.journaltop {
background-image:url(---------------------);
background-position:----------;
background-repeat: -----------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
padding-top: ------px;
}


Moving on "journaltop” refers to the very top of the journal (the date and graphic)

background-image:url(---------------------);
Controls the image at the top of the journal.
I recommend using an image of about 900px wide by 250px high. After creating the image you would like to use upload it to a file server. I used Photobucket cause it’s easy!
Copy and past the URL provide to the space between the (…)
Example with my image:
background-image:url(i77.photobucket.com/albums/j63…;

background-position:----------;
This is simply the placement of the image.
You can use: top center, top left or top right.
I have chosen "top left", so the line will look like this:
background-position: top left;

background-repeat: -----------;
Controls whether the image is tiled throughout the journal. I only want it on the top so I’ll use "no-repeat". Example:
background-repeat: no-repeat;

color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
This is the same as before just fill it in the same as before, unless you would like to use a different color than the mane journal.

padding-top: ------px;
Determines where the date is. I just used 200px the date and heading usually sit at the very top of the journal. This line of code brings it down. Example:
padding-top: 200px;

You’re all done with part 2, It should look similar to this:

.journaltop {
background-image:url (i77.photobucket.com/albums/j63…;
background-position: top left;
background-repeat: no-repeat;
color:#000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
padding-top: 200px;
}

……………………………………………..


.journaltop h2 {
background-color: #------; or
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}

This section of code controls the title of your journal

background-color: #------;
Instead of using a color here, I used "transparent" Because I wanted my background image to be seen. Example:
background-color: transparent;

I got lazy and so this is what my code looked like if you want throw you can change the color and font the same as before

My finished code:
.journaltop h2 {
background-color: transparent;
}

……………………………………………..

.journalbox .list {
background-color: #------;
color: #------;
font-family: ------;
font-size:--px;
text-align: ------;
}

.journalbox .list .a {
background-color:#------;
color:#------;
font-family: ------;
font-size:--px;
text-align: ------;
}

These 2 sections of code control the "moods" area of your journal.  

All you have to do is fill it in, I just assumed that each section did as it was labeled
Example:
Color= text color
Font-family= font style
Font-size= font size
Text-align= center, align left/right

.journalbox .list {
background-color:#ffffff;
color:#000000;
font-family: verdana;
font-size:12px;
text-align: center;
}

.journalbox .list .a{
background-color:#000000;
color:#ffffff;
font-family: verdana;
font-size:10px;
text-align: center;
}

I left this out on my journal.

……………………………………………..

.journaltext a:link {
color:#------;
font-family: ------;
font-size:--px;
}

This section determines how the links will look in the body area of your journal.

I chose firebrick red as the color its code = (:#CD0000). The font family and size should be the same as your regular text which we coded in the very first section (.journalbox). You can change them if you want.

Example:

a. link

.journaltext a:link {
color: #CD0000;
font-family: ComicSansMS;
font-size: 12px;
}

Now we move on to how the link will look when you click on it or hover over it, etc.
b: visited

.journaltext a:visited {
color: #------;
font-family: ------;
font-size:--px;
}

c: active
A link becomes active once you click on it.

.journaltext a:active {
color: #------;
font-family: ------;
font-size:--px;
}

d:hover

.journaltext a:hover {
color: #------;
font-family: ------;
font-size:--px;
}

These 4 sections need to go in this order.
a:link
b:visited
c:active
d:hover

Once you have filled in all the blanks, the section should look like this:

.journaltext a: link {
color: #CD0000;
font-family: ComicSansMS;
font-size: 12px;
}
.journaltext a: visited {
color: #FFE303;
font-family: ComicSansMS;
font-size: 12px;
}

.journaltext a: active {
color: #000000;
font-family: ComicSansMS;
font-size:12px;
}
.journaltext a: hover {
color:  #000000;
font-family: ComicSansMS;
font-size: 12px;
}

……………………………………………..

And now you are done. It’s not the most elaborate thing in the world but it gets your journal looking nice.

Example of my finished CSS code:

.journalbox {
border-color: #000000;
border-style: solid;
background-color: #FFFFFF;
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
}
.journaltop {
background-image:url (i77.photobucket.com/albums/j63…;
background-position: top left;
background-repeat: no-repeat;
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
text-align: center;
padding-top: 200px;
}
.journaltop h2 {
background-color: transparent;
}
.journaltext a:link {
color: #CD0000;
font-family: ComicSansMS;
font-size: 12px;
}
.journaltext a: visited {
color: #FFE303;
font-family: ComicSansMS;
font-size: 12px;
}

.journaltext a: active {
color: #000000;
font-family: ComicSansMS;
font-size: 12px;
}
.journaltext a: hover {
color:  #000000;
font-family: ComicSansMS;
font-size: 12px;
}

I hope this helped… If I can figure out more tricks Ill make another lol!!!
Edit:
Alright guys, I'm really sorry but please stop asking me to code your journals. I'd like to help and I'll answer any questions you may have to the best of my ability but I don't have time to create and code journals for every person that asks.

. . . . . . . . . . . .

Extras:
:bulletblue: Color codes [link]
:bulletblue: Upload bg images [link]

I finally figured out how to code a css journal, and in my excitement on how easy it was to do I made a tutorial lol

This thing really angered me because it was impossible to find someone to help me. Everyone wanted me to download theirs or something and I'm not big on downloading things from the net. After hours of research I was able to pull together a very simple journal, I'm very excited :XD:

Not (c) to me cause I didn't create css

sorry for the category it would not let me upload to tutorials cause its not a JPEG, PNG, or SWF damn DA
Add a Comment:
 
:iconaqua-amethyst-angel:
i don't understand the codes is the only thing i think is the problem! can you help please? i really want to make a journal skin what do you say? i beg you i need help badly!

anyway this is otherwise a good tutorial at least i think it is, ican't really tell since this is the second tutorial i have ever read. damn my head hurts what else can i say um let's seei wish i knew what these codes meant!

this is very annoying when i don't knoe how to do things it makes me very angry! well done anyway!
What do you think?
The Artist thought this was FAIR
26 out of 67 deviants thought this was fair.

:iconkatieosika:
A good tutorial for anyone looking to change up their journal skin. I think everything is laid out in an easy to understand manner. I especially like that this tutorial gives the whole code first and then breaks it down. That helped me find the section of code in my journal skin that makes the title color change (even if this tutorial didn't fix my problem, I still know where to start looking. It's a great tutorial for anyone who has basic css knowledge, but needs a bit bigger push.

Great job with it, especially for one that doesn't have pictures :)
What do you think?
The Artist thought this was FAIR
41 out of 43 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconpoopydoopers:
poopydoopers Featured By Owner 22 hours ago  Student General Artist
How do we upload the code document?
Reply
:iconvelxeno:
Velxeno Featured By Owner Aug 31, 2014  Student Traditional Artist
whenever i put an image in it dose not come up
this is what i put

background-image:url(i1382.photobucket.com/albums/a…;
Reply
:iconenwings:
ENwings Featured By Owner Sep 8, 2014  Student General Artist
Do you have a subscription to DA, you won't be able to customize your journal without one. If you have that then make sure you are using the direct link url... like you have right clicked and said view image and then taken the url. otherwise I really don't know anymore. I haven't coded a css in over a year ^^;
Reply
:iconbluebanepop:
BlueBanePop Featured By Owner Mar 31, 2014
this will sound silly I'm sure but how do you make a link with the arrowhead? I can do and have a basic understanding of everything else I'm just not sure how to make that kind of link >< also just to be clear, I don't leave any spaces between the coding like color: #CD0000; right? I made a journal before and succeeded, but it was very simple and was a billion times more complicated than this. it was very frustrating ;v;
Reply
:iconenwings:
ENwings Featured By Owner Mar 31, 2014  Student General Artist
I will send you how to link in a note, if I send by comment it links instead of showing you the code. LOL Actually I don't think the spaces matter anymore. I'm glad this was helpful!
Reply
:iconbluebanepop:
BlueBanePop Featured By Owner Mar 31, 2014
It's very helpful! heh, thank you for helping I am a dummy! 
Reply
:iconenwings:
ENwings Featured By Owner Mar 31, 2014  Student General Artist
Not a problem! :D
Reply
:iconchabichoun:
chabichoun Featured By Owner Mar 2, 2014
i dunno why, but i can't save anything 0_O' . . . 
when i open the "edit skin", the save button disappears . . . :confused:
Reply
:iconenwings:
ENwings Featured By Owner Mar 2, 2014  Student General Artist
That sounds more like a technical issue you might have to take up with Deviantart. I've never seen that before.
Reply
:iconchabichoun:
chabichoun Featured By Owner Mar 19, 2014
i have some account . . . and in all that doesn't work. i don't think that it's a technical problem because i have waited one month to try again, and it's still like that. . .  : /
Reply
Add a Comment: