Shop Mobile More Submit  Join Login
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
:iconyeknomster:
yeknomster Featured By Owner Mar 14, 2007  Hobbyist General Artist
Good article, saw this just when I'm starting to take a bold step into CSS :D
Reply
:iconbeyondthehorizon:
BeyondTheHorizon Featured By Owner Mar 14, 2007  Hobbyist Digital Artist
The !important tag might be needed by some browsers. Take *zeolyte's Journal; check it in FF and IE, and you see 2 different Journals. Dunno if this is the reason, but the 2 versions does look rather different ;)
Reply
:iconlittlep:
littlep Featured By Owner Mar 14, 2007  Professional Interface Designer
very very useful for the css beginer~!!!!

thanks!
Reply
:iconlysanda:
lysanda Featured By Owner Mar 14, 2007   Traditional Artist
Very useful! When I will have some time I will take them all in action!
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 13, 2007
Nice article.

You can display < and > on your code using &#60; and &#62;, so type
 &#60;div class="scroll"&#62;Thumbnails Here&#60;/div&#62;
and get
 <div class="scroll">Thumbnails Here</div>

You should be able to use &gt; and &lt;, but these seem to be blocked so you'll need to remember the codes.

It might be worth mentioning that you do need !important in some situations, but that it should only be tried when you're not getting the result you expect.
Reply
:icondot-silver:
dot-Silver Featured By Owner Mar 13, 2007  Hobbyist Interface Designer
Well I was told by staff that !important isn't needed, this is because our custom CSS is the last CSS to be put on the page, so everything that we do in it overwrites all other CSS that is put on the page.

And thanks for the tip on the < and > I'll remember that for when I add #4 to the news article. (I already have it on my journal)
Reply
:iconhumpy77:
humpy77 Featured By Owner Mar 13, 2007
That's what I would have expected. However, when I did my first journal with CSS I definately had to add !important to get some of the background images where I wanted them. Maybe it's just a problem in the preview window, :hmm:.

Glad I could help. You can use the &# codes to get all sorts of characters out, www.lookuptables.com.
Reply
:iconexarobibliologist:
exarobibliologist Featured By Owner Mar 13, 2007  Professional Photographer
The !important is probably the last hangover of CSS that can be disposed of in most browsers.
Some browsers claim to need that extra !important kick in the rear (:lmao:) but for the most part Firefox does not. There are a few FF plugins that still use that extra tag though.
Reply
:iconlawrencededark:
LawrenceDeDark Featured By Owner Mar 12, 2007
Nice ... I like the custom thumb code and I have never understood why so many people are using the !important thing.
Reply
:iconmikey-madness:
mikey-madness Featured By Owner Mar 14, 2007  Hobbyist General Artist
CSS can be a bit confusing to me. But I am learning.
Reply
Add a Comment:
 
×

:icondot-silver: More from dot-Silver


More from DeviantArt



Details

Submitted on
March 12, 2007
Link
Thumb

Stats

Views
1,886
Favourites
137 (who?)
Comments
20
×