How to change appearance of block quote in Ecto theme

• 

  trailwalker220 · Member · Sep 5, 2015 at 4:00 pm

  • Copy link
  • Add topic to favorites

  I want my block quotes to have the quotation mark image before them and, if possible, a different colored background. I read about changing it with a change in the CSS, but I don’t know how to do it. My theme is Ecto.

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

• 

  thesacredpath · Member · Sep 6, 2015 at 7:31 am

  • Copy link

  Hi there, see what you think of this.

  blockquote {
      background: #eee none repeat scroll 0 0;
      border-left: medium none;
      margin-left: 0;
      margin-right: 40px;
      padding: 0 0 0 4em;
      position: relative;
  }
  blockquote::before {
      color: #777;
      content: "“";
      display: inline;
      font-family: "Times New Roman",Times,sans-serif;
      font-size: 4.5em;
      font-weight: bold;
      height: 20px;
      left: 10px;
      line-height: 1;
      position: absolute;
      top: 0;
      width: 20px;
      font-style: normal;
  }

  You can edit the font color of the quote mark (in the :before rule) and the background color in the blockquote rule.

• 

  trailwalker220 · Member · Sep 6, 2015 at 11:06 am

  • Copy link

  Thanks for the response, but I still need to know where to put that code. Can you tell me?

• 

  thesacredpath · Member · Sep 6, 2015 at 7:14 pm

  • Copy link

  Oh, sorry. Under My Sites at the top left of the top admin bar, click on Customize and then click on CSS, delete all the informational text in that window, and paste in the above custom CSS.

• 

  trailwalker220 · Member · Sep 6, 2015 at 8:13 pm

  • Copy link

  Thank you. That worked! I am very happy with the result and with your kindness. Thanks again.

• 

  thesacredpath · Member · Sep 6, 2015 at 8:41 pm

  • Copy link

  You are welcome, and do let us know if you have additional questions.