Part 2 of 2 - the corresponding template can be found here [link]
This tutorial deals with custom divs: how to set them up, what can be used, what code is needed in the journal etc.
You might want to read Journal CSS Part 1 first:
it deals with the process of designing a CSS journal and of how to get the basics coded.
If you have no idea what CSS is, I suggest you read up on the basics before tackling this tutorial.
In here, I just assume you know what a div is...
EDIT: To make the right colum work properly in IE as well, add position:relative; to the div called .right - I'll update the file to reflect this asap!
Also try these links:
^thespook is compiling a CSS guide (I'll link it here when it's finished), he also has a nifty Journal structur reference in his gallery.
If you speak German (or French), you can try selfHTML.org - it's not only great for learning HTML, CSS, Javascript,... but also offers quick references on the code you can use.
^zilla774wrote a news article Journal CSS Resources which has some more links to things you might find useful.
And last but not least, the link to the Lorem Ipsum Generator which also explains where that text comes from.
al right, let's see:
the text and background color and everything else that is supposed to affect the whole journal is best changed in .journalbox (thats the very first thing in part one of the tutorial)
look for the .journalbox div and change the text size here:
font:12px Verdana...;
change the 12px to whatever you like.
the background color is changed in there too, but I think you've found that line already? (background-color:#??????
one more thing I'd like to show you for the header is that you can center the text as well as the background image using:
.journaltop {
background:url(...) top center no-repeat #ffffff;
text-align:center;
...
}
leave out the large padding to the left, just set it to
padding:5px;
for example to get the same distance from all borders for the text.
I just noticed I forgot to say you need to change the text alignment for .journaltop as well as .journaltop h2
- this will push the date to the middle, too
Daily Literature Deviations is a group that is dedicated to bringing literature to the forefront of the deviantArt community. We attempt to accomplish this by daily featuring Literature artists from around the community that deserve the recognition, but are not getting it.
Each day we will feature 10 deviations from the Literature categories in a News Article. In order to support the artists that we feature, we ask that you the news article as well as check out the individual pieces. We understand that each day you may not be able to check out each and every one of the pieces, everyone has their own things going on. We just ask that you make an attempt to help support the growing Literature community.
There are a lot of themes that run through the stock gallery many people have similar ideas but they pull them off in different ways. In this series of newsletters we will look at similar ideas but different outcomes.
Daily Literature Deviations is a group that is dedicated to bringing literature to the forefront of the deviantArt community. We attempt to accomplish this by daily featuring Literature artists from around the community that deserve the recognition, but are not getting it.
Each day we will feature 10 deviations from the Literature categories in a News Article. In order to support the artists that we feature, we ask that you the news article as well as check out the individual pieces. We understand that each day you may not be able to check out each and every one of the pieces, everyone has their own things going on. We just ask that you make an attempt to help support the growing Literature community.
When it comes to community spirit, `Rushy is a shining example. From participating in devmeets, to providing positive encouragement to other artists, `Rushy can always be found demonstrating what it really takes to be a true deviant. It's without any hesitation that we are delighted to award the Deviousness Award for July 2009 to `RushyRead More
Devious Comments
Comments
and i promise to upload mine in the very near
future.
thanks so much for sharing!
--
Jesus loves you. Everyone else thinks you're an asshole.
I'll just assume it's something positive coming from you hehehe
near future
you can take your time... though I'd love to brag with your layout LOL
and you know me, I'm a sharer... erm... sharing-irmel... erm, you get the drift
--
Love is patient...and kind; Love is not easily angered, it keeps no record of wrongs...It always protects, always hopes, always perseveres.
Avatar by ~Ros-s
--
help fight breast cancer [link]
*goes to make some*
if you need anything for your css, just tell me. As long as I can make some time, I'm always willing to help.
--
`kuschelirmel's stock account.
--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
the text and background color and everything else that is supposed to affect the whole journal is best changed in .journalbox (thats the very first thing in part one of the tutorial)
look for the .journalbox div and change the text size here:
font:12px Verdana...;
change the 12px to whatever you like.
the background color is changed in there too, but I think you've found that line already? (background-color:#??????
one more thing I'd like to show you for the header is that you can center the text as well as the background image using:
.journaltop {
background:url(...) top center no-repeat #ffffff;
text-align:center;
...
}
leave out the large padding to the left, just set it to
padding:5px;
for example to get the same distance from all borders for the text.
hope this helps,
Jasmin
--
`kuschelirmel's stock account.
--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
however, i can't see to centre the date :/
--
*¨) ¤
.•´ .•*¨) .•*•. *
(¸.•Eraserell•*¸ ¤
.•´ .•´¤ ¸•*
(¸.•* (¸.•*´¨`•.
- this will push the date to the middle, too
--
`kuschelirmel's stock account.
Previous Page12345...Next Page