Email Visit Topic and Visit Message Buttons to Replace Text


(Scot) #1

Hi Folks,

I did a search on this site for this but was unable to find anything. On another discourse site I see the following at the bottom of emails for PM’s and forums posts:


but on my site the emails have:


I checked the customize text option in admin for “visit topic” and “visit message” on both sites and they have the same text strings. This makes me think it might be done with a plugin but I am not sure. If anyone knows how to get the icons to replace the text and could please let me know I would appreciate the help.

Thank you,
Scot


(Jeff Atwood) #2

This maybe means your “tertiary color” is white? I believe that button color inherits the tertiary color, which is the color of default action buttons.


(Scot) #3

Hi Jeff,

Thank you for the reply. I checked and the tertiary color is not white. It is blue. However, even though it is blue it is not the same color as the button in the email on the site that works correctly or meta.discourse, which ash the same color blue button. This leads me to believe the tertiary color is not responsible for the button color in the email unless I am misunderstanding something.

Maybe the button color is set some other way?

Thank you,
Scot


(Robert McIntosh) #4

I am exploring this issue along with @awesomerobot because of a related query. I will get back to you when we have diagnosed the issue and have a possible fix.

It seems that default email styling gets lost when the email templates are updated, even when they are reverted back to the original.


(Kris) #5

It looks like those styles are set by these settings in admin > settings

Default is #2F70AC background and #FFFFFF foreground, can you check those settings @Scot?

Either way, I wonder if we can improve these colors to better match a site’s styles — it’s a bit tricky because email styling can be so limited depending on your client, and it might be problematic for sites with dark backgrounds? I can look into it a bit more. It’s kind of odd to have a couple of buried color settings here.


(Scot) #6

Thanks for the replies guys…

Kris -

My email accent settings are the same as the default.

03%20PM

