How can I change the colour of text in Quote


(Iain Sloan) #1

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


(Brandon Scott Corlett) #2

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


(Brandon Scott Corlett) #3

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


(Iain Sloan) #4

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


(Brandon Scott Corlett) #5

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


(Iain Sloan) #6

Thanks for your help BrandonCorlett


(Anthony Cox) #7

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!


(Lisa Sandler) #8

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;
}


(Doug Bennett) #9

Might give this a try:

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

The default is 100px.


(Lisa Sandler) #10

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?


(Doug Bennett) #11

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;
}

(Lisa Sandler) #12

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


(Doug Bennett) #13

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


(Lisa Sandler) #14

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


(Doug Bennett) #15

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.


(Lisa Sandler) #16

yep. that I will do :slight_smile: