Title: Widget CSS
Last modified: March 24, 2018

---

# Widget CSS

 *  Resolved [Sharon](https://wordpress.org/support/users/wordpress159/)
 * (@wordpress159)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/)
 * Could you point me in the right direction of CSS code to use to alter the widget
   heading? When I inspect the code it looks like it is using my theme’s h3 class
   but it displays much larger than that and is also centred when I need it left
   aligned.
 * I am using slideshow view on the front page in a widget. I have been able to 
   alter the display view title with Additional CSS with no problems. However the
   quote icons are not aligning properly with the heading text. Is there a way to
   adjust the alignment of the icons or the text?
 * Many thanks,

Viewing 8 replies - 1 through 8 (of 8 total)

 *  anonymized-13171256
 * (@anonymized-13171256)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110059)
 * To adjust the heading:
 *     ```
       /* Modern template: heading size and alignment */
       .strong-view.modern .testimonial-heading {
         font-size: 1em;
         text-align: left;
       }
       ```
   
 * To move the quotes from the **content** to the **heading**:
 *     ```
       /* Modern template: remove quotes from content */
       .strong-view.modern .testimonial-content { 
         margin: 0; 
       }
       .strong-view.modern .testimonial-content:before,
       .strong-view.modern .testimonial-content:after {
         content: "";
         display: none;
       }
       /* Modern template: add quotes to heading */
       .strong-view.modern .testimonial-heading { 
         margin: 0 56px; 
         position: relative;
       }
       .strong-view.modern .testimonial-heading:before,
       .strong-view.modern .testimonial-heading:after {
         font-family: FontAwesome;
         color: #CDCDCD;
         position: absolute;
         font-style: normal;
         font-size: 36px;
         line-height: 36px;
         width: 36px;
       }
       /* left quote */
       .strong-view.modern .testimonial-heading:before {
         content: "\f10d";
         left: -56px;
         top: 0;
       }
       /* right quote */
       .strong-view.modern .testimonial-heading:after {
         content: "\f10e";
         right: -56px;
         top: 0;
       }
       ```
   
 *  Thread Starter [Sharon](https://wordpress.org/support/users/wordpress159/)
 * (@wordpress159)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110123)
 * Thanks for the prompt reply. My issue is with the widget space that I have placed
   the slideshow view in on my front page.
 * Thinking about it now it is the actual widget heading that I need to format (
   ie. align left and decrease size to 22px).
 * Which is probably not controlled by the plugin right?
 *  anonymized-13171256
 * (@anonymized-13171256)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110129)
 * Which view template are you using? The Modern template sets the heading size 
   and alignment (the first code snippet above).
 *  Thread Starter [Sharon](https://wordpress.org/support/users/wordpress159/)
 * (@wordpress159)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110139)
 * I’m using the default template, but I switched to modern and tried what you said
   above but it didn’t work either.
 * In the image linked, the first Client Testimonials is the stock standard widget
   from my wordpress theme and how I want it to look.
 * The second Client Testimonials circled in grey is the Strong Testimonials one
   using the default template.
 * [Image](http://www.offsitebusiness.com.au/stuff/Testimonial.jpg)
 *  anonymized-13171256
 * (@anonymized-13171256)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110151)
 * Sorry, I made too many assumptions based on your initial post.
 * The image doesn’t help me understand. I can’t tell if you’re talking about the
   plugin template’s heading or the theme’s widget heading.
 * Is your site live? Can you post a link so I can see what you’re seeing?
 *  Thread Starter [Sharon](https://wordpress.org/support/users/wordpress159/)
 * (@wordpress159)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110167)
 * Sorry probably my fault I don’t think I was clear enough. It’s the theme’s widget
   heading that I need to format. It has it’s on special widget which is formatted
   the way I want it. And I have found the code here;
 *     ```
       .widget_testimonial .testimonial-icon:before {
       	display: inline-block;
       	-webkit-font-smoothing: antialiased;
       	-moz-osx-font-smoothing: grayscale;
       	font: normal 22px/1 'Genericons';
       	vertical-align: top;
       	content: '\f106';
       	width: 25px;
       	height: 19px;
       	float: left;
       	margin-right: 3.06%;
       	color: #0FBE7C;
       	-webkit-transform: rotate(180deg);
       	transform: rotate(180deg);
       ```
   
 * However when I use the Strong Testimonials View widget in Appearance -> Widgets
   it displays differently as in the above image. I am not using the Testimonials
   title/heading.
 * The site is not live yet.
 *  anonymized-13171256
 * (@anonymized-13171256)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110193)
 * Every theme is different. The plugin widget inherits the **widget heading** style
   from the theme. I suggest you ask the theme developer how to copy its **special
   widget** heading style to the plain widget.
 *  Thread Starter [Sharon](https://wordpress.org/support/users/wordpress159/)
 * (@wordpress159)
 * [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110202)
 * Thank you, I only realised after your first answer that it may have been a theme
   style I was looking for.
 * Many thanks for your time, it is a great plugin and the info you gave me in the
   first post has helped me with quotes layout on the display view which was the
   second part of my first post.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Widget CSS’ is closed to new replies.

 * ![](https://ps.w.org/strong-testimonials/assets/icon-256x256.png?rev=3134855)
 * [Strong Testimonials](https://wordpress.org/plugins/strong-testimonials/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/strong-testimonials/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/strong-testimonials/)
 * [Active Topics](https://wordpress.org/support/plugin/strong-testimonials/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/strong-testimonials/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/strong-testimonials/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [Sharon](https://wordpress.org/support/users/wordpress159/)
 * Last activity: [8 years, 4 months ago](https://wordpress.org/support/topic/widget-css-11/#post-10110202)
 * Status: resolved