Restyling Blockquote

Hello,

I used the following CSS code to restyle the blockquote:

blockquote {
border-left: 4px solid #ccc;
color: #a5a4a4;
font-style: italic;
margin: 30px 0 30px 15px;
padding-left: 15px;
}

just like I saw in this page, but nothing happens. Any suggestions?

Thanks,

Mario

Hi, I think you need the p tag in there with this theme (remember CSS changes need to match the classes used on the theme, not plain HTML which you’re writing from scratch).

For example I modified my own blockquote by putting this CSS into the custom CSS box in the theme admin panel:

blockquote p {
   font-size:20px !important;  line-height:26px !important;  text-align: left !important; padding-left:20px;
}

• This reply was modified 12 years by simchris.

Hi Christopher,

thanks for the advice. Is it enough to have the p tag or do I have to have two blockquote expressions in the Custom CSS?

Hi,
basically

blockquote p {
border-left: 4px solid #ccc;
 color: #a5a4a4;
 font-style: italic;
 margin: 30px 0 30px 15px;
 padding-left: 15px;
}

if anything doesn’t work add the important tag as in my first example, as it needs to over-ride the default style

• This reply was modified 12 years by simchris.

This is what I did:

blockquote {
  padding-left: 15px !important;
  position: relative;
  border-left: 4px solid #ccc !important;
  margin: 10px 0 10px 0 !important;
}

blockquote p {
  font-family: 'PT Sans',sans-serif !important;
  font-size: 15px !important;
  line-height: 21px !important;
  font-weight: normal;
  font-style: none !important;
  text-align: left !important;
  color: #a5a4a4 !important;
}

And this is result, which I’m satisfied about. If I made some mistakes in the code (or if there are some redundancies), feel free to correct! 🙂

Thanks,

Mario

This is the “clean” version:

blockquote {
  padding-left: 15px !important;
  border-left: 4px solid #ccc !important;
  margin: 10px 0 10px 0 !important;
}

blockquote p {
  font-family: 'PT Sans',sans-serif !important;
  font-size: 15px !important;
  line-height: 21px !important;
  font-style: normal !important;
  text-align: left !important;
  color: #a5a4a4 !important;
}