My SellerDeck Account | Newsletter | Free Trial

Community and Knowledge Base

Go Back   Sellerdeck Community > Setting Up SellerDeck > Layout Adjustments & Changes

Search powered by Google
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Search this Thread Useful Thread? Display Modes
  #1  
Old 13-Aug-2017, 03:10 PM
MDN's Avatar
MDN MDN is offline
Registered User
Join Date: Jun 2010
Full Name: Lee Phillips
Posts: 115
Thanks: 26
Thanked 20 Times in 14 Posts
Change standard Soapbox ratings stars to font awesome icons

With mobiles and tablets having such resolution I wanted to have clearer star rating icons, so I did the following:

First add the below to your stylesheet, the first sets the images to not show, the second block colours the icons and with a half star rating I have used background colours clipped to test, this half greys the star icon, the last is to move the soapbox links table so it remains positioned at the end of the star icons, you may need to alter the margins to line it up with your design:
Code:
.sboxstyle img {display:none!important;}
Code:
.soapboxStars {display:inline;color: #75BD45;font-size:20px;cursor:default;}
.soapboxStars .Notrated {color: #ccc;}
.soapboxStars .fa {margin-right:5px;}
.soapboxStars .half {background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, #75BD45), color-stop(0.5, #ccc));background-image: gradient(linear, left top, right top, color-stop(0.5, #75BD45), color-stop(0.5, #ccc));color: #75BD45;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
Code:
.soapboxlinks table, .soapboxlinks td { color: #000000; margin: -27px 0px 0px 110px;}
Then go to your Soapboxlayout in design tab or via library and at the top above all add:

Code:
<div class="soapboxStars">
<actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%3d%3d%20%2710%27" >	<i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%279%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o half" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%278%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%277%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o half" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%276%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%275%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o half" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%274%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%273%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-half-o half" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%272%27" ><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%271%27" ><i class="fa fa-star-half-o half" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i><i class="fa fa-star-o Notrated" aria-hidden="true"></i></actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22SoapboxRating%22%20%2f%3e%20%20%3d%3d%20%270%27" ><span class="Notrated"><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></i><i class="fa fa-star-o" aria-hidden="true"></i></span></actinic:block>
Then at the end after everything close the div:

Code:
</div>
You will need to add the font awesome code for this, however by using this you can alter the size, spacing and colours whilst keeping them crisp, you can see the result on the following page, also shows how the half star rating looks:

https://www.hookandloopfasteners.co....ite-60350.html
__________________
Many Thanks
Lee
www.mdnsupplies.co.uk
www.hookandloopfasteners.co.uk
Reply With Quote
The Following User Says Thank You to MDN For This Useful Post:
Andy@codepath (15-Aug-2017)
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off



All times are GMT. The time now is 03:28 AM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.