• Resolved Sharon

    (@wordpress159)


    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)
  • Plugin Contributor Chris Dillon

    (@cdillon27)

    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

    (@wordpress159)

    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?

    Plugin Contributor Chris Dillon

    (@cdillon27)

    Which view template are you using? The Modern template sets the heading size and alignment (the first code snippet above).

    Thread Starter Sharon

    (@wordpress159)

    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

    Plugin Contributor Chris Dillon

    (@cdillon27)

    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

    (@wordpress159)

    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.

    Plugin Contributor Chris Dillon

    (@cdillon27)

    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

    (@wordpress159)

    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.