Sight theme: blockquotes in comments

• 

  vivianpaige · Member · Aug 28, 2013 at 3:28 pm

  • Copy link
  • Add topic to favorites

  http://blog.vivianpaige.com/2013/08/21/bfd-marcus-endorses-mcauliffe/comment-page-1/#comment-276930
  The first sentence in this comment is a blockquote, but you can’t tell it from looking at it. I’m having trouble finding the element that I need to change.

  What I would like is the text to be in italics with quote marks before and after. Any help would be greatly appreciated.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 28, 2013 at 3:58 pm

  • Copy link

  Howdy @vivianpage, nice to see you!

  The blockquote is appearing to the right of the gravatar image which is negating the blockquote formatting (indent).

  I’ll talk with the theme team on this, but as a temporary fix, you could add more top margin to .comment-content to space the text down some so the text starts below the gravatar (4.5em seems good).

  .comment-content {
      margin-top: 4.5em;
  }

  You could also style the blockquote in comments a little differently with a different color, or perhaps make it italic or bold, or give it a background color using the following selector to target just comment blockquotes.

  .comment-content blockquote

• 

  vivianpaige · Member · Aug 28, 2013 at 4:10 pm

  • Copy link

  Thanks, TSP. I added the space.

  But I still can’t get the comment to style properly. And the selector shows up in red – does that mean it’s wrong?

  This is what I have

  .comment-content blockquote :before :after {
  	content: "";
  }
  
  .comment-content blockquote {
  	font-style: italic {;
  }

• 

  thesacredpath · Member · Aug 28, 2013 at 4:20 pm

  • Copy link

  Vivian, it looks like there is an extra opening bracket after “italic” in the code you posted above. Use the following.

  .comment-content blockquote {
      font-style: italic;
  }

• 

  vivianpaige · Member · Aug 28, 2013 at 6:03 pm

  • Copy link

  OK, I fixed that – thanks. Any chance of the quote marks before and after?

• 

  justpi · Member · Aug 28, 2013 at 6:36 pm

  • Copy link

  Try this:

  .comment-content blockquote p:first-child:before {
      content: "“";
  }
  .comment-content blockquote p:last-child:after {
      content: "”";
  }

• 

  vivianpaige · Member · Aug 29, 2013 at 5:06 pm

  • Copy link

  Awesome!!!!! Thank you so much.

• 

  justpi · Member · Aug 29, 2013 at 6:36 pm

  • Copy link

  You’re welcome!