Shop Forum More Submit  Join Login
Sorry for the long delay between part six and part seven everyone. The Christmas season was one of laziness and fun. Hope your Christmas and New Years was well. Now on we press, before we get mixed up on topics about what mum did to Santa :P

Favourite your journal!

That's right! For those who don't know, or haven't been to my userpage yet, you can now (with some limitations), Favourite people's journals! With help from dancewiththesky, the original idea being by BoffinbraiN, and coded by myself, you can now use CSS, GD and PHP to fut a fave-counter on your userpage! Each person who reads your journal can click on the button and fave the news article, and the counter will go up. Keep in mind that this does NOT add the journal to your favourites, nor can someone see who has faved the journal (due to technical limitations). But this is a concept that is quickly expanding.

To claim your own, check out Favebox v1 and follow the really easy instructions! Subscribers only sorry ;D

Two Column Journals

This code was posted by the ever inventive BeyondTheHorizon and shows you how to create a two-column journal layout using some basic CSS.

Read the article here: Ever wanted a 2 columned journal?

And make sure to thank BeyondTheHorizon for the code!

Highlighting text

ive been wondering how to make say an indevidual line in the main section of the journal have a different colour backround/text .. maybe highlighting a section of text would be a better discription.. by RAINBIRD

This is something that could be handy for everyone, and easy to do too! Here's the code you need:

CSS:

.highlighted {
background-color:#FFFF00;
}


HTML:

This is the text to highlight!


And now your text will be highlighted in yellow! Use sparingly please, as too much of this effect can cheapen your journal

General design tips

When designing a journal, keep some design tips in mind:

  • For your backgrounds, pick shades of one colour. Shades of dark red, greys and greens work well
  • For text, a good contrasting colour works well. Black on white, white on black, light red on dark red. Contrast is good
  • Avoid obvious backgrounds. Tone them down if they're to be used in your journal
  • Don't jam up your journal with flashing text, too many animated pictures and gadgets. If it annoys you, it will annoy most others


This applies to all design works.

CSS tutorials

Instead of featuring journals here this week, I'll point you to some very useful CSS tutorials, to give those who don't know CSS that well, a good start.

<a href="nyssajbrown.net/blog/projects/…Nyssa's CSS dA Rundown - Very useful for dA CSS
W3School's CSS tutorial - Great for an easy-to-read CSS overview
W3School's PHP tutorial - Good tutorial for PHP, which is a necessity for GD, which makes Favebox possible
PHPFreak's GD tutorial - Perfect for learning GD, which lets you use PHP scripts on dA (with limitations)


And that's it for this week. Sorry for the delays, the next one should be ready in 2 weeks time like always. Happy 2007 and remember to note suggestions to Grayda

Add a Comment:
 
:iconneek-zique:
neek-zique Featured By Owner Jan 11, 2007  Professional Interface Designer
:paranoid: I seek guidance on how to put two separate images in the top corners of my journal. It seems so simple, yet I have no idea how to do it.

Teach me, master! :ninja:
Reply
:icongrayda:
Grayda Featured By Owner Jan 13, 2007  Professional Photographer
Best way would be to have something like this:

CSS:

.image1 {
top:0px;
left:0px;
position:absolute;
}

.image2 {
top:0px;
right:0px;
position:absolute;
}

HTML:

<img src="picontheleft.jpg" class="image1"><img src="picontheright.jpg" class="image2">

And you're all set. Hope this works for you, and enjoy :)
Reply
:iconneek-zique:
neek-zique Featured By Owner Jan 23, 2007  Professional Interface Designer
thanks a lot :D that did it
Reply
:icongrayda:
Grayda Featured By Owner Jan 23, 2007  Professional Photographer
Superb! The layout looks great! And I LOVE the webcam pic ;P
Reply
:iconneek-zique:
neek-zique Featured By Owner Jan 23, 2007  Professional Interface Designer
another question: how do I make for the image in my footer to stay there when the journal is full-viewed?

i think you were seeing my old journal, since i hadn't updated it yet... :o though i see my corner pic snuck through...
Reply
:icongrayda:
Grayda Featured By Owner Jan 25, 2007  Professional Photographer
Your footer should stay put? All contents of the "Footer" area of your journal should stay there irregardless.. Try shifting the code elsewhere? If that fails, could you please post (or note) me the code for your footer?
Reply
:iconneek-zique:
neek-zique Featured By Owner Jan 25, 2007  Professional Interface Designer
I tinkered around and figured it out. I put the footer in the .journaltext instead of .journalbottom, but then the image was restricted by the margins placed in .journaltext. So I replaced my margin-left and -right codes with padding (I had been having trouble with exactly how padding worked and margin-[direction] was more straightforward), and used the same div class method you told me for placing images in corners to place the image at the bottom (center assumed) of .journaltext and made the margins of that particular class -1000 ;p because I want my footer to have room to breathe (or build a house :lol: i kid). Did a little more tinkering with margin and padding values to make sure it looked just right B-). Though, knowing me I probably did some roundabout way to do it, when there's probably a lot simpler way to have done it. :shrug:

