This is a simple CSS tutorial/idea for some of you who want to include this in your current wordpress theme. In this simple tips, I will show you how you can implement alternating rows in your blog post.
This rows can be used for certain stuff such as to display a chat conversation, a list of items in your <ul> or <ol> tag and some other stuff. You might not need this all the time, but it can improve the readability of that particular lists/item in your blog post.
For instance, I use it to display a chat conversation:
Hot girl : Hello!
Flisterz : hello
Hot girl : I think ur hot
Flisterz : oh thank you.
So lets proceed with the how-to stuff.
The Image
Firs of all you need to prepare the background image; the blue and light blue rows as seen in the example.
In the example, the height for each row is 21px. You can use any value you want, to suit your theme/page. But remember not to use a very small value because it might make the readability even worse. So, my opinion, make it above 20px. From the picture also, you can see that we only need a small portion of the whole rows to reduce the load. Since we are using CSS, so lets ask CSS to do the rest of the job for the full background. Save the small portion of the image as chat.jpg or anything you want.
CSS-ing
Okay now lets edit your style.css file. Add this code anywhere in the file;
p.chat {
background:transparent url(images/chat.jpg) repeat 0px 0px;
line-height:21px;
padding:0px 0px 0px 8px;
width:470px;
margin-bottom:10px;}
If u noticed, the line-height has the same value as the height of the row in the image shown earlier. So that can be used as your guideline. However, the values and other CSS properties may vary,especially the width; depending on your theme.
Ok how am I going to use it?
Simple. Everytime you want to use this alternating rows property, just include this simple code in the post editor
<p class="chat"> your text here </p>
Related
This post has 10 comments.
Closed
Commenting is currently closed.
Please contact me for further assistance.
erm. good one. tapi aku rasa ada kesilapan sikit dekat code ni
part ni kena tukar
kepada
baru ianya akan jadi CSS 3.0 valid dengan Xhtml tiada kesalahan langsung. Sekian, terima kasey!
26 Jun 07 | 12:31 pmwahhh! nice tutorial.. bagus ni.. thx ya!
26 Jun 07 | 2:58 pm@artgeex : haha yang tu pun btol la jugak
@manchurr: thank you. hehe
26 Jun 07 | 11:59 pmi think its better to use ul (don’t use ol for this)
27 Jun 07 | 12:28 am1) why is it better to use ul?
2) i tested this on friendster tapi macam tak jadi je.. hehe. myspace tak tau la boleh ke tak. anyone knows why it doesn’t work? (image url is ok) adakah memang tak boleh tambah kat dalam stylesheet friendster tu? hmm2.
27 Jun 07 | 1:04 amcuba korang perhati masa korang chat guna yahoo ke msn ke.. mcm mana format dia..
27 Jun 07 | 1:24 amowh nice! arigatou!
**aku suka contoh conversation ko hehe
27 Jun 07 | 1:30 amwhoaahh.. You are getting Spammed already.
@ahkak artgeex, wahaha.. tak tahan…. rofl.
=)
27 Jun 07 | 5:58 amokeh.. itu spam harga yang perlu di’bayar bila ko mula menjadi popular.. ha ha
install spam karma..
27 Jun 07 | 10:33 ami prefer to use instead, but it might be usefull if we want to “kalerful”-kan our post. make it look like note book
27 Jun 07 | 10:46 am