Email CSS not updating for referral email

Service: Hoop.la

Our designer updated CSS for all of our emails, but the referral email seems to be displaying super weird with lots of extra spacing. I've attached a photo for review. 

Attachments

Photos (1)
Original Post
Votes (0)

Activity Stream

Topic Assigned

This topic has been assigned to Dave Dreezer by Dave Dreezer.

Hi Briana,

The image that is being used is 180 pixels tall, a lot of which is blank space.  That's what is making it appear to be stretching the email out.  

TPHHooplaLogo

The CSS class for that location is details_box_community_avatar_right_column and the title is details_box_community_avatar_left_column.  Ask your designer to edit with the CSS for those two classes to shrink the appearance of the image a little and maybe enlarge the text on the left to balance them out. That should help to make the area look much more balanced.

Attachments

Photos (1)

To a degree. All of the wording is contained within the Wordlets section of your control panel and is editable.  All of the CSS can be edited.  The structure of the page and data displayed however, cannot be edited. 

Certainly!

In this screen shot I made of a test email from your site "structure" means the order in which elements appear.  The location of the hello text, then the invitation header, then the site name, etc.   While you can work on the CSS and the Wordlets, basically the look and feel of the emails  the structure, or the order in which elements appear can't be changed.

So, as an example, you can reduce the size of the Join button, change the wording of it, and make it fuscia or chartreuse if you like, but moving the button to appear above the Hello text  couldn't be done.

One other note on the CSS, is that I wanted to point out that email CSS changes apply to all of the emails together. There is not a seperate CSS setting for each email sent out.

Screen Shot 2019-04-02 at 2.19.15 PM

Attachments

Photos (1)

Hi Dave, I am working on the fixes for this. I have a some questions:

  •  Where can I preview this email template so I can see the applied changes? 
  • Is it possible to use an image other than the 'Community Logo' (which must be exactly 180 pixels wide by 120 pixels tall) in our referral email template? If yes, how do we do so?

 

Hi Jennadr,

On the very very bottom of the email css page are two preview links.  I'm not sure though, that either shows the invitation template, so what I did was to go to my profile and click invitations and then invited myself, dave+1 dave+2, etc so that I could see the results of the actual email.

Yes you can use a different image, since you control the css.   Here is how I did it
The image is within details_box_community_avatar_right_column

background: url(https://dave.hoopla-dev.net/ws/email.png) no-repeat;
text-indent: -9999px;  width: 100px; /* Width of new image */
  height: 67px; /* Height of new image */

Something similar should work for you. As always, do not just copy/paste this. What works as a high visibility test case will not be an attractive solution for a live site. Please test it on your dev site before use.

Hi Dave - yep, that's exactly how I was previewing the template too. And I will see if just using a background image will work. (The template seems to automatically pull in the default community image. There may be some css magic I can do to hide that default image. I'll let you know) Thank you!

Hi Dave, 

Adding a background image to the 'details_box_community_avatar_right_column' displays the background image as well as the default image being pulled in. (The invitation email template appears to automatically pull in the 'Small Community Logo'.)

Is it possible to disable that image from being pulled into that template? If so, how? Or is there a way to add custom css so I can target that image/element specifically so as not to affect any other image element?

Please advise, thank you

May I see what you have in there?

Are you using the text-indent: -9999px; trick?

That's going to shove the logo image off the screen and let the background image that you set in the css appear.  Very crude, but it works.

If you view the source on the email you'll see there is no css sheet in the emails, it's all inline styling, so what I'm doing to the TD is shoving the default image off screen with the text-indent -9999 px and then the background image appears.

Hi Dave, I have attached some screenshots.

The first screenshot shows what css I have added

The second screenshot shows what the email looks like when I open it via gmail

The third screenshot shows the element from email inspect. You can see that gmail strips the text-indent rule. 

 

Attachments

Photos (3)

gmail, gmail, gmail.    Ok, I guess it doesn't support the Phark Method, so I just tried the Kellum method, and that worked for me in mac mail, gmail using chrome on my mac, and gmail app on my android.

Here is the code that I used.

background: url(https://dave.hoopla-dev.net/ws/email.png);
width: 100px;
height: 67px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

here is what it looked like.

Screen Shot 2019-05-15 at 2.03.53 PM

and on my phone.

Screenshot_20190515-141109_Email

My actual logo has the site word logo in black.  The email picture that I am substituting is what we see. So it look like gmail is doing what we want using the Kellum method.

I've used a number of references to work on this, but this is probably the best of them.
https://www.sitepoint.com/css-...ve-margins-and-more/

Please give it a try and let me know what your results are.

Attachments

Photos (2)

Issue Resolved

This action was taken by Dave Dreezer.
To follow up on this issue, please click here.
×
×
×
×
×