Shop Mobile More Submit  Join Login
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
28 out of 75 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
47 out of 49 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconzeriten:
Zeriten Featured By Owner Feb 8, 2015  Student Digital Artist
THANK YOU!!! :D x1,000
Reply
:icondancing-firefox:
Dancing-firefox Featured By Owner Feb 4, 2015  Hobbyist Digital Artist
Helps a lot ^^ ty
Reply
:iconsafire4190:
SaFire4190 Featured By Owner Dec 29, 2014  Hobbyist Digital Artist
Okay, I don't want a header for mine and I don't know how to put this image as the main part of the journal instead of just one plain color: fc00.deviantart.net/fs71/f/201… do you know how to do this?
Reply
:iconenwings:
ENwings Featured By Owner Jan 10, 2015  Student General Artist
I haven't worked with CSS in over three years. I'm really sorry but I can't help you. I've stopped answering questions for this a long time ago because I just don't have the time to figure it all out again. You might be able to find your answer in the other comments. I'm sure I've answered it already. Good luck, I hope you find your answer.
Reply
:iconpoopydoopers:
poopydoopers Featured By Owner Oct 20, 2014  Student General Artist
How do we upload the code document?
Reply
:iconenwings:
ENwings Featured By Owner Oct 22, 2014  Student General Artist
if you go to post a new journal, there should be something to click on that says 'edit skin' and you will put your code in the body of that page. And keep in mind you can only make a custom journals if you have a DA subscription :) good luck.
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
:iconenwings:
ENwings Featured By Owner Mar 19, 2014  Student General Artist
Do you pay for a subscription?
Reply
:iconchabichoun:
chabichoun Featured By Owner Mar 21, 2014
no

i have to do it ? :confused:
Reply
:iconenwings:
ENwings Featured By Owner Mar 23, 2014  Student General Artist
Yes, in order to customize your journal you need to have a payed subscription to DeviantArt. 
Reply
:iconchabichoun:
chabichoun Featured By Owner Mar 24, 2014
that means that i have to be premium ? 0.O
Reply
:iconenwings:
ENwings Featured By Owner Mar 25, 2014  Student General Artist
Yes it does.
Reply
:iconrametic:
Rametic Featured By Owner Jan 21, 2014  Hobbyist General Artist
Wow this is very helpful!!! THANK YOU!!!! 

----------------------

Though I have a small question if you don't mind; 
How do I change the title color? I thought I did when I added ' color: #------; ' into '.journaltop h2' but the text is only grey/dark/black. Is this just a bug in my journal coding or am I doing something wrong?

thanks in advance! c:
Reply
:iconspoonyliger:
spoonyliger Featured By Owner Feb 4, 2015  Professional Digital Artist
I've found a work-around to this problem — change the color of body links like so:

body a {color:#527ACC;}

Pros: This changes the color of the Journal title.
Cons: This also affects all the links on the journal.
Reply
:iconspoonyliger:
spoonyliger Featured By Owner Feb 5, 2015  Professional Digital Artist
Actually, remove the "body" word from that code I provided otherwise it won't work.
Reply
:iconenwings:
ENwings Featured By Owner Jan 21, 2014  Student General Artist
Thank you, I'm glad my tutorial was helpful. :) I've been asked this once before.  To be honest, I don't think you can change it to a color besides gray or that default blue. If it can be done I don't have the answer for you.
Reply
:iconsailorgundam:
sailorgundam Featured By Owner Jan 12, 2014
I'm so sorry to be a bother but I have two questions~!
If I may ask, of course.

How do I get rid of the .tri [arrowhead pointing downward]?
And how do I hide the 
.gr-top span [the journal date]?

I know the basic coding but for some reason,
it's clashing with what I've followed with this tutorial thus far.
It stops working completely and I'm not sure where I'm going wrong.

Again; I'm so sorry to be a bother!
And thank you so much for the above information!

It's really helped me further understand CSS. (:
Reply
:iconenwings:
ENwings Featured By Owner Jan 12, 2014  Student General Artist
Sorry, I don't know how to fix those things.
Reply
:iconserenityame:
SerenityAme Featured By Owner Dec 6, 2013  Hobbyist General Artist
do you know how to add a scroll bar in a journal?
Reply
:iconenwings:
ENwings Featured By Owner Dec 7, 2013  Student General Artist
I don't, I haven't coded a journal in well over two years now. You might find the answer in some of the comments left a while ago. Sorry I can't help with this anymore.
Reply
:iconserenityame:
SerenityAme Featured By Owner Dec 7, 2013  Hobbyist General Artist
Thank you for your time it took me a few hours but i figured it out on my own by searching a few specifics XD
Reply
:icontsuanamiy:
tsuanamiy Featured By Owner Oct 26, 2013  Hobbyist General Artist
Thank you so so much!!!
Reply
:iconx-coldmirror-x:
x-coldmirror-x Featured By Owner Aug 19, 2013  Hobbyist
Thank you so much !!! 

You helped me so much !!! :iconletmehugyouplz:
Reply
:iconxxeclipsethecatxx:
xXEclipseTheCatXx Featured By Owner Jun 12, 2013
I seem to having a problem ^^;
My background image does not show up in the entire journal only in the top part. And it's only showing a section of the image....
Reply
:iconenwings:
ENwings Featured By Owner Jun 12, 2013  Student General Artist
The link needs to go in two different places in the journal if you want it in both the header and the body... also try making the image smaller.
Reply
:iconxxeclipsethecatxx:
xXEclipseTheCatXx Featured By Owner Jun 12, 2013
Where would I put the second?
Reply
:iconenwings:
ENwings Featured By Owner Jun 12, 2013  Student General Artist
Read through the entire tutorial I explain it.
Reply
:iconxxeclipsethecatxx:
xXEclipseTheCatXx Featured By Owner Jun 12, 2013
I'm sorry, but I can't get it to work.
Reply
:iconenwings:
ENwings Featured By Owner Jun 13, 2013  Student General Artist
Ah, I'm really sorry, I don't know how to help you any more than the tutorial.
Reply
:iconcherryalacrity:
CherryAlacrity Featured By Owner Jun 2, 2013  Student General Artist
Thank you!~ This was sooo helpful! OMG
Reply
:iconkittylyn-donut:
Kittylyn-Donut Featured By Owner May 29, 2013  Hobbyist General Artist
that's excellent! exactly what I was looking for!!! thank you so much for this "heleped-template"!!!!! :iconllamajumpplz:
Reply
:iconinazumajuggon:
InazumaJuggon Featured By Owner May 25, 2013  Hobbyist Traditional Artist
Just want to know how do remove mood from the journal.
Reply
:iconkittylyn-donut:
Kittylyn-Donut Featured By Owner May 29, 2013  Hobbyist General Artist
It's not displayed if you do not ask for it
Reply
:iconenwings:
ENwings Featured By Owner May 27, 2013  Student General Artist
Hummm I don't think it's possible to remove it. I don't know for sure.
Reply
:iconloweee:
loweee Featured By Owner May 23, 2013  Hobbyist Digital Artist
this really helped me! but how about the cursor?
Reply
:iconenwings:
ENwings Featured By Owner May 23, 2013  Student General Artist
I don't know how to do that.
Reply
:iconloweee:
loweee Featured By Owner May 23, 2013  Hobbyist Digital Artist
Oh ok :aww: but thanks again :D
Reply
:iconjeroine:
Jeroine Featured By Owner May 21, 2013  Hobbyist General Artist
Thank you for this tutorial! :3
It helps a lot!
Reply
:iconpezicreation:
PeziCreation Featured By Owner May 20, 2013  Hobbyist Digital Artist
hi! i only want to give my own picture in the background of my journal...and i load the picture to imageshack to get the right url...but witch url i must take in the *skin CSS* ? i try out the direkt link and http code..but it dont works? i type in the *skin CSS* feld...background-image: url( http.....);...but it dont works?..i only want to give my picture in the background :((( hope you can help^^^ nice greetings !
Reply
:iconenwings:
ENwings Featured By Owner May 20, 2013  Student General Artist
You want the direct link. After uploading your image view it. Then right click on the image and select 'View image' then copy and past the URL from that page to your code where I have explained to place it. Example ( background-image: url([link]; ) Also make sure where it says 'background-color' you have written 'transparent' so it should look like this background-color: transparent;

Good luck.
Reply
:iconpezicreation:
PeziCreation Featured By Owner May 20, 2013  Hobbyist Digital Artist
thank you-now i have the rigth image link..but it dont show me the image..i only see the green background..i type in this:
.journaltop {
background-image:url([link];
background-position:top center;
background-repeat:no-repeat;
color:transparent;
font-family:ComicSansMS;
font-size:12px;
text-align: center;
padding-top: 600px;

....what i do wrong?...so sorry for ask for help..but im so happy someone can help^^
(i only want the image background and only one box where i can write in a text and links..thats all i need)
Reply
:iconenwings:
ENwings Featured By Owner May 21, 2013  Student General Artist
Looks pretty good, you might have to look through your entire code and find places you have color where you don't need it for example anything that says 'background-color' needs to be answered with a transparent. Where it just says 'color:' needs to be answered with a color. I see in what you have there 'color:' answered with 'Transparent' try answering it with a color code like #000000; and see if that changes anything. CSS it picky so one little thing can break the entire code.

:D I'm happy to help, especially on questions I still remember to answer. XD
Reply
Add a Comment:
 
×

:iconenwings: More from ENwings





Details

Submitted on
August 5, 2008
File Size
11.9 KB
Thumb

Stats

Views
23,852 (3 today)
Favourites
793 (who?)
Comments
372
×