Shop Mobile More Submit  Join Login

Similar Deviations

Please fave :+fav: & comment :writersblock: if you use it. That would be wonderful :love:

Live Journal: [link]


To edit the footer text:

Open the edit skin menu and change the text in the Skin Footer area
Add a Comment:
No comments have been added yet.

Feel free to use it, you don't need to ask, I made it for you ;)
I always appreciate small donations, even just 5[points]. I have a little collection tin on my profile.
That's all I ask :D If you have any suggestions for other skins note me!

Beautiful stock is from here: [link]

Add a Comment:
No comments have been added yet.

CoffeeCSS Journal Skin - version 2.2

(Nov 11, 2009)
Live version | Bug report



* Hit the Install button and normally submit a journal.
* To change the content from the Topmenu or Sidebar, go the the tab "Options" and edit the "Skin header".
* To change the Feature box content, go to the tab "Options" and edit the "Skin footer".

:target: If you don't want to use the Sidebar, Topmenu or the Feature box, just leave it empty between the correspondent divs (see codes below). DO NOT remove the div tags to prevent you from loosing the codes and from making your journal look weird.

*Empty Skin header:
<div class="topmenu">
<div class="sidebar">
<div class="content">

*Empty Skin footer:
<div class="feature">


(should work for any journal)

*For Links:
<a href="ΗΤΤΡ://…">LINK NAME</a>

*For Bold Text:

*For Italic Text:

*For Underlined Text:

*For Unordered lists:

*For Ordered lists:


(skin specific codes)

*For Headlines:

*To center text:
<div class="center">TEXT</div>

*To flush text righ:
<div class="right">TEXT</div>

*To flush text left:
<div class="left">TEXT</div>

*To make two columns:
<div class="coll">TEXT LEFT</div>
<div class="colr">TEXT RIGHT</div>
<div class="colclear"></div>

*For Thumbs:
<div class="thumb">THUMB1 THUMB2 THUMB3...</div>



This is a template from :iconginkgografix:'s 2009 Calendar Project now re-coded for adjustable width layout
Paper and cup from
Photomanipulation and featured art by me!
Add a Comment:
No comments have been added yet.

so, this is my and *tincek-marincek's contribution to this year's CSS Calendar Project run by ^ginkgografix
you should check it out: there's a new design every day - starting with dec 1st - all the way to xmas day

this skin is free to use :)
... if this install will work ;P

you can see a live preview of this skin

|| -- design&graphics: *tincek-marincek
|| -- coding: *weida34

the background in this skin is a part of *tincek-marincek's artwork:

//------ I N S T R U C T I O N S

:bulletgreen: the basic structure:

the following is what you need to copy and paste in your journal for the thing to work:

<div class="contentwrapper">

__here comes your journal content__

<div class="specialFeature"></div>

even if you don't use the specialFeature option, you can leave it there for the journal to have a nice rounded bottom. or you can leave it out, if you don't want it :) though, the contentwrapper is a must!!

:bulletgreen: t i t l e s:

you enclose the subtitles with <div class="subTitle"></div>
and the smaller titles with <div class="minorTitle"></div>

:bulletgreen: f e a t u r e s:

code for the feature that appears in the body of journal:

<div class="feature"></div>

and then you just put your thumbnails in, like this for example:
<div class="feature">thumb0000 thumb0000 thumb0000 thumb 0000</div>

:bulletgreen: floating boxes:

example from the preview would be written like this:

<div class="thumbBox floatLeft fancy">your_thumbnail_here <em>your_text_here</em></div>

you see there are 3 classes: thumbBox, floatLeft and fancy

1. thumbBox is a must
2. instead of floatLeft you can use floatRight, depending where you want to float the box, but you have to use one of them
3. fancy is optional, it gives the slightly brighter background to the box and a hint of a border, so if you drop this class nothing changes only the background and borders are gone

enclosing text in <em></em> ensures that it doesn't wrap around the thumbnail, instead it moves beneath it

:bulletgreen: special feature:

<div class="specialFeature"></div>

basically, you can use every feature as above, that is titles, floating boxes...

only when it comes to featuring thumbs you use class thumbs

the code for special feature like you see it in the preview would look something like this:

<div class="specialFeature">
<div class="subTitle">
Special Feature for xy deviant</div>
<div class="thumbs">

//------ end of I N S T R U C T I O N S

errr.. i hope that's not too complicated ^^; you're free to drop me a note!

probably took me longer to write these instruction than the coding itself .. having a senile computer sucks ;P

i'd really appreciate some feedback on this, if you use it, how it looks in different browsers - i use firefox myself

hope you like it.. :)
Add a Comment:
No comments have been added yet.

Extended version of deviantART old logo FIX which also reverts the header background color to the light gradient known form v7

