Shop More Submit  Join Login
×

: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
2,817 (1 today)
Favourites
179 (who?)
Comments
33
×
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
Add a Comment: