Visual layout of quotes

Hi BenWalke,

The content of the quote is surrounded by an HTML blockquote tag. That should help you in targeting the specific elements you want to style. For example, you could change the background color, add a border, adjust the fonts, etc. 

Here's a simple example of how to change the background to red using CSS:

#lia-body .lia-content .lia-message-body .lia-message-body-content blockquote { background: red; }

Perhaps not the most visually appealing styling, but it's a simple demonstration of how to target the styling of that content.

Here's a nice example from the myFICO community:

http://ficoforums.myfico.com/t5/Understanding-FICO-Scoring/Expanded-quot-FICO-High-Achievers-quot-scores-of-760-and-above/m-p/111682#M12686

Regards,

Adam

Here's the CSS I've been used for targeting:

#lia-body .lia-content .lia-message-body blockquote, body.mceContentBody blockquote, #lia-body .lia-content .lia-panel-tooltip blockquote

---

BenWalke wrote:

Hello,

 

One of the most requested changes from our community is in relation to how quotes look. What I'm wondering is if there's a way to change the visual layout of quotes via the CSS of the community style or similar?

 

Thanks!

---

Here you can use my CSS if you want:

/*BLOCKQUOTE DESIGN*/
#lia-body .lia-content .lia-message-body blockquote,
    body.mceContentBody blockquote,
    #lia-body .lia-content .lia-panel-tooltip blockquote
{
padding: 10px; margin: 9px 10px 10px;
background: none repeat scroll 0% 0% #E0E0E0;
border-radius: 5px;
border: 1px solid #E0E0E0 ;
font: italic 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
position: relative;
}

If you do it in mobile view also it looks good.

I also use TEXT EDITOR to change this field:

page.post.original_message_quote.text              = [I QUOTE USER:]&nbsp;<strong>@{0}</strong><br/><blockquote>{1}</blockquote>

So it looks like this in final (I QUOTE USER is CITIRAM KORISNIKA in my language)