Shop Mobile More Submit  Join Login
That's right, as it says in the title, this article is a special edition one. Why? Because I'm going to give you the CSS Code to one of my journals, the Silver Skin which you can find here as a live preview.

Now it's not exactly the easiest skin to make, so bear with me on this, but you will understand a lot of things after, I will give as much details as I can on each block of code.

The Images
Now before we can even start, we need to get our images right? Here's the images we will be using for this journal.

Top/Bottom Bar
Background
Sub-Heading
And also the icons on the right thanks to Dave Lanham for them.

Getting the box done
So we want to start with the box, it's the easiest and simple to do.

.journalbox{
background: #3d3d3d;
border: 1px solid #333333;
padding: 0;
}


No padding, we have a 1px very dark solid border, and we set a background colour.

Easy.

Journal Header
Ok this one starts to get a bit more complicated, we will be modifying a lot for the header, including changed the position for the date, and taking away the Journal Entry: text.

.journaltop{
background: transparent url('geekupload.com/file/200.jpg') repeat-x;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 0px;
color: #000000;
text-align: right;
height: 12px;
padding-top: 7px;
padding-right: 10px;
}

Our background is transparent, but we're using an image background which is of course, our top bar image, we use repeat-x to repeat this image a long the X axis. We then choose our font, use font-size: 0px so our text does show up (This will be our Journal Entry: text)

We set our text colour, align it to the right, set the height of the journal header, which is 12px, then use a padding to set the header and date in an appropriate place.

But wait, there's more... right now we are hiding all text, we don't want that.

.journaltop span{
font-size: 8px;
}
.journaltop h2{
color: #000000;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 8px;
font-weight: normal;
letter-spacing: 3px;
position: absolute;
top: 7px;
left: 20px;
}

That's better... journaltop span is the date, so now our date will show with a font-size of 8px.

The h2 is our journal subject, which we don't have as bold, and we use position: absolute to set it up at the top in the appropriate place. The letter-spacing spaces the letters out more, neat little thing.

.journaltop img{
display: none;
}

Last but not least, hide the journal icon message.

Journal Text
Now this could be a big different for you, but we'll see.

.journaltext{
background: transparent url('geekupload.com/file/208.jpg') no-repeat;
padding: 10px 50px 0 40px;
text-align: center;
}

Any different? No background, but instead we use an image but we use no-repeat because we don't want it to repeat, obviously. Our padding sets is 10px from the top, 50px right, 0 bottom, and 40px left.

Journal Bottom
Basically the same as the top one really.

.journalbottom{
background: transparent url('geekupload.com/file/200.jpg') repeat-x;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 10px;
color: #000000;
height: 12px;
padding-top: 7px;
}


So no need to explain?

The more complicated part
So we're coming to the more complicated part, this is making a two column layout so we can have our content one side, and the icons the other side.

First we need to make some kind of container, so we can keep our left and right div together.

.divcontain{
width: 100%;
}

That should do it.

Then our left div

.divleft{
display: inline;
width: 80%;
float: left;
}

Yup, seems all simple thus far. You should know these, I've explained about it all in previous articles.

.divright{
display: inline;
width: 10%;
float: right;
text-align: left;
}

Just that extra bit more.

And the most vital thing you will need.

.divclear{
clear: both;
}


Wait... One more bit!
So there's a bit more to add to our CSS... control the images, and also the content boxes.

img{
border: 0;
}
.content{
width: 100%;
text-align: left;
background: #f1f1f1;
border: 1px solid #2e2e2e;
color: #000000;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
margin: 0 auto;
}
.head{
width: 98%;
background: #e1e1e1 url('geekupload.com/file/209.jpg') repeat-x;
height: 19px;
padding-top: 3px;
font-size: 8px;
padding-left: 2%;
font-weight: bold;
}


Wow that's a long bit.

The content is basically the content boxes, which we set our background colour, a border, the text, etc. Simple stuff really, then we have our .head which is the sub-heading where we use a background image again.

The Code!
Ok so this bit is even more complicated. Because the way the layout is done, we don't fill in the header or the footer area.

So in the Journal Entry section...

X The Journal


All on one line... it's our contain, left, content divs and our header.

New line...

So this is going to be the free journal for all you. I just need to do one credit first, credit goes to Dave Lanham for the Amora Icons used on the right side. The coding for this journal has a lot to do and will look confusing when you see it. When I upload it to my gallery, a text file will have installation steps, please read them carefully.
</code>

The text, with the div end to stop the content.

New line...

X Space Filling

New content box, header again...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc imperdiet lacus et leo. Proin vitae lectus a lorem tempor elementum. Mauris congue lorem in nibh varius mollis. Nulla facilisi. Nullam sed erat. Praesent ac sapien. Ut nec dui a dui venenatis commodo. Etiam euismod mollis velit. Vestibulum viverra. Pellentesque non neque. In et ligula. Cras porttitor nisl vel enim. Cras ac mi quis tellus dapibus bibendum.</div></div>