Google Extension:…
Firefox Add-on:…


*whispers*: I wouldn't mind a :iconllama3dplz:
Add a Comment:
No comments have been added yet.

Resubmission. Some minor bugs fixed. Please everyone who've already used Colour me red template - reinstall.

Please don't forget to put your own links in the menu!

:iconteamoplz:!!! Live Version !!! :iconteamoplz:

This is a free journal template. However, to be able to use it you need a Premium Membership.

Additional coding

:bulletyellow: <div class="headline"> This is headline </div> - for a headline with graphics.

:bulletyellow: <strong> This is big text </strong> - for a big font, but without additional graphics

:bulletyellow: <hr> - for a separator

:bulletyellow: <div class="scroll">your long text/lots of images</div>- for a scrollbar.

:bulletyellow: <div class="minigallery">thumbs here</div> - for a minigallery

:bulletyellow: <div class="feature"><i>2-3 thumbs here</i><i>2-3 thumbs here</i> etc</div> - for the big features with hover effects.

:bulletyellow: <div class="important"> text here </div> - emphasised box with text

Other codes </u>

:bulletorange: <div align="center">everything here will be centered</div>

:bulletorange: <ul> A list

One </li>


All faves and comments will be very appreciated. :hug: :+fav:

:iconjournalskins: has my permission to upload this to their gallery


D'awwww a DD for me? :woohoo:
Thank you thank you thank you! ^GaioumonBatou :tighthug: :heart:
Add a Comment:
No comments have been added yet.

Only Rules i have are:
1. Do Not claim my templates as your own.
2. Do not use my css codes in css contests.
3. Do not re-distribute

follow those rules and we will have no problems.

!!UPDATED!! Sorry people i previously wrote you should use <$div class="features"> to get the box to display but i was wrong i named it "favorites" in the coding. So the proper coding is <$div class="favorites"> ... without the $'s of course.

My template for the "25 Journals of Christmas" CSS Calendar held annualy by `ginkgografix A project to offer you the public 25 free templates for the holidays.
I had a christmas one i was going to submit but i decided this one was the nicer of the two so i wanted this to be my entry. Hope you all enjoy it.

A few notes on this template :
:bulletred: The journal has a set height. No matter if you have two sentences or a thousand this will not stretch out and form to fit your journal. So this is not one i recommend to anyone who loves to talk and talk and talk or add a thousand thumbs.
:bulletred: The features box has a set jpeg image and placing it anywhere except pretty close to where it is will result in meshing of the top image with the backdrop image.
If using the features box you will want to throw it in after a bit of text.
:bulletred: I usually code for the mood box to go to the bottom but this particular skin displays much better with it DISPLAYED AT TOP Also i suggest putting in like 2 or 3 mood lines ... this puts the bottom "previous journal entries" and "No Comments" into the proper place.

(Remember to delete any $'s)

:bulletblue: For just text ... simply choose the skin and begin typing. Its that easy.
:bulletblue: to use a heading simply type <$div class="heading">Heading Here</$div>
:bulletblue: to use the features box: <$div class="favorites"> Text or thumbs here</$div>
:bulletblue: To use the mini gallery: <$div class="minigal">Thumbs here<$/div>

I would suggest using the mini gallery inside the features box but it is yours to do as you please of course. If you do that coding would be <$div class="favorites"><$div class="minigal">Thumbs here<$/div><$/div>

All stock can be found at ... I decided to stop being cheap and start paying for some stock lol. Definitely the place you want to go for high quality stock images
Add a Comment:
No comments have been added yet.

EDIT 3: thank you to all the people who have faved/used this :) it means a lot to me

EDIT 2: IF YOU DONT HAVE A SUBSCRIPTION YOU CANT USE THIS. PEOPLE WITHOUT SUBSCRIPTIONS CAN INSTALL SKINS, BUT THE SYSTEM DOES NOT ALLOW THEM TO BE USED. TRUST ME. IVE TRIED. sorry, but so many people have commented that they cant figure out how to use it and they dont even have subscriptions. if your not sure if you have a subscription or not, look at the symbol next to your user name. if it is a ' ~ ' then you dont have a subscription. if its something else then you do

EDIT: this journal has a sample "Feature" when you install it. if you have any trouble changing it, let me know.

eeeeeeep! i did it! woo! yeah i know i dont have a subby, but i still did it anyway SO SUCK IT BIOTCHES!!!

-.-' sorry, im a little giddy. now thisll sound weird, but i do NOT take full credit for this. i started with a skin by *sedART and did some MAJOR tweaking. but I DO NOT TAKE FULL CREDIT! so please dont report this as art theft or something.

Here is the original skin you can find the lightening and rain images here and
Add a Comment:
No comments have been added yet.

End of Results