Customize CSS: testimonials on Fortune theme
-
Dear all,
We would like to customize CSS of our testimonials we put in this page with shortcode (Fortune theme): http://ledergerber-partner.ch/kunden
How is the separate CSS code for each of the following 5 changes?
(So, just in case, that we would be able to skip any changes that wouldn’t look as good as we expected.)1. Change the testimonial text to not italic (normal format)
2. Change the testimonial title to not italic (normal format)
3. Make the testimonial title the same size like the regular page text
4. Change the testimonial title to bold
5. Reduce the space between testimonial text area and the border of the box by e.g. 50%Thanks in advance for the very appreciated help!
Best regards,
RaphaelThe blog I need help with is: (visible only to logged in users)
-
Hi Raphael,
Try these styles to see if they do what you want:
/* 1. Change the testimonial text to not italic (normal format) 5. Reduce the space between testimonial text area and the border of the box by e.g. 50% */ body:not(.search) #page .jetpack-testimonial.hentry .entry-content, .jetpack-testimonial-shortcode .testimonial-entry-content { font-style: normal; padding: 18px 35px 23px 85px; } /* 2. Change the testimonial title to not italic (normal format) 3. Make the testimonial title the same size like the regular page text 4. Change the testimonial title to bold */ body:not(.search) #page .jetpack-testimonial.hentry .entry-title, .jetpack-testimonial-shortcode .testimonial-entry-title { font-style: normal; font-size: 14px; font-weight: bold; } -
This document explains how to add Custom CSS styles:
https://en.support.wordpress.com/custom-design/editing-css/
Note: you must have either WordPress.com Premium or WordPress.com Business active on your site to be able to add custom CSS to your site
-
Hi Brian,
Thanks for that! It works perfectly!
Now the testimonial titles aren’t on the whole width of the box, have a line break before the end of the box:
http://ledergerber-partner.ch/kundenHow to display the testimonial titles on the whole width of the box?
Best regards,
Raphael -
PS: And how to disable/hide the link of the testimonial title (to be not able to click on the testimonial title)?
-
PS: Just see the issue, that if I see the testimonials on mobile phone, the testimonial boxes aren’t below the other anymore.
-
Hi Raphael,
Since I don’t have access to your theme, I’m not able to test this, but please give this a try:
/* Make the testimonial title the full width of the testimonial box */ body:not(.search) #page .jetpack-testimonial.hentry .entry-title, .jetpack-testimonial-shortcode .testimonial-entry-title { max-width: 100%; } /* Disable the link for the testimonial title. (This won't work on IE10 and below, so it's better to remove the link in the WP admin panel if possible.) */ .testimonial-entry-title a { pointer-events: none; cursor: default; } /* Stack testimonial boxes when displayed on smaller screens */ @media screen and (max-width: 768px) { .testimonial-entry-mobile-first-item-row, .testimonial-entry-mobile-last-item-row { width: 100%; } } -
Hi Brian,
/* Make the testimonial title the full width of the testimonial box */
It’s fixed, perfect!/* Disable the link for the testimonial title. */
It’s fixed, perfect!/* Stack testimonial boxes when displayed on smaller screens */
It does NOT work so far. Below you find the CSS code I set, including your inputs at the end of the list.How to fix this mobile issue?
Thanks,
Raphaelbody:not(.search) #page .jetpack-testimonial.hentry .entry-content, .jetpack-testimonial-shortcode .testimonial-entry-content { background: #89b3bb; } body:not(.search) #page .jetpack-testimonial.hentry .entry-content, .jetpack-testimonial-shortcode .testimonial-entry-content { color: #FFFFFF; } .testimonial-entry-column-2 .testimonial-entry-title { max-width: 100%; } .jetpack-testimonial-shortcode .testimonial-entry-title { margin-right: 0; } body:not(.search) #page .jetpack-testimonial.hentry .entry-content, .jetpack-testimonial-shortcode .testimonial-entry-content { font-style: normal; font-size: 15px; padding: 18px 25px 18px 65px; } body:not(.search) #page .jetpack-testimonial.hentry .entry-title, .jetpack-testimonial-shortcode .testimonial-entry-title { font-style: normal; font-size: 14px; font-weight: normal; } .entry-title, .jetpack-testimonial-shortcode .testimonial-entry-title { max-width: 100%; } .testimonial-entry-title a { pointer-events: none; cursor: default; } @media screen and (max-width: 768px) { .testimonial-entry-mobile-first-item-row, .testimonial-entry-mobile-last-item-row { width: 100%; } } -
Hi Raphael,
Something must be overriding our new rule so we can give it precedence by adding !important. (It’s considered a best practice to avoid !important but we can make an exception for this case.)
I’ve also made the boxes stack at a width of 600px rather than 768px – I think that’s a little nicer:
/* Stack testimonial boxes when displayed on smaller screens */ @media screen and (max-width: 600px) { .testimonial-entry-mobile-first-item-row, .testimonial-entry-mobile-last-item-row { width: 100% !important; } } -
-
-
Raphael, your site looks gorgeous! Is it Fortune theme? I’m using that for my site and I was wondering if your header text is actually a logo file?
Thank you!
-
- The topic ‘Customize CSS: testimonials on Fortune theme’ is closed to new replies.
WordPress.com Forums 