HOME | DD

Abfc — Coastal CSS

Published: 2008-04-26 09:04:14 +0000 UTC; Views: 3448; Favourites: 71; Downloads: 92
Redirect to original
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"

Your journal goes here. Be sure to put the "

" tags around each paragraph so they'll indent and look nice. ;]



"Footer" (This must remain intact!)
Journal coded by :devabfc:
Background by :devhotburrito2:


"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. ;]
Related content
Comments: 46

RavageGirl [2015-06-28 00:00:06 +0000 UTC]

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

👍: 0 ⏩: 1

Abfc In reply to RavageGirl [2015-07-22 16:14:34 +0000 UTC]

Did you try it? I'm curious if it still works. XD I made this so many years ago.

👍: 0 ⏩: 0

MoonRayCZ [2012-12-24 21:06:11 +0000 UTC]

This is very beautiful, Il ove beaches, thank you for making this

👍: 0 ⏩: 0

OhGodOfWriting [2010-11-20 02:01:00 +0000 UTC]

Beautiful.

👍: 0 ⏩: 1

Abfc In reply to OhGodOfWriting [2010-11-20 05:11:50 +0000 UTC]

Thank you. <3

👍: 0 ⏩: 0

Cinnynamony [2010-06-19 22:52:47 +0000 UTC]

Loved this! *used it

Thank you

👍: 0 ⏩: 0

Lalikaa [2009-11-12 03:23:18 +0000 UTC]

I'm using this, thank you! <3

[link]

👍: 0 ⏩: 1

Abfc In reply to Lalikaa [2009-11-12 04:21:37 +0000 UTC]

Glad you like it.

👍: 0 ⏩: 0

santeria-manip [2009-07-09 19:05:21 +0000 UTC]

beautiful design and css! mind if I use?

👍: 0 ⏩: 1

Abfc In reply to santeria-manip [2009-07-09 19:38:11 +0000 UTC]

Go for it, if it still works.

👍: 0 ⏩: 0

Kitty-tha-wacko [2009-01-25 01:20:45 +0000 UTC]

It needs to stretch ;-;

👍: 0 ⏩: 1

Abfc In reply to Kitty-tha-wacko [2009-01-25 06:34:09 +0000 UTC]

Then it wouldn't fit the background. :C

👍: 0 ⏩: 0

dark-blood-may [2008-08-01 20:57:11 +0000 UTC]

Ahhh... i would love to use this =3 It's sooooo beautiful and I love the feel to it

👍: 0 ⏩: 1

Abfc In reply to dark-blood-may [2008-08-01 21:01:00 +0000 UTC]

I'm glad you like it.

👍: 0 ⏩: 0

luffsfromafriend [2008-06-11 16:52:28 +0000 UTC]

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!

👍: 0 ⏩: 1

Abfc In reply to luffsfromafriend [2008-06-11 17:20:46 +0000 UTC]

Awesome! Glad you like it.

👍: 0 ⏩: 1

luffsfromafriend In reply to Abfc [2008-06-12 13:07:36 +0000 UTC]

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!!!!!
...Luffs

👍: 0 ⏩: 1

Abfc In reply to luffsfromafriend [2008-06-12 13:10:30 +0000 UTC]

Ah, yes. I'll remember to make a note of that some time soon. I'm a tad busy at the moment, however.

👍: 0 ⏩: 0

Luv4Corky2 [2008-05-30 16:45:33 +0000 UTC]

very nice! Its beautiful! do you mind if i use it?

👍: 0 ⏩: 1

Abfc In reply to Luv4Corky2 [2008-05-30 18:29:31 +0000 UTC]

Go right ahead! :D

👍: 0 ⏩: 0

mom-the-bomb [2008-05-20 09:44:18 +0000 UTC]

this is beautiful

👍: 0 ⏩: 1

Abfc In reply to mom-the-bomb [2008-05-20 17:39:36 +0000 UTC]

Thank you, though its beauty comes mostly from the wonderful background.

