Getting the most out of your CSS Journals Part Two

5 min read

Deviation Actions

Grayda's avatar
By
Welcome back! If you haven't done so already, have a read of Getting the most out of your CSS Journals Part One. Part two deals with Dressing up your mood boxes, adding extra lines to your Journal title, and will touch upon dynamic images in your journal, amongst other things. So without further delay, let's begin!

Mood boxes

"Mood boxes", or the little box that shows what you're listening to etc, is now available to everyone. Subscribers and non subscribers alike. It would seem that there's not a whole lot you can do with these, asides from change the colours and such. But something a few people don't know, is that you can move your mood box anywhere you like, and do so much more than just colourising it. In this example, we'll show you how to shift your mood box to the right, just like in This example.

CSS:

.journalbox .list {
position:absolute;
right:0px;
bottom:0px;
width:25%;
}


And that's all you need! When you look at your mood box, it will be 25% wide, and sitting on the bottom-right hand corner of your journal! Please note that this will look shocking on smaller journal entries, or some journal views (ie. on the userpage, full-view etc.). Now you can stretch out your box to wherever you wish, put half on one side, half on the other, hide bits of your mood box. It's all up to your imagination!

(A tip: If you find you can't rid of the mood box, because there is no "remove mood" feature, try this code:

.journalbox .list {
display:none;
}

to rid of the mood box altogether)

Journal Taglines

Ever wish you could add a small bit of text underneath your journal title, like you can on the major blogging systems out there (Think Wordpress and such)? It's really easy with CSS. Just add the following to your "Header" section of your journal, and your CSS section:

HTML:

It's all in a day's work!


CSS:

.journal-subtext {
top:30px;
position:absolute;
}

.journalbox .journaltop {
font-size: 0px;
}


Just remember to tweak "30" to whatever value you wish, depending on where your .journaltop h2 header is placed, and if you want to keep the date / time, leave out the font-size:0px; And there you have it! It'll now show your sub-text (or personal message) below your journal title. This can be done with images, CSS menus (as per last week's example) or anything else dA supports. It's only limited by your imagination!

Dynamic Images

Imagine if you could use your dA journal to tell people what TV show you were watching at that very second, or if you could display your computer's uptime, temperature and the last program you ran, or even display news headlines, images from your gallery, new posts on your forums, or so much more. Impossible you say? No way! Thanks to the magic of GD

For those in the know, or people who have used Last.fm, AudioScrobbler, or any other services like that, GD / Dynamic Images should be nothing new. For the rest of you, GD is a PHP library that lets us draw text on a picture, or draw a completely new picture from scratch. The output, can be a standard JPG, GIF or PNG file, which dA is more than happy to support. The trick comes from writing a PHP script that returns an image instead of text. Now I won't go into PHP and GD and the like. That's wayyyy beyond the scope of our article. Instead I'll give you an example. Check out my Userpage, and look at my webcam. That is a dynamically created image. Every time it's viewed, it grabs my base image (the green), adds text to it, depending on what's in the database, and shoots it off as a JPG picture. Our browser sees the JPG data, and displays it as such.

With a bit of manipulation, you can write a script that reads your computer's uptime, shows off some images, even parse a website to get images for displaying. It's limited by PHP's engine, and your imagination!

Have a read of PHPFreak's GD Tutorial for a starter on GD. Some PHP knowledge is required here ;D


That's all for this week. Remember, if you have any suggestions, note them to Grayda for inclusion in the next part of Getting the most out of your CSS Journals. Thanks for reading, :+fav: if you get some use out of this, and keep watching the skies!

Previous Weeks
Getting the most out of your CSS Journals Part One
Published:
© 2006 - 2021 Grayda
Comments123
Join the community to add your comment. Already a deviant? Log In
chi-u's avatar
Thankyou this helped me alot :)
But after I use

.journalbox .list {
display:none;
}

to remove my mood box, I am left with a space between my header and my content/text box. Hasd this got something to do with padding? I haven't got any padding in my code so far but I am still getting a space between my text box and my header :(

please help!

This is my code so far:

.journaltop {
font-size:0px;
background-color:000000;
background-image:url([link]);
background-repeat:no-repeat;
background-position:top center;
width:auto;
height:593px;
}
.journaltop img {
display:none;
}
.journaltop h2 {
color:#FFFFFF;
font-size:14px;
font-family:Bookman Old Style;
line-height:1em;
letter-spacing:0.01em!important;
background-color:transparent;
text-align:bottom-right;
}
.journalbox .journaltext {
background-image:url([link]);
background-repeat:repeat-y;
background-position:bottom center;
}
.journaltext{
color:#FFFFFF;
font-size:12px;
font-family:Bookman Old Style;
text-align:center;
}
.journalbox .list {
display:none;
}
Grayda's avatar
To fix it, you need to reduce your header height by 10px. So:

.journaltop {
height: 592px;
}

