Changing alignment of embedded shortcode content on Papermod

support
1

Hi there I am having some trouble aligning an embedded newsletter signup to the center of the page. I have created a shortcode:

<div id="custom-substack-embed"></div>


<script>
  window.CustomSubstackWidget = {
    substackUrl: "privseclaw@substack.com",
    placeholder: "example@yourmail.com",
    buttonText: "Subscribe Now",
    theme: "custom",
    colors: {
      primary: "#000000",
      input: "#3E3E3E",
      email: "#00D97E",
      text: "#F4F4F4",
    },

    // Go to substackapi.com to unlock custom redirect

  };
</script>
<script src="https://substackapi.com/widget.js" async></script>

and I am using this to imbed the signup form in the content:

{{< substackiframe src="https://privseclaw.substack.com/embed" >}}

How can I change the alignment of the embedded newsletter signup so that it is centered?

Many thanks in advance!

2

I managed to align the embedded content by changing the first line to this:

<div style="text-align: center" id="custom-substack-embed"></div>
3

Why not put that in an external CSS file? Olive styles are a maintenance nightmare.

4

What do you mean by that? I am very new to HUGO and coding in general.

5

You might want to read about the relationship between CSS and HTML, for example at the. Mozilla Developer Network. This has nothing to do with Hugo, it is about the architecture of web documents.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.