Join for FREE | Take the Tour Lost Password?

deviantART

 

Journal CSS: simple skin. - refresh.

Journal Entry: Thu Jan 29, 2009, 7:07 PM
  • Mood: dA Love
  • Listening to: UNKLE
  • Playing: Burnout Paradise.
Updated on 29th of Jan, 2009 - to tidy up the HTML a tiny bit, and incorporate some of the new journal CSS goodies since this was first published in 2007. Old version can still be found here.

I've set up a demo journal here so you can see how a normal journal might look, without all the red instructions and junk.


This is a nameless journal skin I'm offering to anyone who wishes to use it, as part of my Creative Journal CSS guide/tutorial (WIP). I guess if you need to refer to it by name somewhere, you can call it "thespook's simple journal skin".

Content is king in my world, so it's about as simple looking as it gets. It's also simple to use because of this, with a minimal amount of custom elements (ie special div tags) to remember for daily use.

This isn't a 'locked' skin that you must use as-is; I encourage people to toy around with it and make it their own. Hopefully it is easy enough to figure out, but if you have any problems feel free to leave a comment here, or note me.

For extra features and special effects see my sidebar on the right. Some of them have already been incorporated into this version, but check back from time to time (or watch me would be easier I guess) because now and then I write a new journal with CSS goodies.


<div class="note">The CSS can be found at the bottom.

The HTML is found in red inside the elements in question. I haven't shown the closing tags because they should be obvious, but in case you're a HTML noob, closing tags are the same as the opening tags, with the addition of a / - ie <div> ... </div>

The image header is an optional addition - an example of how you can customise the base code I'm offering. The default CSS will not include it, but I have included the code you could use to customise it - keep in mind though that to get the random header image you'll need access to a webserver with php enabled and this script



<hr /> (horizontal breaker - is self closing, so you only need to write '<hr />' for it to work)

<strong>Barnaby The Bear
Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name. Birds taught me to sing, when they took me to their king, first I had to fly, in the sky so high so high, so high so high so high, so - if you want to sing this way, think of what you'd like to say, add a tune and you will see, just how easy it can be. Treacle pudding, fish and chips, fizzy drinks and liquorice, flowers, rivers, sand and sea, snowflakes and the stars are free. La la la la la, la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name, never call me Jack or James, I will sing my way to fame, Barnaby the Bear's my name.

<blockquote> la la la la la la la, la la la la la la la, la la la la la la la la la la la la la, so - Barnaby The Bear's my name<small>`thespook in his journal 'simple journal style'</blockquote>


There's a voice that keeps on calling me. Down the road, that's where I'll always be. Every stop I make, I make a new friend. Can't stay for long, just turn around and I'm gone again. Maybe tomorrow, I'll want to settle down, Until tomorrow, I'll just keep moving on.


  • Give it what you think.

  • You don’t want you to reach down.

  • Don’t be gone in a clutter on the other side?

  • You don’t wake me. till someone cares.

  • You don’t want to be where the dead ones, we are all she gets bombers in the 1980s’.

  • For too much I stole.



  1. It’s a dirty little secret.

  2. Cause we like it hurts to be told.

  3. No forgiveness no mercy.

  4. Listen up! any second glance?

  5. Never. again never again but since I felt the same.

  6. You don’t see progress just repetition same old song.



THUMBS!
Everyone likes to share/feature thumbs in their journals, and I've provided a number of special ways to do so. You can still just dump down thumbs any way you like, but using the following divs+class names will spice things up a bit.

The only HTML you need to use is the div tag around your thumb codes.

In the case of the mini-thumbs, if you find yourself using the clear version more often, change the CSS to remove the background/border from the normal version.


<div class="thumbs">


<div class="thumbs scroll">


<div class="minigal">


<div class="minigal clear">


<div class="minigal clear" align="center">



