HOME | DD
cerena β CSS Journal Tutorial Part III
Published: 2009-07-17 05:15:26 +0000 UTC; Views: 27893; Favourites: 654; Downloads: 1259
Redirect to original
Description
Part I.Part II.
************
Journal CSS by Β’mindfuckx
************
UPDATED AGAIN!! - 8.1.09 - fixed the transparent background issue
First draft! -- This kindof sucks, so I will hopefully be updating this with a more clear version Edit -- code comments updated slightly.
Click "Download" for file that includes my test file and a commented version of the code -- that is half the tutorial after all.
So please excuse all the text in this part.And you need a subscription to use journal CSS, btw... @_@
Please be sure to include a link to this tutorial in your new journal layout in your credits!
This is the third and final part, long awaited! The other two parts deal with image preparation and planning, so be sure to check those out. If you find this tutorial helpful, please link back or favourite so other people can find it.
If you have any suggestions, questions or comments, post them! I love comments. Mmmm comments.This is less a "copypaste and it will work" kind of thing, more of a "use this to teach yourself something about CSS" kind of thing.
Which is why I have provided some basic CSS info links below.Now get out there and get journalin!
******
Helpful links
******
Lissa Explains - an INVALUABLE guide to CSS/HTML!! (read before asking CSS attribute questions, click "CSS" along the top bar)
DaFont.
CGTextures.
-----
Artwork and content Β© Cerena 2008.
Chamma Chamma girl (Devi) is here .
Related content
Comments: 114
Thanks a lot! I'll try that!
π: 0 β©: 0
Cerena - brilliant. TY for sharing. I am easily confuzzled with such things!
π: 0 β©: 1
Lemme know if you have any questions and I'll try to figure em out! <3
π: 0 β©: 0
First off, thank you for making this ; u; It was so helpful and I love how it made mine turn out <33 though there's one thing i need help with..
[link]
How do you get rid of the journal title? D:
π: 0 β©: 0
First : Thank you for this tutorial, ^^ it help me a lot !
But yet ;____; my background doesn't work... Can you help me please ? I don't understand how to replace the background color with my background ( .png ).
(French Girl has bad English)
π: 0 β©: 0
i failed.
after 2 hours of work i failed.
*headdesks and cries to infitity*
π: 0 β©: 1
Ahhhh write me what went wrong and I'll see if I can fix it. @3@ I know this tutorial is ridiculously unhelpful at times... it was a big topic and my first time attempting.
π: 0 β©: 1
well, i kinda freaked out already when i've seen that bidass code D:
i dunno how to put in the background.
π: 0 β©: 0
Thanks so much for this tutorial! When I get a subscription I'm definately trying this out!
π: 0 β©: 0
hang on, how do you get the codes onto it and make it work? isnt the whole thing a picture, you cant get text of pictures to work! im confused
π: 0 β©: 0
Hey, thanks so much for this tutorial~ I modified it a bit and created this [link] . :3333 Just wanted to thank you for posting this and let you know I used it.
π: 0 β©: 0
AUUGH, I CAN'T SHOW THAT CORNERS!!
See my preview here: Click just here
π: 0 β©: 0
My god, you helped me so much. :] Thank you for the tutorial. Now I can start practicing other types of journals too! Please take a look at my page!
π: 0 β©: 0
how do you add pictures to ur journal! i don't mean thumbs i mean those other pics people paste for example: [link]
π: 0 β©: 1
make sure you keep the "s there or else it will just be broken text.
π: 0 β©: 0
Hey, Great Tutorial! even I decided to try it out. I didn't realize it would take such a long time. @__@;; Figuring out the code is EVIL!
however, I'm having a tiny issue that I can't seem to fix. between my image picture at the top and my journal box, there's a space between that I cant seem to get rid of.
I'd like the picture to connect to the box cleanly, like you have your picture to your journal box.
would you know how to fix that?
π: 0 β©: 0
wow this is a great refference ^^ i can't wait to try this stuff ^^
π: 0 β©: 0
Hey. Thanks so much for this!
π: 0 β©: 0
Thanks a lot for the tutorials! I've already tried it, But some of the parts doesn't seem to work right... could you help me..?? >_<
π: 0 β©: 1
Absolutely.
π: 0 β©: 1
well, here's my edited journal [link]
I haven't put my own header yet(still working on it...) but the corners can't match with the borders, even though i tried to do it exactly like your tutorials. and the subheader thing doesn't work... i can't change the format of it... i tried changing the font but it won't work... halp... >_<
π: 0 β©: 0
thanks so much, I have been a lil to scared to even try I think I can do it now !!! very helpful tutorial <3
π: 0 β©: 1
π: 0 β©: 0
Ok Some of the commented CSS code I dont understand.
How exactly do you get the header picture on?
and how do you know the colour numbers?
Good tutorial anyway
π: 0 β©: 1
The color numbers are hex codes... I think that is what you are referencing... and those you can get from Photoshop or even an online color picker.
The header picture you just replace the image in the "h2" section (I believe, I'm not looking at the code, but whereever you see a URL you will have to replace with the URL of your own image uploaded to your own server)... I think.
Please let me know if you'd like any help coding though.
π: 0 β©: 1
Ahh right I think I get it now!
π: 0 β©: 0
its cdd8c8
And also i finished my journal, if you wanted to see it [link] i made it a bit more my own though... very simplified compared to the one you were making here, but thats how i wanted it
thanks again for the help
π: 0 β©: 0
could you possibly tell me what the code is for the new DA background colour?? it would be much appreciated
π: 0 β©: 1
AUGHHHHHH.
I had trouble finding this myself, which is why I went with "transparent" for my background value rather than an actual hex code. Is that possible with your design, or do you really really need the hex value? (cause... I'm not sure what it is yet...)
π: 0 β©: 1
Well i can try
but thanks
π: 0 β©: 1
Yeah, like the first part of the tut says, it is always better if you can do the top image as a transparent background .png just in case you want to have ANY type of color behind it.
π: 0 β©: 1
I Dont usually do things on the computer, im more of a pencil artist, but im finding my way around. If i finish sometime soon, i'll send you a link if you want.
thank you so much for taking the time to make these journals, and being willing to help all our silly little problems
π: 0 β©: 1
It's no problem at all! I wish I were better at tutorials, so in the meantime I will answer everyone's questions individually so I can know which parts of the tut need to be fixed, ya know? Please do link me when you get finished, I would love to see what you've made/help out any way I can! <3
π: 0 β©: 1
good idea! then you can get a knew, untrained eye to tell you if anything is confusing!
I will, thanks
π: 0 β©: 0
AND the background won't show up either...
π: 0 β©: 1
Okay, I looked at what I think is your code. You are missing the
background-image: ([url goes here])
code tag in the ".fix2" section, and that's what makes the background show up. I BELIEVE the border is actually already showing up (as that value is correct in the .fix2, at 3pixels) but because the background image isn't showing up you can't tell (it's the same color as the background, that navy color?). I think that's right.
For a quick way to compare, look at one of my older journals, like this one: [link]
Right click, "view source" and in the section after it says "begin custom css" that is my code. Check to see what differences there are between that and your own source code (right click on your journal entry, view source, etc). Compare the two and note the differences, like the absence of that background-image tag.
Does that make sense? It is sometimes difficult to describe CSS to beginners for me... I am doing my best.
π: 0 β©: 0
the borders won't show up :C
i even tried our your code and it won't work...
help?
π: 0 β©: 1
Okay, the border on the journal entry, or the corners? Because the border should be defined by a CSS value (border: 4px, or what have you)...
Did you make sure of all your image links? Please link me to the journal entry you are using for testing, and I can try to look at your source code that way.
π: 0 β©: 0
Lissa has a page but should I download in html or sectection under 1 or so, I click where
π: 0 β©: 1
Nono.
Lissaexplains is just a helpful resource for when you are trying to use CSS attributes. It is a good primer on what CSS is and how it works for the beginner. For that information, use this link: [link]
The download link is at the side of this deviation (at the top, underneath the favourite button). That is my file with my CSS texts inside it for you to look at or use. Click download, you'll download a zip file, and inside that zip file are css.txt and csstext.txt files, etc, along with the images that come with the original journal layout (which you will be MODIFYING to create a new one based on my tutorials).
If you are still having trouble and this is a language problem, you can possibly post questions in German and I MAY be able to get my father to translate. Otherwise these are still not complete sentences you are leaving me, so I still am not totally sure what you are referring to part of the time.
π: 0 β©: 0
my pic is colored (can you see in my galery(a rhyme)
but where are the css text and by lissa cant i find the text...
mainen kesa asa gohan kangearu dewa...arimasen,shikashi...kuwashi yume womiru chotto..yuumei-KOTO:
θ³γ¨Celerachiγγ±γ’γ³
π: 0 β©: 1
Did you download the file? (click download on the side) Should be in that folder... for the CSS... Lissa is linked in the description... I'm still not totally sure what you're asking. Please use complete sentences so I can understand you better? "by lissa can't i find the text" doesn't tell me WHICH text or what exactly you are trying to do that you are unable to do.
π: 0 β©: 0
Um.... can you rephrase the question? I'm really not sure what you're referring to exactly/what you are asking.
π: 0 β©: 0
cerena 
i'm creating a new journal top for my journal
my height is longer than my last journal top was, (you said in your tut that i could be long so long as it wasn't ridiculous 
can you help me please?
π: 0 β©: 1
Did you check your padding/top setting?
π: 0 β©: 1
| Next =>