Getting the most out of your CSS Journals Part One

3 min read

Deviation Actions

Grayda's avatar
By
If you're a subscriber, then no doubt you know all too well what you can now do with your journals. The possibilities are almost endless, limited only by your imagination. And there are some great designs popping up, mistercreevy, Nameless-Designer,  depthskins to name a few. But surely there's more to CSS than just images and such? That's where this guide comes in.

Over a series of weeks, you'll see just what you can do with your CSS journal, from minor tweaks to full-blown redesigns. And you can help too! Just note your tweaks to Grayda and you can have your tweak included!

Let's begin!

Deviations Box

This is a commonly requested one. This snippet of code will let you display a column to the side of your journal, with some thumbs in there. Much like the little scrolling boxes you see on some people's eBay listing pages. It can display vertical scroll-bars if needed, or hide them completely. Here's the code:

HTML:


Insert your thumb codes in here!



CSS:

.deviationsbox {
height:400px;
width:200px;
overflow:auto;
}


To hide the scrollbars, change the height to auto (ie. height:auto;) and change the overflow to visible (ie. overflow:visible;). You'll need to manually position it to the right of your journal, or wherever you want it. This code is just the foundation.

Hiding the date and time of your journal

Sometimes the date / time of your journal isn't necessary, or gets in the way of your awesome design. Because the date is contained within a DIV you can't hide (or else it hides the WHOLE journal title and icon and such), we need to make it *almost* invisible. We do this by this little bit of code:

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


Note: This isn't totally perfect. In Internet Explorer, it displays the text, but it's VERY small

Menus

You can now have rollover menus in your journal without too much effort, and all without Javascript too!

HTML:



CSS:

div.links {
height:10px;
}

div.links a {
display:none;
background:none;
}

div.links:hover a {
display:block;
background-color:#0099FF;
}

div.links:hover {
display:block;
background-color:#FFFFFF;
height:auto;

}


Please note that this is a VERY simple way to do it. Expansion for this is a must!


That's it for this issue. I hope this is useful for some, and I hope to see more awesome CSS Journals in the future.

Remember, if you have a tip / tweak, note it to Grayda for inclusion next time.

So until next time, keep on themeing!
Published:
© 2006 - 2021 Grayda
Comments110
Join the community to add your comment. Already a deviant? Log In
fractek's avatar
thanks so much. this is extremely helpful :thanks:
Quadgurl's avatar
Just a question though... how do I make a header? Do I just put the picture URL in the header text box?
kimberthehedgehog's avatar
you put the html code in the journal lol just found that out myself.
J-Mac's avatar
I'm lost. I can't add a scroll box neither CSS or HTML way =|
Grayda's avatar
Sorry for the late reply. Why exactly doesn't it work? Does it show any errors? Which browser are you using? Are you using both the CSS AND HTML? some remember one but not the other..
J-Mac's avatar
It's ok for the lateness =]

I tried both ways, separately, and on the CCS (for the CCS code) part and on the Journal (for HTML) part. It simply didn't show at all in neither way.

Now I'm using *BeyondTheHorizon's code a deviant told me: [link]

Thank you for your time :hug:
Raynex3's avatar
;________; i waaant a subcription..~ ahh ahhh
aniva's avatar
Sorry, I really can't figure this out... For example: If I want a text inside a rollover menu in my journal. Where do i insert the text to get it to show up inside the rollover menu?

lets say I use this CSS

div.links:hover a {
display:block;
background-color:#0099FF;
}

Wich I'm guessing I should Put in the Box for CSS in my journal :)
Where do I put the text/Links that I want to show inside it?

Please help me :pray:
Grayda's avatar
eurgh! Sorry for the really late reply. dA doesn't let me know when people reply to my articles >_>

You can put links in like this:

<div class="links">
Hover here for menu!
Link here
Another link
</div>

Like that. And that goes in the header / journal text / footer bit (any of those three boxes is alright).

Hope that helps :)
Jetthevaporeon's avatar
Um v helpful! Can you tell me how to get a mood box on my journal- I know simple probably but I'm really confused,