Would become:

.journaltop {
height: 582px;
}

I think deviantART is adding a 10px padding to your journal (I couldn't see where it was coming from) so the height was actually 606px instead of 596px like the image. Make that change, and everything should work better :)

And a handy little tip: If you've got Google Chrome, you can press Control + Shift + I to bring up the Developers tools pane. This lets you inspect HTML, CSS and other stuff to find out where problems exist. It takes a little bit of learning, but if you do CSS anywhere else on the 'net, this is a lifesaver. Firebug is the Firefox equivalent and might even have an IE extension.

All the best!
chi-u's avatar
Oh and also the body text stretches out over the sides. It all fits perfectly when you view the journal on my DA profile, but when you view it in the jounral section it all falls apart due to the different size it the screens :(
chi-u's avatar
Thankyou so much!

That worked perfectly! :hug:
I was just wondering if you would also possibly be able to help me once more with another small problem. You can probably see the problem yourself by viewing the live preview here: [link]

I tried centering the heading text and also the mood, but the black boxes still stretch out to the sides. I tried centering the text of the heading and mood boxes, also tried adding the property:

width:927px; /this is the width of the header and the footer

but it only fixed it on the right side (it still stretched out to the left side :()

And also one more problem; that ugly BG it has :XD: I wish it to be transparent/match the rest of the DA background, but it has 2 weird green colours behind it all..

Thanks, sorry for bothering you ^^:
hyperfreakin's avatar
sweet this can really help me when i get a subscription :)
CrystalCurtisArt's avatar
Hey, I was wondering how to move your little "No Comments | Previous Journal Entries" line around? As of right now, it's hovering outside my css blocks. 8/ Thanks!
IonToon's avatar
I just have a quick question. I'm busy having problems making the mood list backgrounds completely transparent. It works perfectly in Explorer but in Firefox it makes stripes. Please if you can help me.


Thank you for your time.

P.S. it really hard making CSS coding work in both browsers.
Grayda's avatar
Sorry the the late reply. dA doesn't let me know when people comment on these news reports :roll:

Generally, I ignore Internet Explorer. Firefox adheres to standards so I support that more.. but you're right. Getting it to look just right in all browsers is tough. That's why building full-on websites is great because you can use IE / FF hacks to get things running nicely. Now to your question;

To get the mood list to be transparent, you can use:

background: none;

to make it transparent. That should work, but if not, you can try making the background the same colour as your journal (if possible). Hopefully you can get something working :)
IonToon's avatar
Thanks for the help. I have always used IE but I know that a lot more people use FF so its probably be best to get that right first and I'm starting to like the auto spelling.

Thank you once again, your tutorials have been really helpful.:)
Raynex3's avatar
>__< AHHHHHHHHHHHH I REALLY WANT A SUBSCRIPTION~
Grayda's avatar
Sorry for the late reply. I need to check these more often ;P.

There's a few competitions going on around dA, and they often have subscriptions as prizes. Have a look at *Deviant-Contests for a list of contests you can enter. Best of luck!
Raynex3's avatar
=D hey, thank you so much~
Grayda's avatar
No worries ;D
AheadTaro's avatar
how can i insert images in my journal? i am a newbie....
Grayda's avatar
Sorry for the late reply. To insert images, you have to be a subscriber. All the cool stuff you can do on dA like CSS Journals, images and of course, the favourites box for your journal, you need a subscription. There are contests out there that offer them as prizes, and dA often gives people a free one-week sub to try out. HTH :)
AheadTaro's avatar
Sniff...I am nit subscriber....thats too bad...nvm nvm
wheaman's avatar
all of these are SO convenient :faint:
Grayda's avatar
Thanks! Hope you got some use out of them! And if you think of a cool idea, send us a note. Even if you don't know a scrap of CSS ;D
wheaman's avatar
well, im learnin it, but ima dump my current journal... gonna make it look hawt
Grayda's avatar
I did that the other day.. next journal is going to be a dynamic one. Each time you refresh the page it will look different. Different header, footer, div boxes, it's gonna be great :D
wheaman's avatar
how would ya do that:?

i got this cool thing where you highlight a certain part, like a phrase, and somethin pops up. not the cleanest thing in the world, but hella cool
Grayda's avatar
That's much like my journal. When you hover over song titles, it displays the album cover. Very cool indeed!

And the dynamic journal would use a modified version of [link] with something like random.php?section=header to make the header random, section=body for the body, and so forth. Rather tricky, but hopefully it'll look good :). Either that, or I'm going to create a little script that lets users pick a skin to display. It'll remember their settings, and display it. I'm also working on a fave button for my journal, so when people click the button, it adds 1 to a database, and displays the result. Like dA's news faving system, only not as cool or complex.

I'm full to the brim with ideas :XD:
Reddy-Red's avatar
Where do you get Journal Layouts from? :?
Join the community to add your comment. Already a deviant? Log In