HOME | DD

Published: 2009-09-24 00:10:22 +0000 UTC; Views: 52859; Favourites: 1452; Downloads: 829
Redirect to original
Description
I WANT TO SEE YOUER JOURNAL LAYOUTS YOU MAKE!!!!! :To learn html/css go here [link] . I will not teach you code from scratch, I can "help" people who know at lest some html/css but I am not a teacher...
I made this because it's very hard to find a good tutorial for this that is just easy, simple, and provides the codes you need to create your own custom journal, I hope you like it! suggest it for a Daly Devision if you do!
Please if you put this tutorial anywhere on the site give me full credit. No credit needed for the codes below!
--------------------------------------
.gr-box{
Container for the whole journal.
}
.gr-top{
The container where the date and title is.
}
.gr-top h2 img{
Journal book image.
}
.gr-top h2{
Journal title.
}
.gr-top span{
Journal date.
}
.gr-body, .text{
Were the text of your journal is
}
.tri{
Arrow pointing down blow the gr-top.
}
.gr1{
Top/bottom rounding bar.
}
.gr2{
Makes the journal rounded.
}
.gr3{
Makes the journal rounded.
}
a{
Links.
}
a:hover{
Links hover.
}
.commentslink, .prevlink{
Journal Comments and previous journals links.
}
.hsep{
the horizontal line "|" between comments and previous journals
}
.bottom {
The container for your Journal Comments and previous journals links.
}
.list {
container for
Mood:
Listening to:
Reading:
Watching:
etc:
}
li.f{
you can change the color to make it like a bar so its easier to read.
}
li.a{
you can change the color to make it like a bar so its easier to read.
}
strong{
color just for
Mood:
Listening to:
Reading:
Watching:
etc:
}
*/this is the code for when you display thumbnails/*
.shadow-holder{
Thumbnail container.
}
.shadow-holder img{
The Thumbnail image.
}
--------------------------------------
Have fun and don't forget to leave a comment if you use this!
Related content
Comments: 292
Sugaree-33 [2012-10-03 01:51:30 +0000 UTC]
How did I get here????!!!! absolutely if i can get some r and r for the night, i might be able to do more than make something bold on my journal, lol!!!
[link]
[link]
👍: 0 ⏩: 0
RavensHiddenSoul In reply to ??? [2012-08-24 07:50:17 +0000 UTC]
Is there any chance you could explain the alternating lines of text on the "list" part? Some journals have them one color every other line, and the rest with different colors... How do you do that?
👍: 0 ⏩: 0
FoxxyJones [2012-06-20 18:51:56 +0000 UTC]
Thank you so much for the tutorial! This looks like it will come in very handy.
👍: 0 ⏩: 0
kin-gyo [2012-03-29 18:40:22 +0000 UTC]
Woah. Thank you so much for this... this deserves a DD.
👍: 0 ⏩: 0
SpoopyBooty [2012-03-26 18:20:00 +0000 UTC]
Hey, so I was wondering if it was possible to get the mood box into this journal skin: [link] Since I'm completely new to working with the CSS. Do you think you could help?
👍: 0 ⏩: 0
Gabytron [2012-03-24 23:36:41 +0000 UTC]
Finally!! Exactly what I've been searching *weeks* for. Thank you!
👍: 0 ⏩: 0
Maekii [2012-02-25 00:37:25 +0000 UTC]
Ugh I'm stupid. I'm totally confused and I want to add a font... Exactly how do I do that? and how do I add my own picture to be like, the header?
👍: 0 ⏩: 2
GoddessKalypso In reply to Maekii [2012-03-24 16:04:40 +0000 UTC]
To add fonts use Words
EX) Hello
((I don't think it works in comments, but it does in journals))
👍: 0 ⏩: 1
Maekii In reply to Maekii [2012-02-25 00:38:02 +0000 UTC]
btw I'm probably gonna get premium soon, so I want to have CSS figured out soon. X3
👍: 0 ⏩: 0
Jadepool [2012-02-08 01:13:15 +0000 UTC]
This may sound really stupid but do I just copy and paste the code? I'm very new to coding :/ but I really need to make a journal skin.
👍: 0 ⏩: 0
RavensHiddenSoul [2012-01-15 03:32:31 +0000 UTC]
...quick question, though.
When I'm editing the skin CSS and click "preview", everything looks fine (I'm trying to center the comments link / previous link), but when I click "Preview" on the text-editor, they're aligned to the left in THAT preview. Any idea what's going on? /o.o?
👍: 0 ⏩: 0
RavensHiddenSoul [2012-01-15 03:00:35 +0000 UTC]
Simple, easy, and very helpful! I'm not new to CSS but very new to journals... I have a couple of skins that use serif fonts (definitely not my preference), so I end up tweaking quite a bit to adjust spacing and everything...
I have one that was maddening to change because so many of the font parameters weren't set in the installed version, and this helped me sooo much. Thank you deeply for sharing this!~
👍: 0 ⏩: 0
NynyWeenie In reply to ??? [2012-01-08 06:45:50 +0000 UTC]
I loved collecting Tutorials, thanks!
👍: 0 ⏩: 0
A-Frique In reply to ??? [2011-09-19 11:13:41 +0000 UTC]
Thanks for this - can see it coming in handy for the future.
👍: 0 ⏩: 0
riccassley [2011-09-13 11:14:19 +0000 UTC]
Wow, this is so useful! This helps me to create my first upcoming journal skin soon. Also, I will credit you for this awesome CSS and link back to this tutorial and your profile.
👍: 0 ⏩: 0
MelikeBirsenAtes In reply to ??? [2011-08-28 11:40:43 +0000 UTC]
Your tutorial helped me a lot creating my very first journal skin: Beauty of the Dead
I credited you linking back to the actual tutorial page and your deviantart profile; both in artist's comments and at journal footer.
Thanks.
👍: 0 ⏩: 0
rice-chex [2011-06-08 22:32:05 +0000 UTC]
does the .gr- replace the .journal- ? I'm sure i'm not doing this right, but to center the journal date I type:
.gr-top span{
text-align: center;
}
right?
👍: 0 ⏩: 0
Kjherstin [2011-06-03 05:42:58 +0000 UTC]
The perfect tutorial for beginners, just the link I needed to share. Thanks
👍: 0 ⏩: 1
sneakboy1 [2011-03-20 12:58:45 +0000 UTC]
thanks i really could use this, still am learning scripting here ^^
👍: 0 ⏩: 0
VulpesObscurus [2011-01-31 07:22:10 +0000 UTC]
Thank you! It's a good understandable tutorial, one day it will help me with my journal skin, i'm sure
👍: 0 ⏩: 0
LightConcorde In reply to ??? [2011-01-27 09:22:48 +0000 UTC]
Good! I'm going to use this after I buy premium account
👍: 0 ⏩: 0
pauzilla In reply to ??? [2011-01-14 01:37:17 +0000 UTC]
thanks man when I upload my journal I will send you a link
👍: 0 ⏩: 1
Tasiamor [2010-12-31 14:03:38 +0000 UTC]
Omg, thank you so much for this! It helped me a lot! I may use it, if its ok ^^
👍: 0 ⏩: 1
yupon [2010-12-06 13:46:08 +0000 UTC]
this is probably an extreamly idiotic question- but hey I would be lying if i said it wasn't the first time I have made myself look like a bit of an idiot haha! I'm thinking of making my group super and i would want different skin for each part, I can use photoshop fine, but i'm guessing its not as simple as creating a design for a specific section (i.e blog background) and uploading it?
ahh ignorance is bliss! XD
👍: 0 ⏩: 1
AskGooroo In reply to yupon [2010-12-07 08:32:49 +0000 UTC]
it works the same for a group blog they are set up exactly the same as journals
👍: 0 ⏩: 0
StarsColdNight [2010-11-29 07:10:41 +0000 UTC]
hi there great tutorial..i still dont know how to make it instalable..i have the css file but when i submitt to DA it turns in to literute text
any help?
👍: 0 ⏩: 0
littlesis92 In reply to ??? [2010-11-21 18:15:49 +0000 UTC]
does this still work? Because when you go to "options" it has all different names... it's not the gr stuff anymore but journal something something...?
👍: 0 ⏩: 1
AskGooroo In reply to littlesis92 [2010-11-22 05:01:02 +0000 UTC]
no this should still work my journal layouts are still working
👍: 0 ⏩: 1
littlesis92 In reply to AskGooroo [2010-11-22 14:40:24 +0000 UTC]
mh. ok. i'm so confused by the css stuff, the way i learnt it was kind of different and it's been some time, so i have to get used to it all over again
👍: 0 ⏩: 0
Betuu [2010-11-10 06:07:11 +0000 UTC]
this tutorial is really awesome I just love the way you point out each element, thank you so much
👍: 0 ⏩: 1
Owline [2010-11-07 13:58:55 +0000 UTC]
Thank you very much for making this! It makes way EASIER to make journal skins, for a newcomer in the subject like me!
👍: 0 ⏩: 1
| Next =>