HOME | DD

cerena โ€” CSS Journal Tutorial -- Part I

Published: 2008-03-27 06:59:12 +0000 UTC; Views: 75431; Favourites: 1551; Downloads: 1561
Redirect to original
Description Part II .
Part III .


************
Journal CSS by ยขmindfuckx
Header image in that CSS by `bad-blood
************

First draft...

And you need a subscription to use journal CSS, btw... @_@

This is the first of two or three parts, the others dealing with additional layout features and coding. 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.

I'll post the finished layout to my own journal once I finish up the tutorial. I hope this is sooper helpful!! :3

-----
Artwork and content ยฉ Cerena 2008.
Chamma Chamma girl (Devi) is here .
Related content
Comments: 98

Amilee [2010-11-20 20:23:37 +0000 UTC]

Very informative and I will most certainly be using it for my modeling page I do hope you'll drop by to see the end results! Thanks so much!

๐Ÿ‘: 0 โฉ: 0

WolfofDawn [2010-11-20 18:47:11 +0000 UTC]

I shall try this โ™ฅ~

If I get free time |:

โ™ฅ~ Thanks for uploading this.

๐Ÿ‘: 0 โฉ: 0

Alba-Jimenez [2010-11-19 18:35:03 +0000 UTC]

woooah~ easy to edit, neat skin... LOVE IT! I'll try this as soon as I get more free time @w@

๐Ÿ‘: 0 โฉ: 0

LumbarPuncture [2010-10-25 01:03:05 +0000 UTC]

Great series of tutorials! Thanks so much for making them~

๐Ÿ‘: 0 โฉ: 0

Flashykaabii [2010-08-15 18:12:20 +0000 UTC]

C'est super ! Its amazing :3

๐Ÿ‘: 0 โฉ: 0

DoctoramalL [2010-06-27 12:16:24 +0000 UTC]

I am sooooo gonna try to make a journal skin now

((just don't know when D: ))

and

๐Ÿ‘: 0 โฉ: 0

CrimsonPumpkin [2010-06-25 07:37:22 +0000 UTC]

Hello there!! I just followed your tutorial and I made my 1st journal skin thanx a lot it was so useful!!! And it is true that CSS code is trial and error...I learnt a lot with this!! If you want to you can check it on my profile here
Again THANX A LOT!!!

๐Ÿ‘: 0 โฉ: 1

cerena In reply to CrimsonPumpkin [2010-06-26 01:05:24 +0000 UTC]

Looks awesome!!! I'm so glad it worked! I DO need to update this tutorial. @_@ I want to make it more generalised. I'm really glad it worked for you!!

๐Ÿ‘: 0 โฉ: 0

dl-p [2010-06-18 10:10:20 +0000 UTC]

I featured your journal here - [link] ;D hope u don't mind!

๐Ÿ‘: 0 โฉ: 0

WoWnerdsrule In reply to ??? [2010-05-27 06:09:44 +0000 UTC]

most excellent tutorial! thank you so much for sharing this information! even though i have no membership i was looking for somthing like this, many thanks and i put it in my "references folder" So those who need help as well can head on over and find it, i did a tripple favorite too so you got three favs for one person!

๐Ÿ‘: 0 โฉ: 0

SilverPixiGirl In reply to ??? [2009-12-12 21:17:19 +0000 UTC]

Nice job! I like your style!

๐Ÿ‘: 0 โฉ: 0

Kitsura-of-the-leaf In reply to ??? [2009-11-30 04:48:37 +0000 UTC]

I was wondering, some journals I've made with this tutorial are a bit thin. how would you make this to be wider?

could i just widen the pixels at the appropriate spots? Wonderful tutorial, as ive expressed before, I'm just curious because im thinking of making a journal CSS that's a bit wider.

๐Ÿ‘: 0 โฉ: 0

ArcaneRaven In reply to ??? [2009-11-18 13:03:37 +0000 UTC]

been looking for this! thanks

๐Ÿ‘: 0 โฉ: 0

hyenadon In reply to ??? [2009-11-11 08:45:18 +0000 UTC]

This is a great tutorial but I don't understand the "mockup".

I've never done this before so.. yeah. Do you just create a random box with a bg and text?

I'm upto the fake text in tutorial 2 so I'm just a bit confused.

๐Ÿ‘: 0 โฉ: 0

GreenLightningBolt In reply to ??? [2009-09-27 05:17:29 +0000 UTC]

Thanks, I'll have to give it a try! I've been wanting to make my own!

๐Ÿ‘: 0 โฉ: 0

terrordactil In reply to ??? [2009-09-14 05:29:35 +0000 UTC]

thaks

๐Ÿ‘: 0 โฉ: 0

Tifa22 In reply to ??? [2009-08-10 21:07:53 +0000 UTC]

Awesome! I'll have a look at all three!

๐Ÿ‘: 0 โฉ: 0

MMWoodcock In reply to ??? [2009-07-22 01:33:08 +0000 UTC]

Your tutorial really helped me out a lot. i struggled for hours and got a headache but hey i finished my new journal lol

[link]

The size is strange to me but eh i dont care

thanks for this tutorial as i just went by what you said and figured the code out more or less alone

i tried the CSS test one but the image of Fella never appeared for me :/

i pasted it 6 times doing different stuff with the link XD

๐Ÿ‘: 0 โฉ: 1

cerena In reply to MMWoodcock [2009-07-23 22:37:17 +0000 UTC]

Did you make sure to update the URLs of the main images? You have to upload the fella image that comes with the original code to your own server, then update the url of the image in the css to reflect where you are keeping that image..... if that makes any sense.

CSS is really hard to describe to people, hence why I've had some trouble with this tutorial. Anyway, I am happy to look over any code if you need specific help. Though your journal looks great to me! Please if there are any part of the tutorial I can explain better, or things I forgot to explain properly, let me know so I can update the tut. <3 It looks like the struggle was worth it, though, really, I do love the Christmassy gold.

๐Ÿ‘: 0 โฉ: 1

MMWoodcock In reply to cerena [2009-07-23 23:55:26 +0000 UTC]

Ahh well duh XD hee. i was expecting it to just load from where you had it saved XD (which i thought was Photobucket) but if i dont have access to your page... then duh

and if i do i will be sure to ask XD. and thanks i know its not as good as it could be but i needed something simple to see how it worked

the coding part on the tutorial was really confusion. Even though you had labels to explain where things go, when i referenced it to the CSS test it confused me. I figured it out though so i'm sure someone else can too and thank you for the turorials

๐Ÿ‘: 0 โฉ: 0

Drakague In reply to ??? [2009-06-07 20:02:12 +0000 UTC]

No links to the other 1 or 2 guess I'll have to look for um them :/

Very nicely done I just wanted an image in my header and a BG color no other CSS coding for me at the moment. Wanted to see how it was done hehe!

๐Ÿ‘: 0 โฉ: 1

cerena In reply to Drakague [2009-06-09 03:11:24 +0000 UTC]

Part II is in my tutorials section of my gallery. Part III is forthcoming, soon as I get out from under all this work, I promise! <33 I hope this is somewhat helpful for the header, though, it's just a matter of plugging elements into the existing code after that and testing testing testing!

<3

๐Ÿ‘: 0 โฉ: 1

Drakague In reply to cerena [2009-06-21 21:00:03 +0000 UTC]

Thanks! ^.^

๐Ÿ‘: 0 โฉ: 0

Stripesandstars [2009-04-09 14:33:57 +0000 UTC]

This is really helpfull! Not that I have a subscription or anything, but you know... When I DO have a subscription, at least I'll know what to do xD

๐Ÿ‘: 0 โฉ: 0

SneakyFerret [2009-01-16 23:16:58 +0000 UTC]

You my dear, are a superstar. Thank you!

๐Ÿ‘: 0 โฉ: 0

flutist [2008-10-08 05:12:32 +0000 UTC]

thx, really help

๐Ÿ‘: 0 โฉ: 0

Anmaril [2008-10-04 09:18:23 +0000 UTC]

Thanks a lot for this!

๐Ÿ‘: 0 โฉ: 0

Pai-tan In reply to ??? [2008-09-14 20:17:30 +0000 UTC]

Very helpful.. Hopefully mine will turn out ok o 3o;;

๐Ÿ‘: 0 โฉ: 0

goodmode In reply to ??? [2008-09-10 07:11:00 +0000 UTC]

Bookmarked AND favourited. Awesome work. I like visual rather than reading tutorials. xD

๐Ÿ‘: 0 โฉ: 0

bararosa [2008-07-27 21:44:20 +0000 UTC]

Thank you, I'm going to attempt this... xDDD;

๐Ÿ‘: 0 โฉ: 0

KarmicIllusion [2008-07-13 21:54:55 +0000 UTC]

This is a nice and constructive css tutorial. Thanks, this might come in handy.

๐Ÿ‘: 0 โฉ: 0

totallystumped [2008-06-02 10:29:01 +0000 UTC]

This is seriously the sweetest thing ever. I'm gonna try and use it soon! <3

๐Ÿ‘: 0 โฉ: 1

cerena In reply to totallystumped [2008-06-03 19:09:49 +0000 UTC]

Thanks! Awesome. I promise to get part three up as soon as possible! Then I'll expect everyone to show me their awesome journal designs!

๐Ÿ‘: 0 โฉ: 1

totallystumped In reply to cerena [2008-06-13 06:34:12 +0000 UTC]

YAY, I'll be waiting! C:

๐Ÿ‘: 0 โฉ: 0

Shineymagic [2008-05-10 21:40:18 +0000 UTC]

^o^ This might just b the one 4 me!! >w<

๐Ÿ‘: 0 โฉ: 0

chibi-jen-hen [2008-05-05 03:42:39 +0000 UTC]

I want to try this to see if it works for me...I'm so bad with this CSS stuff T.T But I want to make a pretty journal. Thanks for sharing this! ;D

๐Ÿ‘: 0 โฉ: 1

cerena In reply to chibi-jen-hen [2008-05-05 17:15:33 +0000 UTC]

Yay! Let me know if you run into any problems or have questions, and I'll see if I can help out. :3 Good luck with your journal--you should hollar at me if you finish one so I can take a look!

๐Ÿ‘: 0 โฉ: 0

JainaEowyn [2008-03-28 03:54:41 +0000 UTC]

Very nice, Ceri; collectin' it. ^^

๐Ÿ‘: 0 โฉ: 1

cerena In reply to JainaEowyn [2008-03-28 04:43:45 +0000 UTC]

Thankies!!

๐Ÿ‘: 0 โฉ: 0

poftd [2008-03-27 23:42:13 +0000 UTC]

YES. THANKS SO MUCH FOR THIS. VERY INFORMATIVE AND HELPFUL. SO AWESOME, IN FACT, THAT IT DESERVES THE SHIFT KEY.

๐Ÿ‘: 0 โฉ: 1

cerena In reply to poftd [2008-03-28 02:36:41 +0000 UTC]

XD Caps locks for cool cruise control!!

Thanks for commenting, hon!

๐Ÿ‘: 0 โฉ: 1

Nchanner In reply to cerena [2008-03-28 02:39:16 +0000 UTC]

YOU'RE DOING IT WRONG!
CAPS LOCK IS CRUISE CONTROL FOR COOL!

๐Ÿ‘: 0 โฉ: 1

cerena In reply to Nchanner [2008-03-28 04:37:07 +0000 UTC]

*becomes an hero*

๐Ÿ‘: 0 โฉ: 0

DarkMythril [2008-03-27 22:23:52 +0000 UTC]

Gonna fav this - excellent ref, and damn fun to read. Yay, an anti-boring tutorial!

๐Ÿ‘: 0 โฉ: 1

cerena In reply to DarkMythril [2008-03-27 22:54:25 +0000 UTC]

Ahhh I'm so glad it wasn't boring. I was noticing how much TEXT there is in the darn thing, and thinking I should have drawn some chibis or something to break all that up... but I am le tired. I'm really glad it was still interesting.

Yayyyy.

๐Ÿ‘: 0 โฉ: 0

kchuu [2008-03-27 22:20:47 +0000 UTC]

Thanks so much for the tutorial!! If I ever get a sub, this will be sooo helpful :< Thanks again!

๐Ÿ‘: 0 โฉ: 1

cerena In reply to kchuu [2008-03-28 04:37:42 +0000 UTC]

Offer commissions in exchange for subs!

๐Ÿ‘: 0 โฉ: 0


<= Prev |