👍: 0 ⏩: 1

mom-the-bomb In reply to Abfc [2008-05-20 19:50:11 +0000 UTC]

meh, it takes the whole thing to make it beautiful

👍: 0 ⏩: 0

mullosity [2008-04-27 23:53:34 +0000 UTC]

How do i put it into my journal?

👍: 0 ⏩: 1

Abfc In reply to mullosity [2008-04-27 23:57:27 +0000 UTC]

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?

👍: 0 ⏩: 1

mullosity In reply to Abfc [2008-04-28 02:29:20 +0000 UTC]

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.

👍: 0 ⏩: 1

Abfc In reply to mullosity [2008-04-28 02:46:28 +0000 UTC]

Sorry.

👍: 0 ⏩: 0

Paw-BR [2008-04-27 21:06:08 +0000 UTC]

Really pretty . I'd use it .

👍: 0 ⏩: 0

Electromechanical [2008-04-27 00:04:44 +0000 UTC]

You added the text areas and whatnot very nicely, it blends quite well with the original foto!

👍: 0 ⏩: 1

Abfc In reply to Electromechanical [2008-04-27 00:07:19 +0000 UTC]

Textareas? There are no forms in this design. D:

👍: 0 ⏩: 1

Electromechanical In reply to Abfc [2008-04-27 00:10:05 +0000 UTC]

I mean by that the big light blue area where your text is written.

👍: 0 ⏩: 1

Abfc In reply to Electromechanical [2008-04-27 00:10:56 +0000 UTC]

Ah.

👍: 0 ⏩: 1

Electromechanical In reply to Abfc [2008-04-27 00:17:50 +0000 UTC]

I do not speak code lingo, remember?

👍: 0 ⏩: 0

snowunmasked [2008-04-26 17:58:55 +0000 UTC]

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

👍: 0 ⏩: 1

Abfc In reply to snowunmasked [2008-04-26 18:07:03 +0000 UTC]

Sounds nice.

And yus, it's a doggy. :3

👍: 0 ⏩: 1

snowunmasked In reply to Abfc [2008-04-27 03:36:35 +0000 UTC]

I kind of want a puppy.

However I've grown attached to Scottish Shorthairs.

👍: 0 ⏩: 1

Abfc In reply to snowunmasked [2008-04-27 03:38:33 +0000 UTC]

Those Shorthairs are cute. :3

👍: 0 ⏩: 1

snowunmasked In reply to Abfc [2008-04-27 03:49:35 +0000 UTC]

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.

👍: 0 ⏩: 0

Ovni-the-UFO [2008-04-26 13:49:29 +0000 UTC]

yay Cicero's placeholder text. :3

👍: 0 ⏩: 1

Abfc In reply to Ovni-the-UFO [2008-04-26 14:31:33 +0000 UTC]

Yay Latin jargon.

👍: 0 ⏩: 0

jimmy-tm [2008-04-26 09:17:45 +0000 UTC]

The top is too dark imo
It doesn't go well with the bottom picture

👍: 0 ⏩: 1

Abfc In reply to jimmy-tm [2008-04-26 09:27:25 +0000 UTC]

... What do you mean 'top' or, for that matter, 'bottom picture'? The entire thing is on one single background image.

👍: 0 ⏩: 1

jimmy-tm In reply to Abfc [2008-04-26 12:12:23 +0000 UTC]

Well the top of the image is too dark compared to the bottom

👍: 0 ⏩: 1

Abfc In reply to jimmy-tm [2008-04-26 12:16:05 +0000 UTC]

Well that's not my fault.

👍: 0 ⏩: 1

jimmy-tm In reply to Abfc [2008-04-26 12:17:09 +0000 UTC]

Well it just a suggestion
maybe cut off the image and add a bg-color

👍: 0 ⏩: 1

Abfc In reply to jimmy-tm [2008-04-26 12:17:54 +0000 UTC]

Nah.

👍: 0 ⏩: 0