Stats

So a few people have asked me how some of this CSS stuff works on the deviantART journals. So I decided to create a little page with some details on how my journal is set up so people can get a bit of understanding as to how CSS works here. If you want to see the page, you can find it here:

Do you have an example of what section you're having problems with? If you can let me know what it is you're wanting to do and if you have an example or something that I can look at, I'll be able to help a little bit better. Let me know and I'll see what I can do to help.

Looking at your journal, I'm assuming that you're talking about the gradient in the background of the journaltext area. Those are things that I usually do in Photoshop. If you don't have Photoshop or something like it, there is a free program like Photoshop that you can download called GIMP. You can get more information about it at gimp.org - [link] . It's an open source image editor that's very much like Photoshop. And it'll let you do the gradients that you want to do for these backgrounds. In both Photoshop and GIMP, there's a tool that will create those smooth looking gradients using two colors that you specify.

To make that gradient though, what you need to do is get information about the colors you used there. Looking at your code, I can see why it may have been a bit difficult to get the exact green color you used in the header. In the code, it's just referenced by its color name, green. In most image editing programs, they like the HEX value number for the colors like that. (Those are the numbers in CSS files that look like #3BA2D9, which is a light blue color.) Personally I try to avoid using the color names because they tend to make things like this more difficult. What's great is that you can still get the color's HEX value from what you have already, even with the named color. In Windows, I'll usually take a screen capture and then paste it into my image editing program, then use the little eyedropper tool to get the exact color information on the color I'm looking for. In this case, the green you used in the header is #008000. The bottom color is an easy one, black, which is HEX #000000. You get both of those colors put into your image editor as the foreground and background color and then with the gradient tool, create a perfectly straight gradient with the green at the top, fading down into black. What you should end up with is something that looks like this:

Fortunately, with web backgrounds like this, they file doesn't need to be very big since it's just going to repeat itself over and over. The smaller file will also help your page load faster.

If you want to check out how that file would look on your journal, go ahead and download that to your computer and then upload it to where you keep your images and try that in your CSS. It should fix the gradient so that it looks smooth all the way from the green at the top to the black at the bottom.

The process there may be a bit confusing at first, but if you have a program to practice those kinds of things in, you'll get batter at it. Hopefully that helps a bit.

Dude, seriously, thanks a lot. I found other tutorials from this same site, but I liked this one better. I'm going to use it, but just edit stuff to my liking. Of course, I'll give you credit. Thanks again!