Rounded photos and names-as-links

Thanks, Tracy.

1. A little CSS:

.strong-view .testimonial-image img {
  border-radius: 50%;
}

2. Any custom field can be made into a link with another custom field that is a URL type. Here’s a screenshot of how to configure that in the view.
https://www.screencast.com/t/w8Bfdjgfly6

Chris

Thanks a million Chris! I’d found the .testimonial-image but hadn’t figured out .strong-view (and didn’t think to add ‘img’)… That works great, cheers.

If I could make 2 other tweaks it’d be perfect, if you don’t mind helping I’d like to:

1. Move the user data (name and role – am using ‘company name’ for role and it’s automatically linking to the url I put in the ‘company url’) to below the photo, and then

2. Move the ‘read more’ link to the bottom right where the user data was.

For this I tried:

.strong-view .readmore {
   align-content: right;
}

…but that’s not right!

I also wanted to ask about the font awesome thing – I read your note “Some reasons to disable this:
? Your theme or another plugin also loads Font Awesome and you want to make your site more efficient by only loading one copy. Try Better Font Awesome for more control.”

My theme has some font awesome fonts installed (I don’t have a plugin for it) – does that mean it isn’t ‘loading’ it, or that it is? If I should disable Font Awesome on your plugin, do you mean I should install Better Font Awesome and leave Font Awesome disabled on your plugin? Not clear on whether that means my site would then be loading a copy of BFA and of FA. Sorry for simplistic questions, and thanks for your time!

• This reply was modified 7 years, 7 months ago by Tracy.

(Not seeing my reply, re-submitting)

Thanks a million Chris! I’d found the .testimonial-image but hadn’t figured out .strong-view (and didn’t think to add ‘img’)… That works great, cheers.

If I could make 2 other tweaks it’d be perfect, if you don’t mind helping I’d like to:

1. Move the user data (name and role – am using ‘company name’ for role and it’s automatically linking to the url I put in the ‘company url’) to below the photo, and then

2. Move the ‘read more’ link to the bottom right where the user data was.

For this I tried:

.strong-view .readmore {
   align-content: right;
}

…but that’s not right!

I also wanted to ask about the font awesome thing – I read your note

Some reasons to disable this:
	?	Your theme or another plugin also loads Font Awesome and you want to make your site more efficient by only loading one copy. Try Better Font Awesome for more control.

My theme has some font awesome fonts installed (I don’t have a plugin for it) – does that mean it isn’t ‘loading’ it, or that it is? If I should disable Font Awesome on your plugin, do you mean I should install Better Font Awesome and leave Font Awesome disabled on your plugin? Not clear on whether that means my site would then be loading a copy of BFA and of FA (from the theme). Sorry for simplistic questions, and thanks for your time!

• This reply was modified 7 years, 7 months ago by Tracy.
• This reply was modified 7 years, 7 months ago by Tracy.

(Not seeing my reply after edit; re-submitting.)

Thanks a million Chris! I’d found the .testimonial-image but hadn’t figured out .strong-view (and didn’t think to add ‘img’)… That works great, cheers.

If I could make 2 other tweaks it’d be perfect, if you don’t mind helping I’d like to:

1. Move the user data (name and role – am using ‘company name’ for role and it’s automatically linking to the url I put in the ‘company url’) to below the photo, and then

2. Move the ‘read more’ link to the bottom right where the user data was.

For the second part I tried:

.strong-view .readmore {
   align-content: right;
}

…but that’s not right!

I also wanted to ask about the font awesome thing – I read your note

Some reasons to disable this:
	?	Your theme or another plugin also loads Font Awesome and you want to make your site more efficient by only loading one copy. Try Better Font Awesome for more control.

My theme has some font awesome fonts installed (I don’t have a plugin for it) – does that mean it isn’t ‘loading’ it, or that it is? If I should disable Font Awesome on your plugin, do you mean I should install Better Font Awesome and leave Font Awesome disabled on your plugin? Not clear on whether that means my site would then be loading a copy of BFA and of FA (from the theme). Sorry for simplistic questions, and thanks for your time!

