Announcement

Collapse
No announcement yet.

Change standard Soapbox ratings stars to font awesome icons

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
Working...
X