ShopDreamUp AI ArtDreamUp
Description
Info
I was browsing, thanks to boredom, through the Photography > Nature > Waterscapes gallery the other day, and when I saw "The Weightless Grasp" I felt as though it was screaming to be a journal background for some reason. So I designed the layout and got permission to use the background and, well, here's the finished product. :3
Many thanks go to *hotburrito2 for letting me use his marvelous photo as this journal's background image. C:
==> Live Version <==
Code
"Journal Entry"
"Footer" (This must remain intact!)
"CSS (beta)"
Parting Words
This layout hasn't been extensively tested and, as such, there is a chance that it will have bugs. If, and this is very unlikely, you experience any difficulties, just let me know and I'll fix it ASAP. :)
Also, if you have any questions in general, feel free to ask. :D
Feedback appreciated. ;]
I was browsing, thanks to boredom, through the Photography > Nature > Waterscapes gallery the other day, and when I saw "The Weightless Grasp" I felt as though it was screaming to be a journal background for some reason. So I designed the layout and got permission to use the background and, well, here's the finished product. :3
Many thanks go to *hotburrito2 for letting me use his marvelous photo as this journal's background image. C:
==> Live Version <==
Code
"Journal Entry"
<div class="content"><p>
Your journal goes here. Be sure to put the "<p></p>" tags around each paragraph so they'll indent and look nice. ;]</p></div>
"Footer" (This must remain intact!)
<div class="credit">Journal coded by :devabfc:
Background by :devhotburrito2:</div>
"CSS (beta)"
.journalbox {
background-image: url("http://fc08.deviantart.com/fs20/f/2007/308/9/e/the_weightless_grasp_by_hotburrito2.jpg");
background-repeat: no-repeat;
background-position: top;
width: 500px;
height: 690px;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
border: 0.3em solid #fff;
font-family: "Trebuchet MS", Verdana, Helvetica;
font-size: 11pt;
}
.journalbox a {
text-decoration: none !important;
}
.content {
padding-right: 8px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: -8px;
width: 380px;
height: 415px;
overflow: auto;
}
.journaltext {
background-image: url("http://i282.photobucket.com/albums/kk280/Yeffsie/Design%20Images/Transparencies/White/45.png");
background-repeat: repeat;
width: 380px;
height: 415px;
margin-left: auto;
margin-right: auto;
text-align: justify;
color: #205;
line-height: 120%;
}
.journaltext a {
color: #05b;
}
.journaltext a:hover {
color: #02836D;
}
.journaltop img {
display: none;
}
.journaltop {
font-size: 0;
background-color: transparent;
background-image: url("http://i282.photobucket.com/albums/kk280/Yeffsie/Design%20Images/Transparencies/White/60.png");
height: 28px;
margin-top: -45px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.journaltop h2 {
font-family: Verdana, Helvetica;
font-size: 18pt;
color: #236;
}
.list {
display: none;
}
p {
margin: 0;
text-indent: 2em;
}
.journalbottom {
float: left;
clear: both;
margin-top: 240px;
margin-left: 10px;
background: none;
height: 15px;
color: transparent;
position: absolute;
}
.commentslink {
font-size: 13pt;
color: #278;
font-weight: bold;
}
.commentslink:hover {
color: #3c9 !important;
}
.prevlink {
display: none;
}
.credit {
line-height: 110%;
clear: both;
background: none;
height: 15px;
color: #278;
position: relative;
left: 320px;
top: 220px;
font-size: 7pt;
}
.credit a {
text-decoration: underline !important;
color: #278;
}
.credit a:hover {
color: #023;
}
Parting Words
This layout hasn't been extensively tested and, as such, there is a chance that it will have bugs. If, and this is very unlikely, you experience any difficulties, just let me know and I'll fix it ASAP. :)
Also, if you have any questions in general, feel free to ask. :D
Feedback appreciated. ;]
© 2008 - 2024 Abfc
Comments46
Join the community to add your comment. Already a deviant? Log In
I've been looking for the perfect journal skin for a while now, and I'm pleased to say this one has caught my eye