CSS:
.journaltop {background:#fff}
.journaltop img {display:none}
.journaltop {
margin-bottom:70px;
font-size:10px;
color:#333}

.journaltop h2 {
color:#222!important;
font-size:28px}

.journalbox {
border:1px solid #999;
max-width:600px;
margin:0 auto 20px auto;
background:#fff;
padding:100px 50px 0 50px;
position:relative}

.journaltext {text-align:justify}
.journaltext strong {font-size:18px}

blockquote {
font-style:italic;
font-size:20px;
text-align:left;
background:#eee;
padding:5px 58px 10px 58px;
margin:0 -58px;
}
blockquote small{
display:block;
font-size:13px;
text-align:right;
}
.note {
padding:10px 58px;
border:solid #FFFF8B;
border-width:2px 0;
background:#FFFFA2;
margin:0 -58px;
}
a {
color:#00f;
text-decoration:none!important}
a:hover {color:#f00}

.thumbs {
background:#eee;
border:solid #ddd;
border-width:1px 0;
padding:5px 58px;
margin:0 -58px;
text-align:center}
.thumbs .shadow{
background:none!important;
display: inline-block;
height: 150px;
text-align: center !important}
.thumbs .shadow img{
vertical-align: middle !important;
background:#999;
padding:2px}
.thumbs .shadow img:hover{background:#f00}


.minigal{
margin:0 -58px;
padding:5px 58px;
background:#eee;
display:block;
border:solid #ddd;
border-width:1px 0;}
.minigal.clear{background:none;border:0}
.minigal .shadow{background-image: none!important}
.minigal a{
display: inline-block;
width: 50px!important;
height: 50px!important;
overflow: hidden;
border: solid #fff;
border-width: 10px 5px 5px 5px;
outline: 1px solid #ccc}
.minigal img{margin:-20px -50px}
.minigal a:hover{
border-color: #000!important;
outline: 1px solid transparent!important}
.minigal a:hover img{
z-index: 999;
position: absolute;
margin: 0 0 0 -5px;
border: 10px solid #000}

.scroll {
height:200px;
overflow:auto}

hr {display:block}
.journaltext li {margin-bottom:5px}

ul.list {
margin:0 -51px 50px -51px;
padding:20px 50px;
background:#CCD9C8;
border:solid #999;
border-width:1px 0}
ul.list img {display:none}
ul.list strong {
font-weight:normal;
color:#666;}
ul.list li {font-weight:bold}
ul.list .a {background:transparent;}

.journalbottom {
margin:20px 0;
padding-bottom:50px;}

.journaltext ul {padding:0 50px}
.journaltext ul br {display:none}
.journaltext ul li br {display:inline}

.journaltext ol {padding:0 50px}
.journaltext ol br {display:none}
.journaltext ol li br {display:inline}

.aboutJournal {
position:absolute;
bottom:-1px;
right:-1px;
width:200px;
font-size:10px;}
.aboutJournal br {
display:none;}
.aboutJournal b {
display:block;
font-weight:normal;
text-align:right;
padding:5px;
color:#aaa;}
.aboutJournal i {
display:none;
padding:10px;
text-align:left;
font-style:normal;}
.aboutJournal:hover {
background:#CCD9C8;
border:solid #999;
border-width:1px 0 0 1px;}
.aboutJournal:hover i {display:block;}
.aboutJournal:hover b {display:none;}


The CSS above will give you the base code for the skin, minus the graphic heading. The code for the optional heading image is the following:

.journalbox{background: url( ... ) #fff no-repeat!important}

.journaltop{background: url( ... )!important}


Note that using a graphical heading will require tweaking of some values if at first things don't look right or overlap. If you don't have the confidence to do that, or don't wish to learn by trial and error, you might want to read 'The Cool Stuff: Sexy headers / advanced backgrounds' from Creative Journal CSS (I haven't written it yet though! :blushes: ).

Finally, it'd be nice if you could include the following code in your footer:

<div class="aboutJournal"> <b>journal css</b> <i>The base code for this journal was written by :devthespook: and can be found <a href="http://thespook.deviantart.com/journal/22892453/">here</a> - it's part of his <a href="http://devart.spq.me/tutorials/journalcss/">Creative Journal CSS</a> tutorial, and is free for anyone to use and modify.</i></div>

It will create a little hover button for those interested in getting the template too (just like you can see here @ the bottom right of this journal). You don't have to include it, but it would be nice for everyone if you did. You're welcome to add a line saying you've made modifications to it, or that the header graphic is your property etc. The CSS to make it work is included in the main CSS above.

Okie. That's it! You're welcome to leave comments/questions :thumbsup:

...more?
See my sidebar for an up-to-date list of Journal CSS: tutorials (sidebars and hover menus anyone?), and don't be forgetting there's more CSS tutorials in the Tutorial gallery!

REMEMBEЯ!
You should think of this as the starting point for your journal theme, change colours, move things around, go nuts. You're welcome to re-publish your efforts, so long as you include the 'aboutJournal' message.

journal cssThe base code for this journal was written by `thespook and can be found here (you're looking at it!) - it's part of his Creative Journal CSS tutorial, and is free for anyone to use and modify.

Devious Comments

love 0 0 joy 0 0 wow 0 0 mad 0 0 sad 0 0 fear 0 0 neutral 0 0
:iconshell4art:
I want to save all your journals. They are made of WIN! Thank goodness dA keeps them archived for us.

--
shell

My Career-Pottershands [link]
My Son-Ruben[link]
My School-AAU [link]
:icondemaulwurfn:
You strike once again. :noes:

--
:juggle: . o 0 ( Portfolio )

:heart: Hate the sin, love the sinner | Mahatma Gandhi
:iconjurgendoe:
Again a wonderful help for all those who want to learn :clap:

--
Dancing is the vertical expression of a horizontal desire!
:iconfrozenpandaman:
:heart:

--
:ekud: :la:   `>Q :>
 
:blushes: eli PANDAMAN™
        ._;
:silentkitty: ~rawr  :B !
:iconemmejay-fwz:
:music:I like to use it use it, we liek to use it use it -

USED it! thank you very much :bow::heart:
:iconthespook:
ZOING! That was quick :)

Hope you enjoy using it, and if you need a hand customising it let me know :thumbsup:
:iconmicdt:
thanks for sharing.

--
Michael

:star: Watching is not enough. You got to see.

The ultimate source of wisdom and happiness. :-]
:iconkipinae:
I found new problems. :paranoid:

How do I center a journal that's not "full-width" of whatever vertical space it has? "margin: auto;" will do the trick for FF and Opera, but I was wondering how to do that for IE.

I'm a Foxer myself but I know a lot of people use IE (damn them all! :shakefist:) and I like to make things work for everyone roughly the same. Thus, I need to compromise for the one sucky browser that still manages to survive. :sarcasticclap:

Or else I know I end up making another CSS design just because this one didn't work out. :< I'm a perfectionist like that.

--
:typerhappy: Do you play Guild Wars? Join =gwholics!

:buymyprints: I'm open for commissions!
:iconthespook:
IE doesn't know how to use max-width, so in the case of my journal you don't have to worry about centering it because it'll be full-width. This is 'degrading gracefully' - where browsers that support it will get the benefit, but those that don't wont spaz out.

In the case of your journal, you should actually drop the _width property because on lower resolutions, or if people don't have their window maximised, it'll force it to be wider than will fit in the journal area. I'd just leave it spanning the full width.

[link] 

44%
77 deviants said :shakefist:
26%
45 deviants said :giggle:
15%
27 deviants said :o
15%
27 deviants said :evileye:

Journal CSS goonies

#eCSSited - the group to watch for all things Journal CSS.
#iterators - the group for all the user created scripts, styles and extensions that improve/enhance dA.


Tutorials
Artist feature blocks.
Sidebars
Hover menus
Quoting dAmn chatter

Lists

Mini-thumbs
Text shadows
Popup thumb tooltips
**SPOILER** hovers
Image list


graveyard (obsolete tutorials)
Featuring thumbs
Thumb table
Buttons
Hijacking the cut tag
Snazzy borders


todo:
Journal CSS: Making use of gruzer journal fluff.
update/re-write existing tutorials.
'The Making of Vintage CSS'
finish Creative Journal CSS.

Journal skins
Simple skin(old version)
Vintage skin

...obsolete:
dAmn journal skin


Experiments/toys
fun with custom cursors.
:hover maze
:hover thumbs (a reproduction of `wroth's thumb featuring technique/method/thing)
drop shadows

rotane's mysterious three dots.

...

Journal History

Shoutbox

~RaeAnn-Chan:iconRaeAnn-Chan:
Your mom :?
Sun Nov 29, 2009, 8:43 AM
`thespook:iconthespook:
holy crap, I forgot about this thing!
Thu Nov 26, 2009, 12:16 AM
`bypass2020:iconbypass2020:
:heart:
Tue Nov 10, 2009, 2:14 PM
`Rose-Rayne:iconRose-Rayne:
I don't believe we told her that. xD
Wed Oct 14, 2009, 6:32 PM
*reese4me:iconreese4me:
I recall his yellow cat! :|
Wed Oct 14, 2009, 8:22 AM
=wapy:iconwapy:
:paranoid:
Fri Sep 11, 2009, 4:30 AM
¢rotane:iconrotane:
:lol::megaphone::dead:
Thu Jul 16, 2009, 8:50 AM
*CreamyCSS:iconCreamyCSS:
Very nice work! It's The Creammmmmmm! and a Shout! : )
Sun Jun 21, 2009, 6:34 PM
~gguilhermerc:icongguilhermerc:
amazing skin
Tue Jun 16, 2009, 5:52 AM
=Mheltin:iconMheltin:
D:
Mon Jun 1, 2009, 7:04 PM

Site Map