Support » Theme: Spacious » Styling for TG: Testimonial widget

  • Resolved jlevant

    (@jlevant)


    I would like to have a background rounded-corner solid color(#ffb700) box behind the widget; I would like to limit it to 25% width of the page, right-aligned (which it is) and be able to style the different sections of the testimonials Title, post, author, as well as use the a much smaller quote sign. Can you provide some css for this? I’ve managed some of it but cannot go further.

    Thank you!

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hi,

    For customizing the testimonial widget, can you go to the Additional CSS box and insert the code mentioned below:

    .spacious_testimonial_widget-3{
    	background: #ffb700;
    	border-radius: 10px;
    }

    For customization of the title and content of the testimonial widget, you can use the selectors as shown here .spacious_testimonial_widget-3, .widget-title.

    Thanks.

    Thank you, Rajesh
    Now, is it possible to add a graphic (large double quotation marks) to the left of the title? I tried to add it via but the widget wouldn’t save. Can I add that via css with the image link?

    And a second follow-up request. When I added a second testimonial (presumably .spacious_testimonial_widget-2) it landed outside of the background. How can I show 2 or 3 testimonials vertically and have them all within the background?

    @jlevant

    If you want to display the fontawesome icon before the title then, can you once try the below CSS code in the Additional CSS box provided via the Customizer Options and check once:-

    .spacious_testimonial_widget-3 .widget-title::before, .spacious_testimonial_widget-2 .widget-title::before, .spacious_testimonial_widget-1 .widget-title::before {
       content: '\f10e';
       font-family: fontawesome;
       margin-right: 5px;
    }

    However, if you want to utilize background image for it then, you can try the below CSS code instead:

    .spacious_testimonial_widget-3 .widget-title, .spacious_testimonial_widget-2 .widget-title, .spacious_testimonial_widget-1 .widget-title {
       background: url(image_url);
    }

    Remember to change the values as needed for your site.

    And for the last issue, it might not be possible since each of the testimonial widget will act individually. Hope you have got it.

    Thanks.

    Thank you Nitu. The fontawesome icon worked perfectly. However, for the background for more than one testimonial, it’s not a background image just a background color with rounded corners per a few responses ago. Is there no way for it to extend to more than one testimonial?

    Hi,

    For the background of more than one testimonials, you need to insert the class of that testimonial by inspecting it. It will be similar to the code provided at the beginning. It might have another number at the end like .spacious_testimonial_widget-4.
    The code will look like this:

    .spacious_testimonial_widget-3,
    .spacious_testimonial_widget-4{
    	background: #ffb700;
    	border-radius: 10px;
    }

    If you are stuck during the process, you can publish another testimonial and we will provide the Additional CSS needed for it.

    Thanks.

    Thank you, Rajesh. I will do that and get back to you (although I think I had tried it before and it didn’t work).

    In between when I wrote and now, I purchased the Spacious pro theme and because I use Child themes, I wrote asking for advice. In any case, after several hours with no response, I finally activated it because I had to get on with working. At this point I have it pretty much the way it was before style-wise, with the following problems:

    Suddenly my links and several other features are GREEN. I had text in #565559 and links in #B3B2B3 – for body as well as the primary nav menu.

    My footer column headers were gently underlined in #B3B2B3
    and now they too are green! I do not want these green things!

    I’m afraid there are other elements that I haven’t found that will pop up in green as well.

    I spent so much time styling the free version, I just don’t want to start over figuring out how to redo all I had done.

    The ONLY reasons I needed the pro version were to have more than 5 homepage sliders and to change the copyright information.

    I do hope you can send along some css to de-green my site.

    Meanwhile, I will try the TG:testimonial code you sent.

    Thank you — In case you want it handy, the site is at new.tdgoldengate.org.

    Also, on my phone the nav menu active link has a solid green background. This looks horrible!

    There are also horizontal lines now between elements in my footer content. I made a space because I wanted a space, not a line. I can’t find the code to remove it. It was not there in the free version.

    I did check and I already had exactly the css you offered for the testimonial. Per your suggestion, I have now added a second comment & author but no title. It jumps away completely from the background. The testimonial is only on the homepage – lower right.

    Here’s all my css for the testimonial:

    .spacious_testimonial_widget-3 {
    content: ‘\f10e’;
    font-family: fontawesome;
    margin-right: 5px;
    }

    .spacious_testimonial_widget-3 ,.
    .spacious_testimonial_widget-2,.
    .spacious_testimonial_widget-1
    {float:right; max-width:25%;}

    .spacious_testimonial_widget-3,
    .spacious_testimonial_widget-2,
    .spacious_testimonial_widget-1,
    .widget-title {
    font-style:italic; font-weight:bold; font-size:95%;text-align:right;padding:3px;
    }

    .testimonial-post p {
    text-align:right;
    font-size:80%;
    font-style:italic;
    line-height:1.3;
    padding:5px 5px 0 5px;}

    .testimonial-author {
    font-size:70%;
    color:#ED9E4F;
    text-align:right;
    line-height:.1;
    padding:0 10px 10px 0;}

    .spacious_testimonial_widget-3,
    .spacious_testimonial_widget-2,
    .spacious_testimonial_widget-1 {
    background: #fbd471;
    border-radius: 20px;
    }

    I got rid of the lines in the footer widget contents, but all the active links there are green too. They should just go from #b3b2b3 to white.

    I seem to have gotten rid of the green. Only took me about 4 hours.

    So, the main issue now is the testimonials not lining up one on top of the other. The second one I added looks like a little bubble…

    I want them flush right and only 25% of the page width.

    I’ve reduced my related css to:

    .spacious_testimonial_widget-4 ,
    .spacious_testimonial_widget-3,
    .spacious_testimonial_widget-2
    .spacious_testimonial_widget-1 {
    float:right; max-width:25%;}

    .spacious_testimonial_widget-4 ,
    .spacious_testimonial_widget-3,
    .spacious_testimonial_widget-2,
    .spacious_testimonial_widget-1,
    .widget-title {
    font-style:italic; font-weight:bold;
    font-size:95%;text-align:right;padding:3px;
    }

    .testimonial-post p {
    text-align:right; font-size:80%;
    font-style:italic;line-height:1.3;
    padding:5px 5px 0 5px;}

    .testimonial-author {
    font-size:70%;
    color:#ED9E4F;
    text-align:right;
    line-height:.1;
    padding:0 10px 10px 0;}

    .spacious_testimonial_widget-4, .spacious_testimonial_widget-3,.spacious_testimonial_widget-2 {
    background: #fbd471;
    border-radius: 20px;

    I am going to sleep now.

    • This reply was modified 4 months, 3 weeks ago by jlevant.

    I have solved the problem.

    .spacious_testimonial_widget-3,.spacious_testimonial_widget-2 {
    background: #fbd471;
    border-radius: 15px 15px 0 0;
    }

    .spacious_testimonial_widget-4 { background: #fbd471;
    border-radius: 0 0 15px 15px;}

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