Well, I do have one more question: Why does it look so shite in IE as compared to Firefox?
Reply
:icongrayda:
Grayda Featured By Owner Jan 25, 2007  Professional Photographer
IE and Firefox are two totally different browsers. Firefox is build so it adheres to standards. That way pages build to standards, will look as they should. IE is built. It does adhere to standards, but it's built the day the developers see fit. So it doesn't conform to all of the w3c (the world wide web consortium) standards. There are compromises however, and a simple google search will show you how to take care of the remaining problems..

Best of luck :)
Reply
:iconmzhou:
mzhou Featured By Owner Jan 10, 2007
I had a subscription before you started writing these articles and my journals looked plain. It's a pity about the timing :(
Reply
:icongrayda:
Grayda Featured By Owner Jan 10, 2007  Professional Photographer
Plain is coming back in fast. It's wonderful coz that means I'm still in a job ;P

Well there's always contests and stuff, and also these tips can be applied to a regular HTML / CSS page (with expansions of course!) so people don't have to miss out.

;D
Reply
:iconwrighton363:
wrighton363 Featured By Owner Jan 8, 2007
:horns:
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
:headbang:

Thanks!
Reply
:iconalteru:
Alteru Featured By Owner Jan 8, 2007
Wicked! I was just talking to someone about faving journals! :D
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
Yeah it's not quite perfect yet. You can't see who has faved your journal, but it's a good indication on how many people read your journal.

Next up is determining which user is logged into dA so we can accurately record journal faves and stuff. We're pushing CSS to the limits here! :XD:
Reply
:iconjezzy-fezzy:
Jezzy-Fezzy Featured By Owner Jan 8, 2007   General Artist
I got one month left for my sub, but earlier on I created my CSS journal layout, and it was fun! =D

I want to continue on with my subscription :)


If someone donated me a sub again =D Or I can buy it for another month.
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
There's always contests going on around dA that you could enter to win more subs. And some people are just straight out generous. That's how I got my first sub. =wazabees bought it for me ;D

I'd shout you one, but I've gotta cut back on PayPal spending. I'm saving up so I can move out of home, so for now PayPal spending is on hold.. but I suggest the contests ;D
Reply
:icontheexquisitecorpse:
TheExquisiteCorpse Featured By Owner Jan 8, 2007
i like the journal of *Lilyas
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
It's looking really good! I'm not a fan of the menu though, but she certainly knows what she's doing ;D
Reply
:icondandelion-lion:
Dandelion-lion Featured By Owner Jan 8, 2007
Very nice! I just got a subscription and was wondering about CSS journals. :D

It seems that the first link "Nyssa's CSS dA Rundown" isnt actually a link though. Just giving you the heads up :)
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
You're right.. [link] <-- there's the link for you!

And I don't think I could live without a sub now. Damn you dA! :P
Reply
:icondandelion-lion:
Dandelion-lion Featured By Owner Jan 8, 2007
I just got a one month sub from an anonymous donator and I love it so much that ive talked my parents into buying me a years subcription for my birthday. :giggle: Ive only had to subcription since the 5th and Im even more addicted to DA than before, and that was a *lot*. :D
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
Yeah I got addicted, then I had a few troubles IRL and that kind of got me in a slump, so I was inactive around dA. I'm still rather inactive (tons of stuff to go through ;P) but I'm slowly getting there.

=BadFurDay is buying me a 1 year sub coz I'm making him a CSS journal. The price was $10 but he's going beyond that and buying me a year's sub :D
Reply
:icondandelion-lion:
Dandelion-lion Featured By Owner Jan 9, 2007
Wow, thats very cool of him. Ive only ever had that free one and now this and I still dont have any idea who bought it for me. It is nice to know that someone thinks yourart is deservng :) Or that *you* are deserving.

