Add class to ‘dynamic-entry-content’

  • I am trying to add a CSS class to my dynamic content in an element template. However, I’m having trouble adding a CSS class to that content and looking for guidance on how to do it?

    My goal is to add a special styling to any H3 tag on my content template element for “Email”. I created a class “.large-h3-margin h3” to handle anything that was inside the large-h3-margin container to have special styling. However, when I add “large-h3-margin” tag to the container that contains the dynamic content block, it doesn’t apply when the page is built.

    ie:
    inner__section
    – content__section (large-h3-margin)
    – [dynamic content block]

    Maybe I’m missing something, but the dynamic content block wont let me add a CSS class to it. I’m sure its simple, I just can’t find it.

    Here is the CSS I tried to implement, but wasn’t working.

    .large-h3-margin h3 {
        margin-top: 5rem !important;
        margin-bottom: 2rem !important;
    }
    body.single-email .dynamic-entry-content h3:not(:first-of-type) {
        margin-top: 5rem !important;
        margin-bottom: 2rem !important;
    }
  • Hi there,

    The CSS should work; if it doesn’t, it’s likely caused by a syntax error in your previous CSS.

    Try adding the CSS to the top of the CSS field to test.

  • Thanks @ying!

    In the end it was a coding error in my css. 🤦🏻‍♂️

    But to clarify, can I add CSS directly ‘dynamic-entry-content’ block, or need to put it in a container? is that best practice?

  • No, the dynamic content block does not have the option to add a CSS class, but why not just use dynamic-entry-content class to write your CSS?

    Or you can wrap a container outside and add the class to the container.

  • Thanks.

    I am trying to setup a template for a client. So they wouldn’t know how to add the class when writing the content. So ideally its something that automatically happens.

    Thanks for all your help!

  • You are welcome   🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.