No way to change CSS styles in Opt-in and Unsubscribe pages/messages

  • I’d like the modify the look of the confirmation page for Double Opt-in and for Unsubscribing. However, I see that it does not include my theme’s style.css, nor content from any other plugins.

    I have tried adding a <style> element to my message value as shown, however, the <style> element is removed entirely when the property is saved.

    <style> .bg-indigo-600 { background-color: #808080; } .pb-4 { text-align: center; } img { display: inline !important; } </style>

    <p style="text-align:center"><img src="https://adventuretaco.com/wp-content/uploads/2020/11/adventuretaco-icon-only-150x150.png" alt="AdventureTaco Logo" width="150" height="150" />

    <p style="text-align:center;font-family: Roboto, Open Sans, sans-serif;font-size:1.25em;font-weight:700">You have been successfully subscribed. ??</p><p style="text-align:center;font-family: Roboto, Open Sans, sans-serif;font-size:.75em;color:#fff">(you'll be redirected to <a href="/" style="font-family: Roboto, Open Sans, sans-serif;font-weight:bold;color:#fff">adventuretaco.com</a> in 10 seconds...)</p>

    I do see that there is a CSS file loaded for the Unsubscribe Page, but only way to change the styles is to edit the Icegram Express plugin files, which is not a good solution.

    <link rel="stylesheet" id="tailwind-css"  type="text/css" media="all">

    How can I update the styles? As they are right now, the “indigo” colors do not work for high contrast and accessibility necessary on my site.

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi @turbodb,

    Thank you for expressing your concern!

    We are prioritizing this matter and will update you shortly.

    Warm regards.

    Thread Starter turbodb

    (@turbodb)

    Thanks! I can think of three solutions:

    • My ideal solution would be to allow the site owner to specify either a message (as today) or a page to use for these messages, where a series of placeholders (as used elsewhere in Email Subscribers – such as {{EMAIL}} etc. could be used for the necessary buttons, links, etc.

      Note: I realize that this is probably a lot of work!
    • The next best solution would be to allow CSS and ideally JavaScript in the user-provided messages, but this is probably difficult from a security standpoint.
    • Also workable would be a hook that I could implement to include my own CSS file when these “pages” are rendered. In this case, it would also be ideal to have id attributes on any of the IG-created elements, so they can be styled by my CSS.

    Thanks again!

    Thread Starter turbodb

    (@turbodb)

    Hi, any update on this?

    Hi @turbodb,

    In response to your concern, my answer is below.

    1) workable would be a hook that I could implement to include my own CSS file when these “pages” are rendered.

    ==> Could you please add these hook ig_es_unsubscribe_form_after_start in custom HTML/ CSS

    2) it would also be ideal to have id attributes on any of the IG-created elements, so they can be styled by my CSS.

    ==> Currently there isn’t any id attributes to IG elements, but we will add it in upcoming release.

    Let us know if you need any additional support.

    Thread Starter turbodb

    (@turbodb)

    I look forward to the next release where I can use this functionality. Do you have an idea of when that release will be?

    Also, it’s not just the unsubscribe form, it’s also the Double Opt-in confirmation form, and the Subscription Success forms that need hooks. It would be nice to use the same hook to add CSS in all forms, but I understand if that’s not possible.

    Hi @turbodb,

    Thank you for your input!

    Currently, it is not possible to use the same hook to style all pages. However, you can use the es_message_head PHP hook for styling the double opt-in confirmation form and the subscription success form.

    Warm Regards,

    Hi @turbodb,

    Hope you are doing good!

    I wanted to let you know that we’ve implemented the necessary changes in version 5.7.38. You can now add custom CSS using the?ig_es_unsubscribe_form_after_start?WP action, as mentioned earlier.

    For styling the unsubscribe page, use the?#ig_es_unsubscribe_form_wrapper?CSS selector in your custom CSS.

    Hope this helps!

    Let us know if you need any additional support!

    Thread Starter turbodb

    (@turbodb)

    Thanks!

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