A sub will definately help wih going through all those messages.
Reply
:icongrayda:
Grayda Featured By Owner Jan 18, 2007  Professional Photographer
When =BadFurDay bought me the 1 year sub for doing his CSS journal, it told me who had bought it for me.. I got an email about it.. dunno if you can toggle that however..
Reply
:icondandelion-lion:
Dandelion-lion Featured By Owner Jan 18, 2007
Hmm..Well, I havnt checked my emails in over a month..May as well give it a try...No, no email. I guess you can toggle it then :) Oh well, if they want to stay anonymous then I guess they can.
Reply
:icongrayda:
Grayda Featured By Owner Jan 18, 2007  Professional Photographer
Yeah. Some prefer to stay anonymous. Another alternative is that the message got marked as spam. I had my email from dA marked as spam.. and when I donated a sub to my friend Hayley, I don't recall seeing an option.. hmm oh well..
Reply
(1 Reply)
:iconrawimage:
rawimage Featured By Owner Jan 8, 2007  Hobbyist Photographer
hmm I wonder if I can define my own classes. I tried one for headlines, but it leaves a big space under line...
Reply
:iconyashachan:
yashachan Featured By Owner Jan 8, 2007
Yeah, you can. You just have to tweak stuff (ie, set negative margins) to make it look right.
Reply
:iconrawimage:
rawimage Featured By Owner Jan 8, 2007  Hobbyist Photographer
I wonder if you can tell me what's wrong with my class:


CSS

.title {
color:#8B7355;
font-family: Trebuchet MS;
font-size:20px;
font-variant: normal;
font-weight: bold;
text-decoration: none;
}

HTML

<div class="title">Under this line of text is a big gap</div>


The gap is visible if another element lika a thumb or :dAobject: follows.
Reply
:iconyashachan:
yashachan Featured By Owner Jan 8, 2007
Put in something like margin-bottom: -5px; in .title.
Reply
:iconrawimage:
rawimage Featured By Owner Jan 8, 2007  Hobbyist Photographer
:w00t: it works! cool, thank you! :highfive:
Reply
:iconyashachan:
yashachan Featured By Owner Jan 8, 2007
You're welcome. :) :highfive:
Reply
:iconarctictransfuse:
arcticTransfuse Featured By Owner Jan 8, 2007
Whoo!
<3
Reply
:iconalperyesiltas:
alperyesiltas Featured By Owner Jan 8, 2007
great improvements :clap:
how about color-shifting journal borders ? check out my journal [link] if you wanna know how , send me a note ;)
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
I saw how you did it. That's looking pretty good! Can I feature it in the next CSS article?
Reply
:iconalperyesiltas:
alperyesiltas Featured By Owner Jan 9, 2007
sure , I would be happy :D thanks . . .
Reply
:icongrayda:
Grayda Featured By Owner Jan 9, 2007  Professional Photographer
You're welcome! Keep an eye out in issue 8 ;P
Reply
:iconduhcoolies:
duhcoolies Featured By Owner Jan 8, 2007  Professional General Artist
:evillaugh::ninja:
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
I know that look. Wait.. no I don't.. btw I visited your website finally. Great job with that one ;D
Reply
:iconduhcoolies:
duhcoolies Featured By Owner Jan 8, 2007  Professional General Artist
:lol: thnk u
Reply
:iconseyan:
Seyan Featured By Owner Jan 8, 2007
Hmm :D
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
Hope you got some use out of this ;D. btw nice gallery, nice avatar too! Oh and sweet desktop screenshot ;P
Reply
:iconseyan:
Seyan Featured By Owner Jan 9, 2007
Thanks a lot! & You are doing a great job out there! Much Appreciated!
Reply
:iconpickupjojo:
pickupjojo Featured By Owner Jan 8, 2007  Professional Interface Designer
Great. I'll try one more time to use your favebox with my nick but I think it won't work as usual... :p
Reply
:icongrayda:
Grayda Featured By Owner Jan 8, 2007  Professional Photographer
And I still haven't coded in that fix. Sorry about that. Version two is almost here I would hope ;P
Reply
:iconpickupjojo:
pickupjojo Featured By Owner Jan 8, 2007  Professional Interface Designer
I'd hope too. :D
Reply
:icongrayda:
Grayda Featured By Owner Jan 9, 2007  Professional Photographer
A temporary solution has been made. I've disabled registrations that begin with a P. So you'll have to put a letter in front of your username. This was the best method I could think of at the time.. ;P
Reply
:iconpickupjojo:
pickupjojo Featured By Owner Jan 9, 2007  Professional Interface Designer
But my nick is PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPickupjojo. :p
Reply
:icongrayda:
Grayda Featured By Owner Jan 10, 2007  Professional Photographer
It'll be !pickupjojo if you're not careful!

hahaha just kidding. If you have another way to get around the "p" problem, I'd love to hear it :)

Thanks for pointing out the issue with the P :)
Reply
:iconpickupjojo:
pickupjojo Featured By Owner Jan 10, 2007  Professional Interface Designer
I think that you should encode URLs (e.g. "yoursite.com/pic/pickupjojo" and "yoursite.com/link/pickupjojo") with URL rewriting using .htaccess file. :)
Reply
Add a Comment:
 
×

:icongrayda: More from Grayda


More from DeviantArt



Details

Submitted on
January 7, 2007
Link
Thumb

Stats

Views
1,081 (1 today)
Favourites
142 (who?)
Comments
83