Argent Theme Testimonials

nicolahasted · Member · Jul 21, 2018 at 11:45 pm
Copy link

Add topic to favorites
I have just switched my sight to the Argent theme – looks great!
Except for the Testimonials – they look awful! Aligned Left, barely covering half the screen and a pointless page title floating somewhere left of centre plus they are now called “Archive: Testimonials”. Any ideas how I can amend this? I cannot find any options under the customise menu.

The blog I need help with is: (visible only to logged in users)
staff-zara · Staff · Jul 22, 2018 at 2:52 am
Copy link
Hello there, you could use CSS customization to change the layout of the page.

https://en.support.wordpress.com/custom-css/

I have created and tested some CSS codes with the Argent theme to remove the page title “Archive: Testimonials” and to re-align the text so they do not appear at the far left of the screen.
```
.archive .page-title {
	display: none;
}

article{
	margin-left : 100px;
}
```
You could play around with the number (100px) to adjust the text according to your own preference.

Please let me know if this works.
staff-zara · Staff · Jul 22, 2018 at 4:26 am
Copy link
Sorry, I just found out that the second part of my code will affect other pages as well. If you wish to adjust only the text alignment on the Archive page, the below CSS code should be used.
```
.archive article{
	margin-left : 15%;
}
```
Note that I replaced 100px with 15% which both can be used. Let me know if you have more questions, I’ll be glad to help.
wpx2 · Member · Jul 22, 2018 at 5:26 pm
Copy link
Hi @thedancerinmind

In addition to what staff-zara has suggested. The following CSS code will center the Testimonials texts and keep equal margins on both sides for design responsiveness matters.
```
.jetpack-testimonial {
   display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
```
You can increase or decrease the width size by changing the number 70%.

To align the text”Customer Testimonials” to the center, use the CSS code below.
```
.post-type-archive-jetpack-testimonial .taxonomy-description {
    text-align: center;
}
```
Regarding “Archive: Testimonials” , I am also suggesting to hide it and apply its CSS style to the textCustomer Testimonials. Please use these custom CSS codes for those purposes.

To hide “Archive: Testimonials” :
```
.post-type-archive-jetpack-testimonial .page-title {
    display:none;
}
```
To make Customer Testimonials look like main title of the page. Use this code:
```
.post-type-archive-jetpack-testimonial .taxonomy-description {
    text-align:center;
    font-family: "Karla",sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 4rem;
    line-height: 1.6em;
    text-align: center;
}
```
This is how your page will look like after applying the above custom CSS codes (screenshot)

All the custom CSS codes listed above should be placed in the CSS editor in your Dashboard.
To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.

Please note that the Custom CSS feature is only included in Premium and Business plans and you can read more about it here:
http://en.support.wordpress.com/custom-css/

I hope this helps.
staff-zara · Staff · Jul 22, 2018 at 11:59 pm
Copy link
@wpx2 Thanks for sharing your CSS codes!

No items found.