Comments on: CSS The Star Matrix Pre-loaded

By: Paul OB

Paul OB — Tue, 16 Feb 2010 09:22:00 +0000

@Sylwester:Feel free to use the code in the article (at your own risk of course).

By: Sylwester w Górach

Sylwester w Górach — Tue, 16 Feb 2010 07:24:05 +0000

is there any whay to put it in the world press ?? it would be fine add to this script.

By: azhar2day

azhar2day — Thu, 11 Feb 2010 14:39:52 +0000

this is wonderful ..

i read it 3 times and get a fantastic results and sure i put a copy of this lesson on my site here

http://www.azhar2day.com/vb

By: Ted J.

Ted J. — Thu, 30 Jul 2009 15:37:48 +0000

Thanks a lot, it works perfectly now

By: Paul OB

Paul OB — Thu, 30 Jul 2009 14:23:10 +0000

You can put anywhere you like as long as the ul that holds the stars is called .rating.

It will hide the green stars as soon as the stars are rolled over.

It won’t work in IE6 though.

By: Ted J.

Ted J. — Thu, 30 Jul 2009 13:49:04 +0000

Where would I put that in the CSS? Does it matter? I can’t seem to get it to work.

By: Paul OB

Paul OB — Thu, 30 Jul 2009 13:03:42 +0000

Hi Ted,

You could hide the initial stars for IE7 upwards by doing this:

ul.rating:hover{background:none!important}

It would need a change of design for ie6 though.

By: Ted J.

Ted J. — Thu, 30 Jul 2009 11:16:44 +0000

Thanks a lot for the help Paul

One last question, is there a way to hide the green stars when hovering, which makes the orange ones visible? The reason why is because I’d like to use a PNG image because they allow transparency/opacity,but I discovered that the orange stars are being loaded on top of the green ones, so when using a PNG image they’re still visible behind the orange ones, which looks bad.

By: Paul OB

Paul OB — Tue, 28 Jul 2009 16:35:17 +0000

Hi,

You could do something like this:

http://www.pmob.co.uk/temp/star-rating3.htm

By: Ted J.

Ted J. — Tue, 28 Jul 2009 08:51:07 +0000

Thanks a lot for the tutorial Paul.

I have a question though: how can I make the ratings appear inline, so that text can be on the same line as the star rating?

For example:

Rate this article: [star-matrix1.gif] (43 votes)

By: Paul OB

Paul OB — Wed, 15 Jul 2009 18:42:33 +0000

co.ador send me a link to the thread you have started and I’ll take a look.

By: co.ador

co.ador — Wed, 15 Jul 2009 01:46:22 +0000

Paul OB I have posted a post in sitepoint on how to build this rating system and I have invited all the guys to come and join it. I want to print five rows of stars one below the other. The way they are put in the browser by the file rating-example.php found on the zip of the server-side-coding part done by Cradio print each row distant from each other I want to get them closer together but I don’t know if to achieve that modifying the css file or by one of the file Cpradio has created in his server-side-coding part tutorial of this matrix css rating system tutorial.

Thank you.

By: Paul OB

Paul OB — Wed, 27 May 2009 14:55:49 +0000

@GPSDeals I should point out that i’m talking about code in my examples only and nothing to do with the rest of search-this.com which has nothing to do with me and you would need to contact the owner (Mark) about other articles etc.

By: Paul OB

Paul OB — Wed, 27 May 2009 14:53:22 +0000

All the code I provide in the examples is my own work and I do not copyright it so you are free to use as you wish and at your own risk.

After all it’s only CSS in a certain order

By: GPSDeals

GPSDeals — Wed, 27 May 2009 07:47:38 +0000

Really great work!
Could you clarify under which license are published all code snippets?