blockquotes

Greetings…and thank you for the link.
What elements are you trying to change in the quotes and change them to what?

I would like to add a symbol for the quotation mark – something like this https://www.shicho.net/allcarols2me/wp-content/themes/blue-christmas/images/openquote.gif – and the font family, so it would look differently from the rest of the text.
At the moment, it seems there is only a bit of space before and in italics.

Would that be possible? Why the changes I make in the editor do not appear?

Thank you

It’s almost 2am for me so I wanted to follow up here before I go offline, but I hope I understand this correctly, if I open one of your posts up to the full post view, you want to have a quote in your content to have a quote mark, such as the image you posted? Plus, be able to change the font for that quote? As well, when you create a quote in the editor, it shows the styling there but not on the front of the site?

We can follow it up on another time, as I can imagine it would be difficult to keep on working at this time, no worries!
Yes, for the quote contents (just for them), I would like a quote like or similar to the image I sent, and change the font, so that it would differentiate from the rest of the post.

Definitely a long day for me finishing up on my next new theme.

Anyway, thank you for clarification. I can definitely help you out on that one, so what I will do is make a note for me to follow up tomorrow with a solution to help you with this.

Best Regards,
Andre

ok, perfect! no problem, just I will not be in the office tomorrow, so I will follow up on Monday – not urgent.

Thank you,
Cristiana

Hi Cristiana. I’m awake and ready!
OK, so what I discovered is that I did not code the blockquotes correctly, so they are not displaying right in the front-end of the site. The style for blockquotes does not use the symbol as you shown me, but rather it uses a vertical bar like this:

Emphasize Blockquotes

I will need to fix this because it does not show in the front-end unless your blockquote uses a paragraph tag in the quote. But not everyone does that, so the vertical bar style is not seen.

However, you were wanting to customize this and use that symbol. To do this, some custom CSS is going to be required.There are a few ways of doing this, but perhaps this might be the one you want:

blockquote {
    border:none;
    padding: 0 18px;
    font-family: "Georgia";
    font-size: 1rem;
    font-style: italic;
}
blockquote:before {
    content: "\201C";
    font-family: georgia;
    font-size: 4rem;
    line-height: 0;
    position: relative;
    top: 40px;
    display: inherit;
}
blockquote p {
    margin-left: 30px;
}

That will apply that style to all your quotes.

Hello Andre,

Thank you very much for your help in this, and sorry for the late reply!
It looks great, thanks! If I can only ask whether we can italicized it and a bit less padding – especially from the top.
I have tried to add font-style and modify the padding line, but it seems not appearing.

Thank you very much!

Sorry for late reply myself as well…it’s noon right now and just starting my day.

When you say less padding, are you referring to the area around the quote? If so, that is the margin.So you can adjust the margins on the blockquote element.

blockquote {
   margin: 10px 10px 10px 10px;
}

Just like padding, except the margin is in reference to the area outside the container.

Now sure what you mean by padding line or font style? I see your blockquotes are italic.

Hello Andre,

ok, I have sorted out the padding/margin matter, thank you!
For the italic, I have to select in the post editor “italic”. I have added the code to the CSS editor to make the italicised style automatic for every quote, but it doesn’t appear changed once saved.
So to have the blockquote in italic, I have to select it in the editor post for each quote. (I hope this is a clearer explanation).

Do you think we can make something about it? Otherwise I will select the italic everytime.

Thank you very much!

This will do it, and for actual pages if you decide to use quotes there too:

.page blockquote p,
.single blockquote p {
    font-style: italic;
}

ok, thank you very much! You have been really a great support!