As previously announced via banners and our newsletters, support is no longer available through this platform.

For easier navigation, you can still click on "Submit a Ticket" here, choose the appropriate category, and you'll be redirected to the correct support channel for your plugin.

You can still access your previous tickets and browse public tickets, but please note that responding to tickets is no longer possible.

Paid customers: Please log in to your store account for support.

Pre-purchase questions: Use the support widget in the bottom-right corner of our websites:
https://wpamelia.com
https://wpdatatables.com
https://wpreportbuilder.com

Okay
  Public Ticket #3741501
Ratings
Closed

Comments

  • Wendy started the conversation

    In your example table of the catalog of books you have a rating column that displays stars. How did you do this? I do not see this anywhere in the documentation nor is it in the support section. Thank you for responding.

  •  1,896
    Miloš replied

    Hello,
    With some custom CSS, you could achieve that, just like in our catalog of books example table.

    You would need to add some conditional formatting to the "stars" column:

    4203503314.png

    Each content (<span class) has these in order:

    <span class="stars-container stars-96">★★★★★</span>
    <span class="stars-container stars-90">★★★★★</span>
    <span class="stars-container stars-85">★★★★★</span>
    <span class="stars-container stars-80">★★★★★</span>
    <span class="stars-container stars-70">★★★★★</span>
    <span class="stars-container stars-60">★★★★★</span
    

    Of course, you will set those conditions in Conditional formatting for your needs.

    And the classes are defined in wpDataTables settings/Custom JS and CSS/Custom CSS field, like:

    .stars-container{
    font-size:20px !important;
    }
    .stars-container { position: relative; display: inline-block; color: transparent; font-size: 50px;
    line-height:normal;
    }
    .stars-container::before{ position: absolute; top: 0; left: 0; content: '★★★★★'; color:lightgray;
    }
    .stars-container::after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden;
    }
    .stars-0::after { width: 0%; }
    .stars-10::after { width: 10%; }
    .stars-20::after { width: 20%; }
    .stars-30::after { width: 30%; }
    .stars-40::after { width: 40%; }
    .stars-50::after { width: 50%; }
    .stars-60::after { width: 60%; }
    .stars-70::after { width: 70%; }
    .stars-80::after { width: 80%; }
    .stars-85::after { width: 85%; }
    .stars-90::after { width: 90%; }
    .stars-96::after { width: 96%; }
    .stars-100::after { width: 100%; }


    I hope that helps.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Wendy replied

    I tried entering that in several different ways and it just doesn't work for me. Also, that cell value is not a value that is available from the drop down menu. Sorry.