Robert - Thanks for checking into this. One of my sites (Site #1) was set up by my programmer but he says he didn’t do anything to make it have the blue button. it is just that way as a default, same as it is with meta.discourse. The second site (Site #2) was set up by a well known discourse guy on this site and it is a basic default install with a couple common plugins. Both up to date with the latest discourse updates. So far every setting I have checked has been identical between both sites. Hopefully you or someone else will have a breakthrough and figure this out because I am stumped so far.

-Scot


(Kris) #7

Hmm, now that I look at it again — those aren’t even buttons because the spacing is smaller than it would be for buttons (even if the buttons had a white background). They also don’t have the styling completely removed because otherwise they’d look like this:

Another option… it looks like the template selects the first link in the email footer to highlight as a button… is there another button above the text in your screenshot?

    def correct_footer_style_hilight_first
      footernum = 0
      @fragment.css('.footer.hilight').each do |element|
        linknum = 0
        element.css('a').each do |inner|
          # we want the first footer link to be specially highlighted as IMPORTANT
          if footernum == (0) && linknum == (0)
            bg_color = SiteSetting.email_accent_bg_color
            inner['style'] = "background-color: #{bg_color}; color: #{SiteSetting.email_accent_fg_color}; border-top: 4px solid #{bg_color}; border-right: 6px solid #{bg_color}; border-bottom: 4px solid #{bg_color}; border-left: 6px solid #{bg_color}; display: inline-block; font-weight: bold;"
          end
          return
        end
        return
      end
    end

It looks like @featheredtoast and @neil made some changes to the above code 3-4 months ago, so I wonder if one site is using a version older than 4 months and that’s causing the difference? Other than that I suspect it must be a plugin changing something?


(Jeff Wong) #8

Nice eagle eyes. From what I can see, it does appear like the styling here is different for emails with “in reply to…” content. The final content at the bottom (below “in replied to…”) is styled correctly while the links before the “in reply to” lines are not styled.


(Jeff Atwood) #9

That’s correct, we only want one primary call to action button in an email, not multiples. Otherwise you get a “who’s on first” situation.


(Scot) #10

This is all consistent with what I am seeing on sites that have the styling. I am getting the styling in the email after the last message at the bottom of the email on meta and my working discourse. I am not getting the styling anywhere in the email on my second discourse that is not working.

My first discourse is a year old and it is working. My second discourse was installed a few months ago. Standard install by @pfaffman on Digital Ocean. I am pretty sure he has done a lot of these installs and I would be surprised if anything he did is causing this. But I guess anything is possible. I only mention who did the install because I believe his both experienced and reputable int he Discourse world.

Both installs are up to date. Here are the current plugins on the discourse that is having the problem. This includes the ones Jay installed plus a few I added.


(Jay Pfaffman) #11

Do both instances have the same plugins?


(David Kingham) #12

I have this problem as well, not sure if this helps but here is my email:

image

Compared to a discourse email:

image

The only plugins that are the same as Scot’s are the adplugin, events, and locations.


(Scot) #13

Jay - I have to ask my programmer to give me a plugin list for Site #1 (the one with blue box styling) and then I will post it.


After seeing David’s post I looked at the source for site #2 (the one with the bold gray styling instead of the blue box) and this is what I see, if it helps…

<div style="color:#666;">

<hr style="background-color: #ddd; height: 1px; border: 1px;; background-color: #ddd; height: 1px; border: 1px;">

<p><a href="https://forum.sobervegan.com/t/where-do-your-lawmakers-stand-on-animal-cruelty/117/2" style="text-decoration: none; font-weight: bold; color: #006699;; color:#666;">Visit Topic</a> or reply to this email to respond.</p>

</div>

<div style="color:#666;"><p>To unsubscribe from these emails, <a href="https://forum.sobervegan.com/email/unsubscribe/0bd79371335fa16b2fc4e0f508363ea5d0002aeb080a9afe2d843fb880704748" style="text-decoration: none; font-weight: bold; color: #006699;; color:#666;">click here</a>.</p></div>

I did not see anything that said “element.style” nor did I find the word “element” or the word “style” anywhere in the email source.


(Scot) #14

@pfaffman here are the plugins on the site that has the same styling as meta.discourse with the blue boxed text:

Thank you,
Scot


(Jay Pfaffman) #15

I’ve noticed this button-or-link thing but never bothered I pay attention. It looks like sometimes there is a link and others a button:

The first message has the button;the second has the link.


(Robert McIntosh) #16

I just wanted to add a related (but different?) issue on the same lines so that we might explore them at the same time.

In this case, the buttons become text with no styling at all. Another user here pointed this out last week so I’ve tried looking into it to understand it better.

This is the default email notification for a quote:

If you go and edit the template in any way, even if you only add a little plain text (see arrow), that styling disappears

If you then go back to the template, and click “revert changes” the text is removed, but the styling is still missing.

The user reported that when he re-installed Discourse first this works fine, but when he restores the database, the template reverts to losing the styling (so I assume revert does not equal “restore to factory settings”)

Is there a way to revert to default stylings at the very least?


(Jeff Atwood) #17

Excellent detailed testing work. Any ideas here @neil ?


(Neil Lalonde) #18

We have some complicated logic hinted at by a comment:

we want the first footer link to be specially highlighted as IMPORTANT

Only the first link in an element with classes “footer” and “hilight” will be styled like a button.

And we have this logic elsewhere that removes the hilight:

      first_footer_classes = "hilight"
      if (allow_reply_by_email && user.staged) || (user.suspended? || user.staged?)
        first_footer_classes = ""
      end

It seems unnecessary to me, or at least very confusing.


(Scot) #19

If you go and edit the template in any way, even if you only add a little plain text (see arrow), that styling disappears

My template is not edited. I am not even sure how to edit the template. My site is just a regular install with a few plugins and it never has the blue button on any forum or PM emails. Only bold gray text. Seems strange given every other Discourse I use has the blue button. It’s not the end of the world. I only asked because I figured it would be an easy fix lol.

I appreciate all the help and I will monitor this thread in case a solution emerges.

Thank you,
Scot


(Kane York) #20

The second half of that or is both sufficient and makes sense - we don’t want to ask suspended or staged users to go to the web interface.