[x]

Browse More Like This

Download Image
JPG, 800×4000 more ▶

More from =kuschelirmel-stock

View Gallery · View Prints

Featured in Groups:

#eCSSited
a place for all your CSS needs

#iterators
We iterate!

#Germanfunclub
Die deutsche fun-seite!

Details

Submitted: November 5, 2006
Image Size: 1.3 MB
Resolution: 800×4000

Link

Thumb

Statistics

Comments: 258
Favourites: 1,911 [who?]
Views: 64,833 (0 today)
Downloads: 281 (0 today)

[x]

Journal CSS - Part 1by =kuschelirmel-stock

Resources & Stock Images / Tutorials / Web Design / HTML & CSS & Scripting

Part 1 of 2 - the corresponding template can be found here [link]

This tutorial deals with the process of designing a CSS journal and of how to get the thing coded.
It only covers the basics, custom divs will be dealt with in Part 2 - which can be found here.

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...

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.
The quote I used from $zilla774 is taken from his news article Journal CSS Resources which also 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.

love 8 8

joy 5 5

wow 2 2

~~mad 0 0~~

~~sad 0 0~~

fear 1 1

~~neutral 0 0~~

~pisimau Mar 2, 2013 Hobbyist Digital Artist

Thanks for this great tutorial! I'm studying CSS right now and this was very helpful : ))))

=kuschelirmel-stock Mar 9, 2013 Hobbyist Digital Artist

glad I could help

~pisimau Mar 9, 2013 Hobbyist Digital Artist

~Batnamz Jan 22, 2013 Hobbyist Digital Artist

thanks a ton for this! I had made a layout years ago and just edited the css from time to time to change it. But the new skin editor took half the CSS away from it and wont let me edit it correctly. I was all "noooooo" XD I'm not great with css, so this should help me re-build what I had. Thanks again!

Flagged as Spam

Hidden by Owner

~OwlsOnFoot Oct 16, 2012 Student Digital Artist

This is fantastic! You're amazing! and I love Part 2 ([link]) as well! Brilliant!

*Fleur-dRae Aug 11, 2012 Student Interface Designer

I can't thank you enough for this tutorial!! I had been trying for the past few days with little success to do a simple image on top and image on bottom journal skin - I figured our the header and body, but didn't understand the footer very well (especially the image alignment with mine) - and this tutorial just made so much sense!!! Again thank you ever so much for sharing!!

~Redphoenix0701 Aug 8, 2012 Hobbyist Digital Artist

How come this code does not work? .journalbox {
background-color: #002EB8 !important;
border: 3px #203040 solid !important;
background-image: url([link]);
background-position: top left;
background-repeat: no-repeat;
}

.journalbox .list li {
background-color: transparent !important;
color: #C0C0E0 !important;
}

.journalbox .list li.a {
background-color: transparent !important;
color: #C0C0E0 !important;
}

.journalbox h2 {
color: #C0C0E0 !important;
}

.journalbox .journaltop {
background-color: transparent;
color: #C0C0E0 !important;
background-image: url([link]);
background-position: top left;
background-repeat: no-repeat;
height: 768px;
}

.journalbox a {
color: #50C0FF !important;
}

.journalbox a:hover {
color: #70E0FF !important;
}

.journalbox .journalbottom a.commentslink {
color: #8765FF !important;
}

.journalbox .journalbottom a.prevlink {
color: #8765FF !important;
}

.journalbox .journalbottom a.commentslink:hover {
color: #A785FF !important;
}

.journalbox .journalbottom a.prevlink:hover {
color: #A785FF !important;
}

.journalbox .journalbottom {
background-color: #231234 !important;
padding-top: 6px;
background-image: url([link]);
background-position: top left;
background-repeat: no-repeat;
height: 768px;
}

.journalbox .journaltext {
color: #C0C0E0 !important;
background-image: url([link]);
background-repeat: repeat-y;
background-position: top left;
}

.journalbox .journaltop img {
display: none !important;
}

.journalbox .boxtop {
padding: 0 !important;
}

=kuschelirmel-stock Aug 12, 2012 Hobbyist Digital Artist

do I look like your personal ask me anything but don't bother being polite person? A little "hello" or "could you help me" or maybe even a "please" go a long way. Oh and a description of what exactly doesn't work. but seeing as you didn't bother with that, I'm not going to try and find out. Ask someone else.

More from =kuschelirmel-stock

Featured in Groups:

Details

Statistics

Journal CSS - Part 1by =kuschelirmel-stock

The Journal Portal

Polls

What is your preferred drawing software?

deviantART [dee·vee·un'nt·ART]

Keep in Touch!

Deviousness

Add Media

Style