July 24 2009
Easy CSS Star Rating Layout
Today I bring you an easy and quick CSS tip for making Star Rating layouts, only with the use of CSS. The great thing about this one that I’m about to show you, is the fact that it’s continuous, meaning, it will work with percentage.
Confused?
- Let me show you an example!
As you can see they’re not just full or not full, they’re half full, 1/4 full, etc…
To achieve this you only need to have 2 images, them being:
From now on it’s only CSS and a really simple HTML to call the code and inform the % that you would like to use.
.classification { position: relative; width: 91px; height: 17px; } .classification .cover { position: absolute; background: transparent url(img/stars.png) top left no-repeat; top: 0px; left: 0px; width: 91px; height: 17px; z-index: 101; } .classification .progress { position: absolute; background: transparent url(img/stars_full.png) top left no-repeat; top: 0px; left: 0px; height: 17px; z-index: 102; } |
Basically we overlap one image on top of the other and we control the amount of Star we want to show with a given width in percentage.
<div class="classification"><div class="cover"></div><div class="progress" style="width: 27%;"></div></div> |
Where you see style=”width: 27%;” just change to what ever % you would like to fill.
We’re done! Easy? No? Yes? Rocket Science Hard? Let me know what you think.
Best regards!
Fantastic !!!
This is what I was looking for. And it is so easy.
Thanks a lot.
Glad you liked it and it was helpful Aayushi.
Hi Jose, so this is exactly what I am looking for for my wine blog as I use a 5 star rating system. Can use this in blogger? If so, how?
Hello Justin.
This is purely HTML/CSS based coding. I’m not 100% familiar with how blogger works but if you’re able to edit your HTML code you should be able to add this.
First thing you need to do is to upload the images to some place on your server, for this you can use the regular image upload when editing/adding a post.
After getting the image link add the CSS coding to you template header (it should be next to the tags).
Finally just add the HTML part to where ever you want in your post.
Let me know if you need anything else.
I am working on a new website using a Microsoft Expression Web 2 template. I am not an HTML coder and don’t really understand CSS, but can create okay in these templates. I would like to add the star rating system you have above to some of my pages, but not sure how. I can easily add the HTML coding to the page, not sure how to create the CSS or where to find the images to upload? Any help you have would be greatly appreciated. If not, I understand.
Hello Katrina,
You should send the images to your FTP or any image hosting service out there.
To add the CSS you need to create a new file (called rating.css for example) and add the code I provide on the post.
After that you need to go to your HTML code and before the tag add the following:
<link rel="stylesheet" href="http://www.example.com/rating.css" type="text/css" media="screen" />This is an example. Remember to change http://www.example.com with your own domain.
You should also edit the CSS code i provided. Where you see
background: transparent url(img/stars.png) top left no-repeat;and
background: transparent url(img/stars_full.png) top left no-repeat;you should change img/stars.png and img/stars_full.png with the full code, for example, http://www.example.com/stars.png and http://www.example.com/stars_full.png
Please let me know if you require any further assistance.
Never mind… I figured it out. Thanks anyway for the great tip!
i like the way u move. thanx
[...] the net, using them to create an inline-safe one.At first, I tried to go with José Airosa’s Easy CSS Star Rating Layout (1) and Markus Weichselbaum’s How to use CSS to display rating stars [...]
[...] потока на реда. Първо опитах с решенията на José Airosa “Easy CSS Star Rating Layout” (1) и на Markus Weichselbaum “How to use CSS to display rating stars” [...]
where do you get the images from? am a newbie to this, I am trying to add rating stars
You get the images from the post itself (save image as… while right clicking the image) or you can use your own.
I am pretty new to HTML. So I just copied the contents of both the CSS and HTML into a single file, even downloaded the empty stars and the full stars,
when I changed the % value from 27% to 50% i just see
empty stars all the time, no matter to what % I change it to. is there something else that I shld to.
[...] Easy CSS Star Rating Layout | PHP, CSS, HTML, Web & beyond Jul 24, 2009. Hi Jose, so this is exactly what I am looking for for my wine blog as I use a 5 star rating system. Can use this in blogger? If so, how? Easy CSS Star Rating Layout | PHP, CSS, HTML, Web & beyond [...]
I just tried this, and with Firefox it works like a charm.
However, with IE and Chrome, I get 0% (all empty) no matter what I
do. Is it browser problem, or can I fix it in HTML?
I will take a look and let you know my findings.
Thank you for reporting this.
I copied the css part 1:1 to my main css file, also the html was 1:1 copy, and it does work on FF. Can’t figure out why not IE/Chrome.
Your email (below) didn’t seem to work. Could you pm me on my email, so I can provide you more details?
[...] Easy CSS Star Rating Layout | PHP, CSS, HTML, Web & beyond Jul 24, 2009. Hi Jose, so this is exactly what I am looking for for my wine blog as I use a 5 star rating system. Can use this in blogger? If so, how? Easy CSS Star Rating Layout | PHP, CSS, HTML, Web & beyond [...]
I copied the css part 1:1 to my main css file, also the html was 1:1 copy, and it does work on FF. Can’t figure out why not IE/Chrome. Your email (below) didn’t seem to work. Could you pm me on my email, so I can provide you more details?
Hello Melanie,
You can email me to me@joseairosa.com.
Hello Melanie, You can email me to me@joseairosa.com.
It’s so simple . He hasn’t closed tag div
From :
duythanh28@gmail.com
Jose,
Do you think this code may be used to help with a site that has numerous reviews? Allow me to explain, I am trying to develop some code that will take a 5 point rating system, develop a star code and create a star rating based on a the 5 point rating. For example, a 3.72 out 5 rating would create a 5-star rating that has 3.72 of the stars shaded. Do you think this would accomplish the task?
Yes, perfectly. You just need to a apply a simple math to the % calculation.
Lets say you want 3.72 out of 5. You would do a (3.72/5)*100 =~74%
Let me know if you need anything else.
how would i add this into a template folder that could populate the information?
Hi Jose, Great tips!!! However, I tried to apply everything you said to my website (guest book) but it’s not working
Could you please help me get this done? Thanks so much!!!
Hello Jesse,
Can you give me some more information on the problem? Are the images no showing? Can you provide me with a link to your website so that I can check code-wise?
Thank you.
Great technique!
say I use this to rate a blog post..
25 people give 3 stars and 75 people give 5 stars.. will it automatically reflect that and show a rating of 4.5 stars?
or do I need to do some scripting for that to happen?
Thanks!
Work on blogspot?
How can i add on blogspot? i try to add css and html code but don t work:(
Hello Erik,
The only coding you need to add is the percentage in width for the stars filling. In that case, with really quick math:
((((25*3)+(75*5))/100)/5)*100 = 90
That’s what your script should put on width.
It should work on blogspot because this is pure HTML.
You need to have some script coding to actually get the rating to fill in the width.
This is the ditty
Hi,
Works and looks great. I want something that they click on and it totals it up automatic and changes per opinion. I dont have a section on my site for comments but I want the site to reflect in the star rating an instant amount by them clicking on it and based on who rates what it will go up or down. Does that make sense? check my link to one of my pages with it:
http://www.companiesyoucantrust.com/roscomputers.html
Thank you so much!
Hello Anthony.
For that you must use Javascript and AJAX in order to:
1- Know when someone clicks on the stars
2- Call some php script (or other) and store that person vote
This CSS star rating will need some adaptations in order to recognize each star individually.
Let me know if you have any doubts.
I was searching for this long time, Hope this will help us to study our visitors reaction on our page.Thanks for sharing.
Nice code…. I need to use star rating in one of my company’s site…. while browsing I got it… looking so easy… but even after reading all the comments too… I could not understand that It is a static star rating OR dynamic one…. I mean to say… that how users will click on stars if and if someone will click on it… and then how we will know the users likes… and do we have to change the % value manually every time for every post???
Please reply…
thanks in advance
Saqib
I am in the process of building a website that will require multiple images (each with their own rating). I use Dreamweaver to build the sites and am looking for a star rating system. I see the code and the stars and can copy them into my site but how do you make it work? I want viewers to be able to rate and comment on each item as they wish. Maybe it is very simple but I am lost.
Thanks for any help.
Ok, how do you put this on a wordpress site? if on editor where? Dating Sites Info It worked perfect on dreamweaver, i just need to know where do i paste the code on the editor. Thanks.
I did it on a wordpress theme but its showing only empty stars, i don’t know maybe is the theme.
Dating Sites Info Any help would be appreciated. Thanks.
Hello Loriel,
This star rating system is only CSS and HTML based, which means that it’s static. You need to use some dynamic language coding (like PHP) in order to implement an interactive rating system.
Hello Emily,
Like I said on previous comment, this is only a static method that you can apply to any web language. In your case, since you’re using WordPress, you must complement it with a PHP plugin that will take the vote of a given user and then calculate the appropriate rating.
Very very useful. Thanks you : )
Great tutorial,
thank you so much!
Regards Cassandra
Many thanks, your code worked perfect !!! excellent job
Works a charm, thanks for sharing my friend
Excellent, just what I needed!