Text, and of course, the ending div to stop the content, and another for the left.

Now on the same line


We start out right side... and do our link to our gallery.

Extra two lines...

<a href="dot-silver.deviantart.com/prin…"></a>
For our prints.

And so on...

<a href="dot-silver.deviantart.com/jour…"></a>

<a href="my.deviantart.com/deviants/add…"></a>

<a href="my.deviantart.com/notes/?to=do…"></a>

<a href="www.dot-Silver.deviantart.com"></a>


and on the same line of the last one...

</div></div>
& nbsp;


This stops the div for the right side, stops the div for the container, then we use the divclear to keep the two divs in order.

Please note that you should take out the space between the & and the nbsp;... this creates a space in the div so that the browser can recognise it.

After all of this, you have just created this journal. You should be proud... there are a lot of things you can learn from this, and improve on too.

And now! As per usual in these... it's the Hall of Journals

naturgewalt - yes I know it's not made by him, this journal was one the ipholio coded, but it was designed by naturgewalt. Lovely colours...

mOntAnaOO7 - Simple... but lovely, easiest way to say it.

trinket - A beautiful look. All that is needed to be said.
Add a Comment:
 
:iconaswewerefalling:
Aswewerefalling Featured By Owner Dec 30, 2011  Hobbyist General Artist
this was subbmitted on mah birthday!
Reply
:iconfrontier0our0style:
frontier0our0style Featured By Owner Nov 15, 2011  Hobbyist Artist
it wont let me see the pictures links!!! DX what should i do? 0.0?
Reply
:iconaumym:
aumym Featured By Owner Oct 8, 2011  Student Digital Artist
Thanks! This is very useful ^^
Reply
:iconcowlufoo:
cowlufoo Featured By Owner Aug 6, 2011  Hobbyist Digital Artist
Do we paste this on the image? I'm making my first skin so I have no idea what to do...
Reply
:iconsunnyk98:
sunnyk98 Featured By Owner Aug 3, 2011
WTF!
Reply
:iconzutaramushroom:
ZutaraMushroom Featured By Owner Nov 12, 2010
what?
Reply
:iconsammiethehd:
SammieTheHD Featured By Owner Sep 4, 2010
Is this not availible to me since I'm not a subscriber?
Reply
:iconcrazytooner:
crazytooner Featured By Owner May 21, 2010  Student Digital Artist
I'm so confused :s ok so css is like a programming language? where do you put all this though? and can you make completely custom ones, if you can what program would you use???

Ah! So confused............................
Reply
:icondot-silver:
dot-Silver Featured By Owner May 21, 2010  Hobbyist Interface Designer
CSS Journals is only available to subscribers.
Reply
:iconcrazytooner:
crazytooner Featured By Owner May 21, 2010  Student Digital Artist
I know but I still want to know how to make one for future reference and all :)
Reply
:icondot-silver:
dot-Silver Featured By Owner May 22, 2010  Hobbyist Interface Designer
CSS is a little bit like a programming language, but it is much easier to grasp. All it is is styling a look of certain elements.

You can completely create your own looks to your journals, you however can not change the structure of the journal, though certain things can be done with CSS to change where elements are in the journal (e.g. You can change the Comments and previous journals link to the top of the journal.

When you are a subscriber, in the "Options" tab when creating (or editing) a journal, "Skin CSS" is shown and all the css goes into there.

As for software, you can just write the css straight into the journal and test it using the "Preview" button. But you can also write the css first in something like notepad or Dreamweaver, though you will not be able to test or preview it until you've added it onto dA. Because CSS only styles elements, your css elements must match those of the Journal Structure.

e.g. On the old journals, the top part where the journal icon, subject and date show, they are contained in a div tag called journaltop, this is named by dA and not by the user, so we use .journaltop { background: red; } to style the top part of the journal.

For more information on CSS, and to learn it, I would highly recommend going to W3 Schools by clicking here.
Reply
:iconcrazytooner:
crazytooner Featured By Owner May 23, 2010  Student Digital Artist
ah! thankyou for explaining :D and for the link ^-^
I'll have a go at it :D and see what happens :blush: if anything does hahahahaaaa Thanks
Reply
:iconzilekondic:
zilekondic Featured By Owner May 23, 2007  Professional General Artist
I am new to DA, and I have a few q-s about this.

Is this only for members with subscriptions???
When I type a journal, I only have Subject and Journal Entry boxes...where do I define the CSS rules?

If it is for regular members too, then I am confused.

Where do I type the CSS?
Do I link an external stylesheet and where???

Sorry if this is annoying, but I want to know.
Reply
:iconarrioch:
arrioch Featured By Owner Jun 11, 2007  Professional Interface Designer
Prvo ti treba sub.. A onda ti se pojavljuje sve kad odesh da kreirash novi journal..
Reply
:iconzilekondic:
zilekondic Featured By Owner Jun 11, 2007  Professional General Artist
Eh, jednog dana :D kad zavrshim fax, nadjem poslic i prestanem da radim samo da bi prezhivio mesec :D

Jako mi se dopada DA, ima sve shto me interesuje.

Hvala na info.
Reply
:iconarrioch:
arrioch Featured By Owner Jun 11, 2007  Professional Interface Designer
E, a do tad, evo ti 3 meseca, pa razbijaj glavu sa CSS-om.. :#1:

dA je kao starica sa karanfilima..
Reply
:iconzilekondic:
zilekondic Featured By Owner Jun 11, 2007  Professional General Artist
ti...nisi...normalan...majke...mi...dan si mi popravio...

HVALAAAA!!! GOES OFF CSS-ing
Reply
:iconflaremaster:
Flaremaster Featured By Owner Apr 22, 2007   Interface Designer
what about the dreamweaver thing? :shrug:
Reply
:iconbeyondthehorizon:
BeyondTheHorizon Featured By Owner Apr 22, 2007  Hobbyist Digital Artist
I used parts of this! =)

