Change text size and appearance in paragraph vs quote blocks

Please take a look at this blog post. https://rifoon.com/2019/07/02/carbon-tax-as-tariff/
I am using shapely. I feel the contrast between paragraph text and quote text is distracting to the reader. In the new WP, there is an option to change the text size for each paragraph block, but only to enlarge it for the quote block. Changing the text size does not alter the line spacing, and the result is not at all attractive. Also, the paragraph text does not stand out in comparison to the quote text. Is there a way to customize the text appearance and line spacing in these blocks or should I be asking the WP folks?
Best,
wrnoof

Hi there

Hope you are having a good day and thank you for your question
First of all, you are using several html tags in quote such is a p, cite, strong etc, and this also makes quote look different, this is a default css of quite and you can change every style of it:

blockquote p {
font-size: 18px;
line-height: 24px;
color: #8c979e;
}
blockquote {
overflow: hidden;
font-size: 18px;
line-height: 24px;
padding: 32px 0;
color: #001c28;
font-weight: 400;
border-left: 0 none;
margin: 0;
}

Once you make changes in this CSS template copy paste it in appearance > customize > additional CSS

Thanks!
Colorlib Support Team

Hi Noda,
Thanks so much for this. Is there similar CSS for modifying the paragraph blocks? I may want to make that text a bit larger and bolder. I know WP offers side panel controls for increasing paragraph block text size, but the line spacing does not change with text size and the result is not attractive. Maybe those controls don’t work correctly with Shapely.
Best,
wrnoof

Also, please tell me the difference between “blockquote” and “blockquote p”. Does one govern quotes and the other paragraphs?
Best,
wrnoof

Noda,
I have been experimenting with different values. Changing the “font-size” and other values in “blockquote p” shows up in the adjacent preview pane, but not in the published post. Check out the published post in the link first provided. I have set font-size to 6px, but nothing has changed in the published version.
Best,
wrnoof

Please ignore the post immediately previous to this. The changes showed up once I had logged out of my WP dashboard. Am still interested, however, in CSS code for modifying the paragraph blocks.
Best,
wrnoof

Finally,
The spacing between the quote text and quote cite is quite large. Can I reduce that gap? Changing padding settings does not affect this space. Neither does adding a margin setting to either or both blockquote and blockquote p.
Best,
wrnoot

Good evening

I see you did great progress without me :slight_smile:

"The spacing between the quote text and quote cite is quite large. Can I reduce that gap? " - Here is the code for this part:

blockquote p {
margin-bottom: 10px;
}

Right On, Noda! I might be getting the hang of this. I think this will be my last request. Is there CSS code for changing the appearance of the body text? I want to shrink the paragraph breaks and the line spacing and make the font stand out a bit more - maybe increase the size and/or its weight.
Best,
wrnoof

Good morning

This is a default body text style properties:

body {
font-size: 14px;
line-height: 24px;
color: #8c979e;
}

And i believe you already know how to edit it :slight_smile:

You are really incredibly helpful. Thanks. I want to adjust the size of the paragraph breaks in the body text. Margin-bottom changes the space at the edge of the post page. Any suggestions?
Best,
wrnoof

Good morning wrnoof :slight_smile:

Yes, we can do it and line height is the property we need right now:

body {
line-height: 29px;
}

Noda, you have been far more than helpful. Prior to your most recent response/suggestion, I did some experimenting based on what you had already taught me. I came up with the following CSS code and properties. This seems to work just fine for me. I did learn that the code sequence is important. Rather than use your suggestion, I tried “body p{” + “margin-bottom”. This worked when placed in the right order. Please advise if I have done something that will cause me problems in the future.
Best and many thanks again,
wrnoof

body p {
margin-bottom: 12px;
}
body {
font-size: 18px;
line-height: 26px;
color: #000000;
}
blockquote p {
font-size: 16px;
line-height: 26px;
color: #001c28;
font-weight: 400;
margin-bottom: 2px;
}
blockquote {
overflow: hidden;
font-size: 12px;
line-height: 18px;
padding: 0px 32px 24px;
color: #001c28;
font-weight: 400;
}

Good Evening wrnoof and thank you once again for your kind words :slight_smile:

No, I see your code and it’s clear and correct, I can confirm that it will not cause any problems in future :slight_smile:
Let me know if your problem is resolved and i will close this ticket :slight_smile:

Noda,
Thanks again. Please close this ticket. If I have further questions, I will open a new ticket.
Best wishes,
wrnoof

Ok,

I will close this case now, Feel free to contact us again if you have other questions

Thanks!