Try this for the user name:

.strong-view.default .testimonial-client {
  clear: both;
  text-align: center;
  width: 150px;
}

Adjust the width if necessary to center the name.

The original templates were not built with deep customization in mind so CSS only gets us so far (at least until Strong 3.0). Some structural HTML changes require a custom template and maybe some filters. The read-more is appended to the automatic excerpt and then wrapped in <p> tags so we can’t move it in the default template.

Let me know if you want to try a custom template. Aside from making structural changes possible, it would keep all your testimonial CSS in one place.

If your theme loads Font Awesome, the plugin does not need to. I should probably rephrase that to say “Try Better Font Awesome for *even* more control.” In most cases, BFA will override themes and plugins, and only load one copy of the latest version.

You should always double-check by viewing the page source and looking for “font-awesome”. Simply viewing the page is not enough because FA may be in your browser cache.

Thanks so much! I might come back to you on the custom template but will crack on with the rest of my build for now. Yours is the best of the free ones I’ve tried, and I really appreciate your time – have a great evening!
Tracy

Thanks so much! That code moves the data to the bottom of the text, which is wrapped around/under the image. Will leave it as default for now – I might come back to you on the custom template but will crack on with the rest of my build here. Yours is the best of the free ones I’ve tried, and I really appreciate your time today – have a great evening!
Tracy

Hi again Chris,

I’ve noticed there’s a problem with the rounded image – it’s slightly flattened on the left-hand side. If you look at https://tracydempsey.co you’ll see it in the carousel (2 testimonials); I’ve also got a non-rotating testimonial display right below it (this site is ‘live’ dev but not shared anywhere except here). You can see the rounded image in yours has that flattening on the left, not visible in the SiteOrigins version below it.

Also, when I look at it on an old iPad, the circle and square don’t match up, so there’s white space showing within the circle. Is fine on my iPhone tho’. I’m not sure if that’s to do with the border the image gets in your plug-in?

Thanks!
Tracy

Hi Tracy,

Thanks for the link. I’m not seeing either case.
desktop https://www.screencast.com/t/IPtmjBYEdrn
iPad https://www.screencast.com/t/MuhIes1B6r

The image container is merely floated left against the block containing the prev/next arrows. I cannot conceive a CSS scenario that would flatten one side.

It sounds trite but try clearing your browser cache or using Chrome DevTools with the “Disable cache” option.

Hi Chris, sorry for the delayed response – am getting tangled up in code here! I don’t know what I did that caused that one-sided flattening, but somehow I undid it (maybe there was an accidental cache clear with something else I did in the main theme CSS). In any case I’m not seeing the flattening any more so will assume it was a bizarre glitch I caused temporarily! Thanks for checking it for me.

Can I, tho’, remove the padding from around the images? I can see a grey circular border/white padding around each, which I’d like to remove.

Thanks again!
Tracy

Welcome to my world ??

.strong-view.default .testimonial-image img {
  border: 0;
  padding: 0;
}

One more and I’m going to build you a custom template! ??

• This reply was modified 7 years, 6 months ago by Chris Dillon.

Ha! Thank-you… ?? So combining the two you gave me, my CSS for rounded images with no padding is:

.strong-view .testimonial-image img {
  border-radius: 80%;
  border: 0;
  padding: 0;
}

…unfortunately I can still see the padding/faint grey border, but I don’t want to take up more of your time on this, so will see if I can find something online. Cheers again for your help!

Try it with .default

.strong-view.default .testimonial-image img {
  border-radius: 80%;
  border: 0;
  padding: 0;
}

That worked perfectly, thank-you!

Hi, I’m trying to keep the testimonial images as rectangles (vs rounded) in the modern view. Can you help with the CSS for that? Thank you!