Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:icondot-silver: More from dot-Silver


More from deviantART



Details

Submitted on
March 12, 2007
Link
Thumb

Stats

Views
1,229 (4 today)
Favourites
138 (who?)
Comments
20
×
So in the first one, we learned how to create our first basic CSS Journal. But now it's time to learn a bit more yes? Make your CSS Journal stand out a bit more with adding some of your own bits and pieces into it. In the this article, I will be replacing all < and > with the characters [ and ] so that the code will show properly.



Sub Headings

With CSS Journals allowing internal divs, it's very easy add extra bits into it. A comment usage is sub heading, just like using the bold text on news to define a certain area of the article. You can find them almost every where.



.subhead{

border-bottom: 2px solid #821122;

font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;

font-size: 16px;

}




We set a border bottom, a font-family and size. You can do more if you want, such as backgrounds, more borders, etc.



[div class="subhead"]Heading Title[/div]



More Internal Divs

Internal divs is a great way of showing extra bits off, whether it's news, or stamps, or features work, etc. Anything.



Internal divs are divs that we use inside the journal but not pre-made ones like the journal itself.



.thumbnails{

background: #333333;

color: #CCCCCC;

text-align: center;

padding: 5px;

}




[div class="thumbnails"]Energy by dot-Silver[/div]



You can add as many thumbnails as you want in there. We define a background colour, colour of any text being used, and we set them to be in the center. When we don't define a width, it will just automatically be 100%.



Styling thumbnails

So we have our special section for the thumbnails, what about adding an extra border onto these or something?



.thumbnails img{

border: 6px solid #FCFCFC;

}

.thumbnails img:hover{

border: 6px solid #821122;

}


We add a border of 6px wide, when the thumbnail is hovered we change the border colour. Simple as that really.

Scrollable Divs
What if you are showing a lot of thumbnails but you don't want your journal to be very very long right? Well, we could put the thumbnails into a div that has a set height, and will scroll up and down.

.scroll{
position: relative;
overflow: auto;
width: 100%;
height: 200px;
text-align: center;
background: #561420;
}


And the div code.

[div class="scroll"]Thumbnails Here[/div]

!important
I would just like to clarify a fact, because a lot of people use this little unneeded bit in their CSS, which of course, just makes the page load a bit slower than it could. It is a fact that you do not need to add !important to the end of all your CSS elements, example:

text-align: center !important;

Not needed... delete that !important!

That's all folks
Well that's all for this series, but I would like to finish off with some CSS Journal features (not including mine)

ElementsUnleashed - Simple yet effective, and a nice combination of colours.

zeolyte - A design that I enjoy, and a great way of keeping the dA colours too.

Nicasus - Got to admit, pretty clever design? So clean and professional looking too.

steward - Ok ok... Not the best CSS design, but it's a good example to a basic CSS Journal.
Add a Comment:
 
:iconbadly-shaded:
badly-shaded Featured By Owner Oct 13, 2007   Traditional Artist
mine ain't working either, can you note me what's wrong, it' for the scroll,

i put this in the CSS bit:
.scroll{
position: relative;
overflow: auto;
width: 100%;
height: 200px;
text-align: center;
background: #561420;
}

and this in the journal bit,

[div class="scroll"]Thumbnails Here[/div]

i tried other ways around too, but i got nothing
Reply
:iconneokiva:
neokiva Featured By Owner Jun 5, 2007  Hobbyist General Artist
i have tried your thumbnail and journal box background pic css but its not working so i have left them out heres my css please see whats wrong.
.journalbox{
background: #ADD8E6;
border: 2px solid #C59A6F;
padding: 0px;
}

.journaltop{
background: #E9967A;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
.journaltop img{
display:none ;
}
.journaltop h2{
color: #FCFCFC;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 17px;
}
.journaltext{
color: #FCFCFC;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
}
.thumbnails{
background: #333333;

color: #CCCCCC;

text-align: center;

padding: 5px;

}

.subhead{

border-bottom: 2px solid #821122;

font-family: Courier New, Courier, tahoma, arial, verdana, sans-serif;

font-size: 16px;
}
.list
{color: #FFB6C1;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 10px;
background: #ADD8E6;
}
Reply
:iconwowandwas:
WOWandWAS Featured By Owner May 8, 2007  Hobbyist Digital Artist
very helpful^^ thank you for making this.
Reply
:iconnreekay:
NReekay Featured By Owner Apr 28, 2007   Writer
does this work for non subscribers?
Reply
:iconmermaid234:
mermaid234 Featured By Owner Apr 11, 2007
:cries: that aint fair i tried the scrollabe divs and it dun work none of my CSS's work not even for a pic background :cries: :?
Reply
:icongrayda:
Grayda Featured By Owner Mar 18, 2007  Professional Photographer
Nicely done! There's a few things in this series that I haven't covered in mine, so it's good to see lots of varied ideas in here. Keep up the good work :D
Reply
:iconbchere:
bchere Featured By Owner Mar 18, 2007
enjoyed reading it =)
Reply
:iconrandomspyderskins:
randomspyderskins Featured By Owner Mar 15, 2007   Interface Designer
CSS = Catch Someone's Soul!!!! BWA HA HA!!!
All kidding aside, thanks for the tips! My journal's been needing help, and all these articles are great for inspiration!
Reply
:iconjezhawk:
Jezhawk Featured By Owner Mar 15, 2007  Professional Digital Artist
wow, I love that thumbnails roll over thing! It's great :clap:
Reply
:iconleaf-lover:
leaf-lover Featured By Owner Mar 14, 2007
I really like the examples of deviants with different CSS journals at the bottom. =)
Reply
Add a Comment: