Star Rating – Where?

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;
}

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 { ... }

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;
}

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?

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;
}

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.

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;
}

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