Thanks :)
Grayda's avatar
Thanks for the comment :)

You can add a mood box by clicking "More Options" at the bottom of the "New Journal Entry" page. When you do click it, you should see a section called "Mood" where you can fill in the information. They've moved it since the last time I made a journal, so I had to look around too.
Jetthevaporeon's avatar
Yes of course- I managed to figure it out, but thank you for explaining anyway :)
IcEKoLd's avatar
Hey Grayda, thanks for providing some great tips!

I've experimented with the expanding menu and got it to work with Firefox, but no go on IE 7.0. I don't know if it works with IE6 though.

I love that menu option too! It's such a space saver. I'm going to revert to the old way until I can figure out a work around, but thought I'd give you a heads up too. Maybe you know of one?
Grayda's avatar
Sorry I haven't replied to this. I'm on holidays in America and just haven't had the time to go through a lot of my inbox and so forth :(

Personally, I boycott Internet Explorer whenever I can. I fix up major flaws, but for the little stuff, I just ignore it ;).

I think your problem might be because IE7 (and IE6 and below) doesn't know how to handle the :hover attribute on anything other than a link. In Firefox, you can apply :hover to almost any element in your page to create awesome hover effects. IE only knows how to do :hover for links (ie. a:hover). There are a few work-arounds, some using Javascript however :(

But check out fficial&client=firefox-a"Google for a better idea on what can be done.

Hope this helps you out a little :)
popnicute's avatar
where do i have to put the CSS link for Deviant Box and where do i put the thumb codes? :?

i'm confused :(
Grayda's avatar
The CSS codes go into the box marked "CSS (Beta)" or something like that, and you add the

<div class="deviationsbox">
Insert your thumb codes in here!
</div>

into your header, journal text or footer (not your CSS (beta) box) and then where it says "Insert your thumb codes in here!" just replace that with your :thumb: codes and you'll be set :)

Hope that makes more sense :)
Dandelion-lion's avatar
Um, really stupid question i know, but how do i " manually position it to the right of your journal" with the deviations box?

Im a real noob at this stuff, and the only way ive gotten the css journal i have now is through one of those internet things that makes them for you, you just have to fill out what you want, but its quite limited.

When I want stuff like that box and other things,like maybe i want an extra textbox or something, can i just as the code at the end of my original css code?


2 silly questions im sure, but id love your help. Ill be sure to check out the rest of your articles.
Grayda's avatar
jeez sorry for the late reply. dA doesn't notify me of replies to news articles like it does comments.. The code to align the deviations box on the right is really easy:

.deviationsbox {
height:400px;
width:200px;
overflow:auto;
position:absolute;
right:0px;

}

And that should work alright :)

As for the CSS code thing, you can put whatever you like at the end of your CSS. There is no hierarchy like there is with HTML. As long as you remember the { and } and the ; at the end of each line, you should be right..

Hope that helps :)
exarobibliologist's avatar
When I tried adding the code for the deviationsbox, I got this message at the top of the journal.

CSS Error:
Forbidden property (token: .deviationsbox { height)
Grayda's avatar
Perhaps try putting the .deviationsbox { and the height: on different lines?:

.deviationsbox {
height:100px;
}

Like that?
Dandelion-lion's avatar
Cool, thats great. Id forgotten about that comment, so dont worry about it ;)
Thats good to know about the code thing, I found some good codes that I wanted to put on, but I wasnt sure if I could just stick it on the end :)
Grayda's avatar
:XD: no worries. There's only a few languages out there that matter where code is located. The rest of the time you can place code in external files with strange filenames and stuff and it'll work as long as you let the language know it's in an external file.. It's great!
jezuhke's avatar
Hi there, i must be completely stupid, where do you have to place the code? I'm desperate!!!! :psychotic:
Grayda's avatar
Sorry for the late reply. You need to be a subscriber to access the CSS code. I should have mentioned that, but sometimes it's a given. Check out [link] for a list of competitions going on. Most offer subs as prizes.

Good luck!
Join the community to add your comment. Already a deviant? Log In