Help Wordpress

Blog about WordPress, plugins, themplates and more…
MENU
Home » Tutorials » Simple rating bar via stars

Simple rating bar via stars

simple-rating-bar-via-stars

I like simple solutions, because simple solution means reliability solution. For one of the projects I needed the rating bar consisting of stars.
Basic requirements – a minimum of code, HTML and CSS only. Without JavaScript, without additional font files, but with the percentage rating. Those, if you have all 5 stars, but the item rating, for example, 4.75, the bar must to display 4.75. Additional requirements – easy customization (eg color change) and the possibility of adding microformats – where the same without them…
I Googling first, but not found anything suitable for my requirements. All ready-made solutions are based on JavaScript, or not showing the percentage value, or did not have customization

Look at the picture to be clearer, what I mean:

simple rating bar, example

Simple rating bar, example

Was coined by own decision, consisting of just one line of html code. HTML code – 82 characters only, JavaScript or additional fonts like “font awesome” is missing.

<span class="stars-bar-rating"><i style="width:4.75%"></i><b></b></span>

And CSS:

.stars-bar-rating {
	display:block;
	width:114px;
	height:25px;
	background: #aaa;
	}
.stars-bar-rating i {
	display:block;
	height:25px;
	overflow:hidden;
	background: #fe9100;
	}
.stars-bar-rating b {
	display:block;
	margin-top:-25px;
	width:114px;
	height:25px;
	overflow:hidden;background:  url('img/stars-bar-bg.png') no-repeat;
	}

The principle is very simple – we have element “i”, it will a bar rating. The background color of this element will be color our stars, also you can use the gradient as needed. And on top of this element just added “b” element with background of transparent stars.

Transparent stars

Transparent stars

For use the schema.org microformat, just add a few elements with the parameters itemprop = “ratingValue” and itemprop = “reviewCount”:

<div class="stars-rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
	<span itemprop="ratingValue">4.75</span> stars, based on <span itemprop="reviewCount">4</span> reviews
</div>

Posted 1 year ago
Category: Tutorials
Tags: , ,

If the article proved helpful to you, please click on one of the buttons to share it with your friends. Thanks!

Related posts:

bg-head-640

WordPress PageSpeed optimization

Quite often turn to me with a request to “speed up site” – say, Google shows 50 out of 100, and because of this the site is lost [...]
puilo

Puilo (plugin for WordPress)

This plugin replaces the surname of Russian dictator Vladimir Putin in publications WordPress. In March 2014 this Ukrainian and Russian slogan was performed in its current form and [...]
wordpress-custom-logo

Custom logo for wordpress template

Many premium WordPress templates have settings page, which is a very handy tool for those who are not know languages markup or programming. As a rule, on settings [...]

No Comments

No comments yet.

RSS feed for comments on this post.

Leave a comment


Last Polls: