Styling anchors in email digest

Continuing the discussion from Styling email digest:

I did a lot of searching and came up lacking. Is there a way to alter the styling of the email digests? The only thing I’m interested in changing is the anchor text. I’d like it to match the rest of my site’s branding. I couldn’t find a way to do it through the Customize feature, but I may not be thinking about it right. Thanks.

There might be better ways, but you can add styles to emails in a plugin by calling Email::Styles.register_plugin_style and passing it a block that acts on the email (the email is a Nokogiri document at this point).

This will make the links red and bold. The problem is that it will make all the links red and bold. To target just the ones you want will take a bit of fiddling around.

# name: email-styles
# version: 0.1

after_initialize do
  require_dependency 'email/styles'
  Email::Styles.register_plugin_style do |doc|
    doc.css('a').each do |element|
      element['style'] = "color:red; font-weight:bold;"
    end
  end
end

You’ll need to restart Sidekiq to see the change.

2 Likes

Good to know. I may do that. Seems a bit difficult to require a plugin for styling.

Yes it does. Maybe things could be changed in the Discourse code so that values from the site’s color scheme are passed to Email::Styles as options.

For example adding:
cta_color: ColorScheme.hex_for_name('tertiary') to email_opts in user_notifications.rb makes it possible to set the call-to-action button background color to @opts[:cta_color]

1 Like

Might make sense for either a PR or a plugin to pull the customizations into the emails.

1 Like

Before I start looking for time to do this, does anyone know if this is on the roadmap or if there’s a desired method for how this is done in the future?

I went ahead and put together a PR for this.

https://github.com/discourse/discourse/pull/4008

8 Likes

Just let me know what you need from me on this. I’d love to see this make it into core.

Anchor text in the digest now uses the site’s color theme.

2 Likes