How can I change the colour of text in Quote

I want to change the colour of the quotes and text to white but cant seem to find any controls for this.

Am i right in assuming that you are talking about using a block quote stack?

If so here are some things that will help in situations like this;

Thanks BrandonCorlett I will try that, and yes its the quote stack that ships with stack3

Turns out it does have a tag for the css

.pullquote {
color: #ffffff !important;
}

Is what you’ll want to use to change the font color in the block quote. Just change the “#ffffff” to the hex value of whatever color you choose.

Cheers

2 Likes

Thanks for your help BrandonCorlett

1 Like

Thanks for this! Jus to note, you should just be able to paste that code in the CSS draw on the page info and it works, worked for me beautifully!

Does anyone know how to change the size and color of the quotes? Not the text. " "
I borrowed code from above to change the font size, but do not know what the actual quotes size and color code would be. https://lisasandlerphotography.com/details/happy-clients/. 2nd quote down on the first side is an example.

.pullquote {
font-size: 14pt !important;
}

Might give this a try:

.pullquote::before, .pullquote::after {
font-size: 50px;
}

The default is 100px.

2 Likes

Ah Doug, one of my code gurus, thank you :slight_smile: I still have a hard time reading code in the inspector if it’s not straight-forward.

Would there also be code to make the quotes go on the same line as the text? or closer at least? or make the line-height of the quotes closer to the text? Does that make sense?

The top quote is before and is set to 5px relative so something like this should bring it down

.pullquote::before {
top: 15px;
}

The bottom one is after and is set to -40px relative so this would bring it up:

.pullquote::after {
bottom: -20px;
}
2 Likes

thank you! Did the trick. Still playing around with it.
Much appreciated as usual :slight_smile:

Glade it helped, If you want to try to make it appear on the same line you could go with:

.pullquote::before {
top: 20px;
left: -15px;
}
.pullquote::after {
bottom: 0px;
right: -15px;
}

Might need to play with the left and right numbers

1 Like

thank you! I was trying to figure that out with spaces, but this is better.

Yeah, thought it might look better, Just check it out with different breakpoints (mobile, tablet, and desktop) and different lengths of the quotes. The negative values are pushing into your margins.

Might have to play with that first font-size as well.

1 Like

yep. that I will do :slight_smile: