Styling Headings (H1, H2, H3) from ACF WYSIWYG Field

Help Desk ›› How to ›› Styling Headings (H1, H2, H3) from ACF WYSIWYG Field

October 11, 2024 02:59:21

kaya.murer

Topics: 7

Messages: 20

I’m currently working with an Advanced Custom Fields (ACF) WYSIWYG field. Users are allowed to insert both text and H3 headings. I have successfully pulled in the content of this field using one of the following shortcodes:

[e2pdf-wp key="inhalt" meta="true"]
[acf field="inhalt" post_id="[id]"]

I would now like to apply custom styling to the H3 heading tags (such as font size, line height etc.) I attempted to do this by adding the following CSS in the properties CSS field, but it didn’t seem to work:

h3 {
font-size: 22px;
}

Could you please advise on how to correctly style H3 headings within the ACF WYSIWYG content in E2Pdf templates?

Thanks in advance for your assistance!

Best regards,
Kaya

October 11, 2024 03:04:05

E2Pdf

Topics: 7

Messages: 3617

Support

Hello,

font-size on the "h3" headers should work when the PDF is rendered.

Can you please:

1. Attach the screenshot of the "properties" of the "HTML" object (via "Right Mouse Click" -> "Properties"), where we can see the CSS and Value.

2. Temporarily map the shortcodes:

[e2pdf-wp key="inhalt" meta="true"]
[acf field="inhalt" post_id="[id]"]

to the "textarea" and attach the screenshot with the output or the "PDF".

P.S. You can mark the message as "private" so only support can see your message.

We would really appreciate your feedback at WordPress.org!

October 11, 2024 05:27:26

kaya.murer

Topics: 7

Messages: 20

Hello and thanks for the super quick reply.

I'm not sure what I did wrong but suddenly the styling of the H3 headings works as it should. I have deleted the template and started again from the beginning, I think I made a mistake somewhere. I apologize for the effort this has caused you!

I have a different question, with which selector can I select “normal text” which has no html tag?
I have tried using p but this select somehow just the first and last text element – please see the screenshot attached.
I would need that to add some margin to the paragraphs.

factsheet.pdf

October 11, 2024 06:56:05

E2Pdf

Topics: 7

Messages: 3617

Support

Unfortunately, if the source generated HTML doesn't have any wrap tags, there is no way to select that text. It would take the font-size and line-height from the "HTML" block settings.

Can't you use the "margin-top" added to the "H" elements to have some padding?

We would really appreciate your feedback at WordPress.org!

October 11, 2024 07:00:19

kaya.murer

Topics: 7

Messages: 20

Okay thank you very much. I think I will probably solve this as you suggested and just add the margin to to the h elements instead.