Block Quotes

Hey @ccarter81,

Thanks for reaching out. Sorry to hear about the trouble you’ve been having with customizing the Quote element.

Once you’ve assigned the custom class to your <blockquote> element, you can add the following code in the “Appearance > Customize > Additional CSS” area in order to achieve a grey background with a black bar on the right, and have similar styles to the element in the link you’ve provided:

.myClass {
	background-color:#EDEDED;
	border-color:#000 !important;
	padding:50px !important;
	position:relative;
}
.myClass > p {
	font-style:italic !important;
}
.myClass > p:before{
	font-family:Arial;
  font-size:150px;
  position: absolute;
  left: 10px;
  top:-80px;
}
.myClass > p:after{
	content:'' !important;
}
.myClass > cite{
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
	font-size:25px;
}

Just make sure to change all of the .myClass instances in this code to the name of your custom class.

Once the code has been added, the resulting <blockquote> should look like this: https://prnt.sc/txmlwj

Could you please let me know if this works for you?

Thanks very much for your help. So, the letters are still basically gigantic on the quote. I just thought though…I am running the “Typography” plugin. Would this affect the outcome? Or maybe there is a line I need to add to change the size of the font for the body of the quote? Thanks!

Hey @ccarter81,

Thanks for responding!

Could you please give me the URL of the page where the <blockquote> module is located?

Some theme or plugin core CSS might be affecting the text inside the quote, so I would like to check that and rule it out.

Or, if you would like to try and fix it yourself, you can try adding this piece of code in the .myClass > p area in the snippet I’ve previously provided: font-size: 45px !important

The rule for .myClass > p would then look like this:

.myClass > p {
 font-style:italic !important;
 font-size: 45px !important;
}

If this doesn’t work for you, then the URL of your page would really help so I can inspect it a bit further.

Thanks for the help. Yes, I still seem to be having the issue. Here is the url:

https://groovetransformation.com/220-2/

Hi @gdpavle, probably should have tagged you on this! Still having the issue, here is a link. Thanks again!

https://groovetransformation.com/220-2/

So I discovered the Alert block just now. I think I might use that. Still would love to know how to get this working properly though.

Hi @ccarter81,

I’ve accessed the page you’ve provided, but I’m getting a 404 error.

Could you please add a new link to a live page with the blockquote module that is problematic?