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

11 October, 2024 02:59:21
kaya.murer
Topics: 3
Messages: 8
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
11 October, 2024 03:04:05
E2Pdf
Support
Topics: 7
Messages: 3330
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!
11 October, 2024 05:27:26
kaya.murer
Topics: 3
Messages: 8
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.
11 October, 2024 06:56:05
E2Pdf
Support
Topics: 7
Messages: 3330
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!
11 October, 2024 07:00:19
kaya.murer
Topics: 3
Messages: 8
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.