Changing the size of text for subscription embed form

Themes
1

Hi all,

I recently increased the size of the text for articles on my website. However, I’m having trouble also increasing the size of the text in the subscription embed form that I put in all of my posts. I’ll include a screenshot of what it looks like below, and I’ll also give the current code for the embed form. It just looks a little weird, as the text is noticeably smaller than the rest of the text in my articles. I’d appreciate the help, thanks!

Code: <div style="height: 50vh"><script src="https://cdn.jsdelivr.net/ghost/signup-form@~0.1/umd/signup-form.min.js" data-background-color="#121212" data-text-color="#FFFFFF" data-button-color="#e85c57" data-button-text-color="#FFFFFF" data-title="Mobtown Mag" data-description="Mobtown Mag is a leading voice of the harm reduction movement in Baltimore, providing advocatory journalism on addiction and drug policy. Subscribe today for $5." data-icon="https://cdn.getmidnight.com/3210ddbeaa16948a702b6049b8d9a202/size/w300/2024/08/Untitled-design--28-.png" data-site="https://www.mobtownmag.com/" async></script></div>
Screenshot:

Screenshot 2024-12-12 9.00.48 AM
Screenshot 2024-12-12 9.00.48 AM1582×913 63.8 KB

2

You’re going to need to inspect (right click in browser and choose ‘inspect’) the html elements that result from that script running to figure out what css selectors to target.

3

I tried to do that by inspecting the text, and I found this:

**"p.mb-4.text-center.font-medium.md\:mb-5"**

So I tried the following code using the style tags, but it didn’t work. Any suggestions?

<style>
p.mb-4.text-center.font-medium.md\:mb-5 {
  font-size: 24px;
}

</style>
4

sighs Ah, Tailwind. Can you link the site?

6

@Cathy_Sarisky Here is a link to a post that has the embed form in it. (The form is about halfway through the page). Thank you!

7

Hey @Raki , do I remember that you had some javascript that worked for making changes within iframes? Want to work some magic here? :slight_smile:

8

Have you tried signup cards in the post editor? It’s easier to control.

1 Like
10

@Raki I’m looking at that option now, however, two things: I like how the embedded form has my logo, and I’d like to make a change via code injection if possible so it alters all of the sign up forms in past posts where I’ve already used it (there’s quite a few).

11
  1. It’s possible to inject a logo into the signup cards through code injection.
  2. You can use code injection to override and uniform the style of signup cards across posts.
  3. The built-in signup cards are only visible to logged out visitors, whereas the signup iframe you injected is visible to all visitors. The former approach is more reasonable.
1 Like
13

@Raki Would you be able to help me with the first two points you made? That sounds like something I’d be interested in implementing to replace the embedded form.