Support » Plugin: Strong Testimonials » Star Rating – Where?

  • Resolved hebhansen

    (@hebhansen)


    Hey Chris and more

    I have installed plugin. Wonderful addition. Thx.

    I have added fields but I do not have a rating field. I have a name field that I have set to rating. That means star ratings display on testimonial page, but that the stars have no fill. All 5 are empty.

    In my testimonials under client meta I have no rating setting setting or edit button. Below Company URL its empty.

    Everything seems to work, just not the rating field and the ability to ad a rating.

    CSS style stars
    Btw, does anyone have css code that will change the star color? I’m not lazy, I am just not able to code…

    CSS style txt
    How can I make font smaller? Both Heading and txt
    How can I make it use more width in it’s own bok?

    CSS style quote symbol
    How can I make it smaller?
    Haw can I change color
    How can I make txt wrap around it / flush right or left

    Thx

    • This topic was modified 4 months, 2 weeks ago by  hebhansen.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Contributor Chris Dillon

    (@cdillon27)

    Here are the general steps to use star ratings:
    https://strongplugins.com/document/strong-testimonials/star-ratings/

    Individual testimonials use your theme’s single post template. The plugin can append your custom fields like rating, etc. with a view in Single Template mode.

    Does that solve the problem with stars?

    Yes that’s right. I missed the first step to activate the star rating field in fields. Rating now works. Thx

    I am playing with CSS and I can get to text, heading and more. However I can’t seem to style link and hover for “Read More” and company if linked. So in general your classes work fine, but this code does nothing:

    /* custom fields link color */
    .strong-view.default .testimonial-client a {
        color: red;
    }
    
    /* custom fields link hover color */
    .strong-view.default .testimonial-client a:hover {
        color: blue;
    }
    
    /* read-more link color */
    .strong-view.default a.readmore {
        color: red;
    }
    
    /* read-more link hover color */
    .strong-view.default a.readmore:hover {
        color: blue;
    }

    Also I am desperate to style:

    – The quote symbols (size and maybe txt wrap/float)
    – The stars/rating (yellow is just not good and stars are black in my shop, so …)

    I have defined a class for the stars. I can create a border around them but I can’t style them?

    Can you give me a hint. It will be cool.

    For now this code works for me:

    /* ----- Testimonial Styling ----- */
    
    /* ---- Full area ---- */
    .strong-content {
      border: 0px solid #ff7b29;
    }
    /* -- Individual Testimonial -- */
    .testimonial-inner {
      border: 0px solid #ff7b29;
    }
    /* --- Testimonial Heading --- */
    .testimonial-heading {
      border: 0px solid #ff7b29;
    	font-size: 18px;
    	line-height: 1.2;
    }
    
    /*  --Testimonial Content -- */
    .testimonial-content {
      border: 0px solid #ff7b29;
    	font-size: 10px;
    	line-height: 1.0;
    }
    
    /* --- Read More Section --- */
    .readmore {
      border: 0px solid #ff7b29;
    	line-height: 1.2;
    }
    /* read-more link color */
    .strong-view.default a.readmore {
        color: red;
    }
    
    /* read-more link hover color */
    .strong-view.default a.readmore:hover {
        color: blue;
    }
    
    /* Client image, data and rating */
    .testimonial-client {
      border: 0px solid #ff7b29;
    }
    /* custom fields link hover color */
    .strong-view.default .testimonial-client a:hover {
        color: blue;
    }
    
    /* Testimonial Person Name */
    .testimonial-name {
      border: 0px solid #ff7b29;
    	font-size: 12px;
    	line-height: 1.2;
    }
    
    /* Testimonial Name of Company */
    .testimonial-company {
      border: 0px solid #ff7b29;
    	font-size: 8px;
    	line-height: 1.0;
    }
    /* custom fields link color */
    .strong-view.default .testimonial-company a {
        color: red;
    }
    
    /* Testimonial Star Rating */
    .star-rating {
      border: 0px solid #ff7b29;
    }
    Plugin Contributor Chris Dillon

    (@cdillon27)

    You’re using the Modern template on your feedback page so replace “default” with “modern” in your custom CSS:

    /* custom fields link color */
    .strong-view.modern .testimonial-client a {
        color: red;
    }
    
    /* custom fields link hover color */
    .strong-view.modern .testimonial-client a:hover {
        color: blue;
    }
    
    /* read-more link color */
    .strong-view.modern a.readmore {
        color: red;
    }
    
    /* read-more link hover color */
    .strong-view.modern a.readmore:hover {
        color: blue;
    }

    It may help to make it all more specific by adding the view ID too:

    .strong-view.strong-view-id-1.modern .testimonial-client a { ... }

    Plugin Contributor Chris Dillon

    (@cdillon27)

    The stars use the “before” pseudo element:

    /* display */
    .strong-rating span.current:before {
        color: black;
    }
    .strong-rating span.star:before {
        color: black;
    }
    
    /* form */
    .strong-rating label:before {
        color: black;
    }
    Plugin Contributor Chris Dillon

    (@cdillon27)

    The quote symbols are “before” and “after” so the text cannot wrap around. That may be possible using CSS Flexbox but you would need a complete custom template for that. If that’s a must-have feature for you then consider hiring a developer for a couple hours.

    Thx Chris

    Read More – I want it to stand out from other txt but I can’t get to the link state, only the hover. I added :link to your CSS above, but no avail:

    /* read-more link color */
    .strong-view.modern a.readmore:link {
        color: red;
    }
    
    /* read-more link hover color */
    .strong-view.modern a.readmore:hover {
        color: blue;
    }
    

    Ooops – This one did it for Read More:

    .strong-view.strong-view-id-1.modern

    Star rating – I added your code above. It does not work as is… I added a class in my view or field where I call it “star-rating”. Should I change this in anyway. Adding star-rating instead of strong-rating in your code, does not work either?!

    The quote sign. Can I resize it? what is the class for it?

    Plugin Contributor Chris Dillon

    (@cdillon27)

    The sequence is important when overriding CSS. I don’t see your code for star rating. Where are you adding it? The theme, the Customizer, a custom CSS plugin?

    Quote symbol:

    .strong-view.modern .testimonial-content:before, 
    .strong-view.modern .testimonial-content:after {
        color: #CDCDCD;
        font-size: 36px;
        font-style: normal;
        line-height: 36px;
        width: 36px;
    }
    .strong-view.modern .testimonial-content:before {
        left: -56px; /* = 36px + 20px */
    }
    .strong-view.modern .testimonial-content:after {
        right: -56px;
    }
    /* to adjust the content width accordingly */
    .strong-view.modern .testimonial-content {
        margin: 0 56px;
    }
    Plugin Contributor Chris Dillon

    (@cdillon27)

    I see it now. This code is wrong:

    /* display */
    .star-rating.modern span.current:before {
        color: black;
    }
    .star-rating.modern span.star:before {
        color: black;
    }

    Try this:

    /* display */
    .strong-view .strong-rating span.current:before {
        color: black;
    }
    .strong-view .strong-rating span.star:before {
        color: black;
    }
    
    /* form */
    .strong-view .strong-rating label:before {
        color: black;
    }

    Alright …

    Stars – Styling works and I can now change colors. Thx so much! Truly awesome support!

    Quotes – I don’t see any effect when changing color size margin, so I don’t think it’s linked.

    I add CSS to additional css. Not sure if this is on all WordPress or it’s in my theme. Do you know if this is lost when upgrading theme? I’m thinking to create a child theme one of these days.

    Plugin Contributor Chris Dillon

    (@cdillon27)

    The black stars do look good in that theme!

    I see the quotes style. Try adding !important to each line.

    .strong-view.modern .testimonial-content:before, 
    .strong-view.modern .testimonial-content:after {
        color: #CDCDCD !important;
        font-size: 36px !important;
        font-style: normal !important;
        line-height: 36px !important;
        width: 36px !important;
    }
    .strong-view.modern .testimonial-content:before {
        left: -56px !important;
    }
    .strong-view.modern .testimonial-content:after {
        right: -56px !important;
    }
    /* to adjust the content width accordingly */
    .strong-view.modern .testimonial-content {
        margin: 0 56px !important;
    }

    And decrease the 36px and 56px values as you want.

    The CSS appears to be printed by the theme. It is probably not lost during an update but ask your theme support to be certain. A child theme is the smart way to go, especially for the amount of custom CSS you have.

    Perfect Chris…! Everything now works. I activated heading link. Hover state will not do anything?

    /* Heading link hover color */
    .strong-view.modern a.testimonial-heading:hover {
        color: #5a5a5a !important;
    }

    Here is the complete CSS if you need bits or someone else does. I have a pile of borders set to 0PX. A simple handle to visually see if I have contact. These lines can be removed ofcourse.

    /* ----- Testimonial Styling ----- */
    
    /* ---- Full area ---- */
    .strong-content {
      border: 0px solid #ff7b29;
    }
    /* -- Individual Testimonial -- */
    .testimonial-inner {
      border: 0px solid #ff7b29;
    	margin: 0px 0px 0px 0px;
    }
    /* --- Testimonial Heading --- */
    .testimonial-heading {
      border: 0px solid #ff7b29;
    	font-size: 18px;
    	line-height: 1.2;
    }
    /* Heading link hover color */
    .strong-view.modern a.testimonial-heading:hover {
        color: #5a5a5a !important;
    }
    
    /*  --Testimonial Content -- */
    .testimonial-content {
      border: 0px solid #ff7b29;
    	font-size: 10px;
    	line-height: 1.0;
    }
    
    /* --- Read More Section --- */
    .readmore {
      border: 0px solid #ff7b29;
    	line-height: 1.2;
    }
    
    /* read-more link color */
    .strong-view.strong-view-id-1.modern a.readmore {
        color: #00222B;
    }
    
    /* read-more link hover color */
    .strong-view.modern a.readmore:hover {
        color: #5a5a5a;
    }
    
    /* Client image, data and rating */
    .testimonial-client {
      border: 0px solid #ff7b29;
    }
    
    /* custom fields link hover color */
    .strong-view.modern .testimonial-client a:hover {
        color: #5a5a5a;
    }
    
    /* Testimonial Person Name */
    .testimonial-name {
      border: 0px solid #ff7b29;
    	font-size: 12px;
    	line-height: 1.2;
    }
    
    /* Testimonial Name of Company */
    .testimonial-company {
      border: 0px solid #ff7b29;
    	font-size: 8px;
    	line-height: 1.0;
    }
    
    /* custom fields link color */
    .strong-view.modern .testimonial-company a {
        color: #00222B;
    }
    
    /* display */
    .strong-view .strong-rating span.current:before {
        color: #5a5a5a;
    }
    .strong-view .strong-rating span.star:before {
        color: #5a5a5a;
    }
    
    /* form */
    .strong-view .strong-rating label:before {
        color: #5a5a5a;
    }
    
    /* quote symbol */
    .strong-view.modern .testimonial-content:before, 
    .strong-view.modern .testimonial-content:after {
        color: #ececec !important;
        font-size: 26px !important;
        font-style: normal !important;
        line-height: 26px !important;
        width: 26px !important;
    }
    .strong-view.modern .testimonial-content:before {
        left: -32px !important;
    }
    .strong-view.modern .testimonial-content:after {
        right: -32px !important;
    }
    /* to adjust the content width accordingly */
    .strong-view.modern .testimonial-content {
        margin: 0 16px !important;
    }
    Plugin Contributor Chris Dillon

    (@cdillon27)

    Try this instead:

    /* Heading link hover color */
    .strong-view.modern .testimonial-heading a:hover {
        color: #5a5a5a !important;
    }

    Responsive – please note:

    Masonry displays 3 columns on tablet. Both horizontal and vertical. This squeeze txt outside the actual Testimonial in modern view with your css.

    Columns switch beautifully to 2 and 1 column on tablet, even when set to 3 columns. So for now I switched to column layout.

    Prefect Chris

    It’s all sorted. I will mark this topic as such and write you a review for the plugin.

    Thx so much

Viewing 15 replies - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.