Thanks a lot for posting it :D
Reply
:iconwitch20078:
witch20078 Featured By Owner Apr 11, 2007  Hobbyist Traditional Artist
it is a good idea to add more stuff to the journal
Reply
:icondot-silver:
dot-Silver Featured By Owner Apr 13, 2007  Hobbyist Interface Designer
Like what?
Reply
:iconbudgieishere:
budgieishere Featured By Owner Apr 10, 2007
Off the top, nice article.

Something I'd like to say though is with the background image, you really didn't need it that wide. If you're going to repeat-x it, you could have the image about 5px wide, or whatever it is, to minimally get the diagonal lines to match up. It'd save on image loading speeds. :)

But once again, handy little article. :horns:
Reply
:iconsekka:
Sekka Featured By Owner Apr 10, 2007
Having a smaller width means the client has to repeat it more times, adding load onto their computer which is not needed, especially when scrolling.

Having the background width as 50px or so is good because it's not too wide and not too thin, and it is not repeated too many times to cause problems for the client.

This is a problem which people are generally unaware of, or if they are, take no notice of.

Granted, most computers will probably not a have problem handling this but as a programmer you should developer for the scenarios that may and may not happen.
Reply
:iconmrthunderfield:
MrThunderfield Featured By Owner Apr 4, 2007  Hobbyist Photographer
Good tutorial... But you didn't explain this:

And the most vital thing you will need.

.divclear{
clear: both;
}

You just said it's vital. What does it do?
Reply
:icondot-silver:
dot-Silver Featured By Owner Apr 4, 2007  Hobbyist Interface Designer
That div makes it so that one of the two divs (left and/or right) don't overlap the bottom of the journal. So it kinda clears all space so if one was longer than the other, it kinda fills in that gap, if you know what I mean.
Reply
:iconmrthunderfield:
MrThunderfield Featured By Owner Apr 5, 2007  Hobbyist Photographer
Oh, awesome! Nice :)
Reply
:iconipholio:
ipholio Featured By Owner Apr 4, 2007  Professional Interface Designer
FYI...*naturgewalt's journal that you link to at the end of the article wasn't designed by him...I did the code and design. ;)
Reply
:icondot-silver:
dot-Silver Featured By Owner Apr 4, 2007  Hobbyist Interface Designer
well you proved me wrong then, sorry. I thought he did the images and you did the coding... My bad.
Reply
:iconpickupjojo:
pickupjojo Featured By Owner Apr 4, 2007  Professional Interface Designer
Nice journal but the fonts looks very ugly on Mac (Safari). :(
Reply
:icondot-silver:
dot-Silver Featured By Owner Apr 4, 2007  Hobbyist Interface Designer
feel free to change em ;)
Reply
:iconpickupjojo:
pickupjojo Featured By Owner Apr 5, 2007  Professional Interface Designer
I'm talking about YOUR journal. :D
Reply
:iconkronic-fx:
KRoNiC-fx Featured By Owner Apr 3, 2007
Finally done... :D

All of the editions are great articles, keep it up. :)
Reply
:iconxox-lula-xox:
XoX-Lula-XoX Featured By Owner Apr 3, 2007
=) Nice journal
Reply
Add a Comment:
 
×

:icondot-silver: More from dot-Silver


Featured in Collections

Journals by BridgetIllustrates

Favorite Journals by BabySponge178


More from DeviantArt



Details

Submitted on
April 2, 2007
Link
Thumb

Stats

Views
3,252 (1 today)
Favourites
177 (who?)
Comments
33
×