Shop Mobile More Submit  Join Login
Coastal CSS by Abfc Coastal CSS by Abfc
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"
<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. ;]
Add a Comment:
 
:icondjmoonray:
DJMoonRay Featured By Owner Dec 24, 2012  Hobbyist Digital Artist
This is very beautiful, Il ove beaches, thank you for making this :)
Reply
:iconohgodofwriting:
OhGodOfWriting Featured By Owner Nov 19, 2010
Beautiful.
Reply
:iconabfc:
Abfc Featured By Owner Nov 19, 2010  Hobbyist Photographer
Thank you. <3
Reply
:iconcinnynamony:
Cinnynamony Featured By Owner Jun 19, 2010  Hobbyist General Artist
Loved this! *used it

Thank you :heart:
Reply
:iconlalikaa:
Lalikaa Featured By Owner Nov 11, 2009
I'm using this, thank you! <3

[link]
Reply
:iconabfc:
Abfc Featured By Owner Nov 11, 2009  Hobbyist Photographer
Glad you like it. :)
Reply
:iconsanteria-manip:
santeria-manip Featured By Owner Jul 9, 2009
beautiful design and css! mind if I use?
Reply
:iconabfc:
Abfc Featured By Owner Jul 9, 2009  Hobbyist Photographer
Go for it, if it still works. :)
Reply
:iconkitty-tha-wacko:
Kitty-tha-wacko Featured By Owner Jan 24, 2009  Hobbyist Digital Artist
It needs to stretch ;-;
Reply
:iconabfc:
Abfc Featured By Owner Jan 24, 2009  Hobbyist Photographer
Then it wouldn't fit the background. :C
Reply
:icondark-blood-may:
dark-blood-may Featured By Owner Aug 1, 2008
Ahhh... i would love to use this =3 It's sooooo beautiful and I love the feel to it
Reply
:iconabfc:
Abfc Featured By Owner Aug 1, 2008  Hobbyist Photographer
I'm glad you like it. :)
Reply
:iconluffsfromafriend:
luffsfromafriend Featured By Owner Jun 11, 2008
am getting this one ready to do a feature..should be up in a coupla hours!!
LOVE IT!
WELL DONE AND APPEARS TO BE OKIES IN FIREFOX!;)
Reply
:iconabfc:
Abfc Featured By Owner Jun 11, 2008  Hobbyist Photographer
Awesome! :w00t: Glad you like it. :)
Reply
:iconluffsfromafriend:
luffsfromafriend Featured By Owner Jun 12, 2008
peeps need to know its fixed and to not add anything in the header box,
so everything sits right...
i also moved the credits into the journal body, so as to have rooom for my links in the footer.
Just a few things of note you may want to add to the description!
when i was more of a noob to code-
those few details kept me from using a css!
but yes i love it-
and i wish i was there-REALLY@!
Thank you for creating and sharing it!!!!!
:blowkiss:...Luffs
Reply
:iconabfc:
Abfc Featured By Owner Jun 12, 2008  Hobbyist Photographer
Ah, yes. I'll remember to make a note of that some time soon. I'm a tad busy at the moment, however.
Reply
:iconluv4corky2:
Luv4Corky2 Featured By Owner May 30, 2008
very nice! Its beautiful! do you mind if i use it?
Reply
:iconabfc:
Abfc Featured By Owner May 30, 2008  Hobbyist Photographer
Go right ahead! :D
Reply
:iconmom-the-bomb:
mom-the-bomb Featured By Owner May 20, 2008  Professional Photographer
this is beautiful
Reply
:iconabfc:
Abfc Featured By Owner May 20, 2008  Hobbyist Photographer
Thank you, though its beauty comes mostly from the wonderful background. ^^;
Reply
:iconmom-the-bomb:
mom-the-bomb Featured By Owner May 20, 2008  Professional Photographer
meh, it takes the whole thing to make it beautiful
Reply
:iconmullosity:
mullosity Featured By Owner Apr 27, 2008
How do i put it into my journal?
Reply
:iconabfc:
Abfc Featured By Owner Apr 27, 2008  Hobbyist Photographer
You can't, I'm afraid. Only subscribers, Beta-Testers, dA staff, and seniors can use journal CSS. :(
FAQ #747: How do I change the style of my Journal?
Reply
:iconmullosity:
mullosity Featured By Owner Apr 27, 2008
thanks. i ended up find the Q&A and seeing that :( it's a really nice CSS though. i was looking forward to using it.
Reply
:iconabfc:
Abfc Featured By Owner Apr 27, 2008  Hobbyist Photographer
Sorry. ^^;
Reply
:iconpaw-br:
Paw-BR Featured By Owner Apr 27, 2008
Really pretty :). I'd use it =D.
Reply
:iconelectromechanical:
Electromechanical Featured By Owner Apr 26, 2008
You added the text areas and whatnot very nicely, it blends quite well with the original foto! :iconexcitedplz:
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Textareas? There are no forms in this design. D:
Reply
:iconelectromechanical:
Electromechanical Featured By Owner Apr 26, 2008
I mean by that the big light blue area where your text is written. :oops:
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Ah.
Reply
:iconelectromechanical:
Electromechanical Featured By Owner Apr 26, 2008
I do not speak code lingo, remember? :giggle:
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 26, 2008  Professional Traditional Artist
I love colours like this :/ Makes me want to go back to Japan, and find some remote island in the South and just lay on the beach all day long.

The best part is the puppy (?) in the water :heart:
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Sounds nice.

And yus, it's a doggy. :3
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 26, 2008  Professional Traditional Artist
I kind of want a puppy.

However I've grown attached to Scottish Shorthairs.

:heart:
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Those Shorthairs are cute. :3
Reply
:iconsnowmask:
snowmask Featured By Owner Apr 26, 2008  Professional Traditional Artist
I know.

They got jealous of the Wii. They don't understand what my husband and I are doing, they just know that attention is not being directed towards them :3 so adorable.
Reply
:iconovni-the-ufo:
Ovni-the-UFO Featured By Owner Apr 26, 2008
yay Cicero's placeholder text. :3
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Yay Latin jargon.
Reply
:iconjimmy-tm:
jimmy-tm Featured By Owner Apr 26, 2008
The top is too dark imo
It doesn't go well with the bottom picture
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
... What do you mean 'top' or, for that matter, 'bottom picture'? The entire thing is on one single background image.
Reply
:iconjimmy-tm:
jimmy-tm Featured By Owner Apr 26, 2008
Well the top of the image is too dark compared to the bottom
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Well that's not my fault.
Reply
:iconjimmy-tm:
jimmy-tm Featured By Owner Apr 26, 2008
Well it just a suggestion
maybe cut off the image and add a bg-color
Reply
:iconabfc:
Abfc Featured By Owner Apr 26, 2008  Hobbyist Photographer
Nah.
Reply
Add a Comment:
 
×




Details

Submitted on
April 26, 2008
File Size
1.1 MB
Thumb

Stats

Views
2,566
Favourites
63 (who?)
Comments
44
Downloads
86
×