Including CSS FILE

[ghost]

Hi @datawookie I am trying to render a R markdown in emayili but I am not able to see the theme I defined in the markdown file .

I tried to use include_css = c("rmd") and I get an error when using include_css = c("rmd", "highlight") in the render function which is the advised approach based on your blog when using gmail https://datawookie.dev/blog/2021/09/emayili-managing-css/.. I have also tried to add a custom css file but I can't see any difference in the email received how can I make the email style prettier ? I'd like to know both options: 1) how to display the style as defined in the rmarkdown YAML header and 2) how to add a custom css to personalize the emails contents

These are my attempts

pwalk(
  reports,
  function(email,x){
    log_info("{x} -> {email}")
    envelope(
      to=email,
      from=fromJSON("credentials.json")$email
    ) %>%
      subject("Try email {{ x }}")%>%
      emayili::render(RMD,params=list(x= x),include_css = c("rmd", "highlight")) %>%  
      smtp()

  }
)

Error: Valid options for include_css are: rmd, bootstrap.

Custom css --> it doesn't work I can't see it

pwalk(
  reports,
  function(email,x){
    log_info("{x} -> {email}")
    envelope(
      to=email,
      from=fromJSON("credentials.json")$email
    ) %>%
      subject("Try email {{ MS }}")%>%
      emayili::render(RMD,params=list(x=x),include_css =FALSE,css_files = "style.css" ) %>%  #does not work : I can't see the css style in the email
      smtp()

  }
)

Thanks a lot for your help!!

[datawookie]

Hi @ang-ita, please provide me with a suitably redacted copy of the Rmd and CSS files that you are using. Without them it's hard for me to reproduce your problem. Thanks, Andrew.

[ghost]

This the YAML header

title:"title"
author: "author"
date: "`r Sys.Date()`"
output: 
 html_document:
   includes:
     before_body: logo-option.html
   css: style.css

and attached you can find the style

style.zip

[datawookie]

The code:

library(emayili)

smtp <- server(
  host = Sys.getenv("SMTP_SERVER"),
  port = Sys.getenv("SMTP_PORT"),
  username = Sys.getenv("SMTP_USERNAME"),
  password = Sys.getenv("SMTP_PASSWORD")
)

msg <- envelope(
  to = "andrew@fathomdata.dev",
  from = "andrew@fathomdata.dev"
) %>%
  subject("Rmd with CSS")%>%
  render(
    "message.Rmd",
    include_css =  FALSE,
    css_files = "style.css"
  )

msg %>% smtp()

The message:

---
output: 
 html_document
---

## R Markdown

This is an R Markdown document.

The CSS:

h2 {
  color: red;
}

And this is what the message looks like in GMail:

[ghost]

@datawookie I do not understand what you have done I tried to change the header with

title:"title"
author: "author"
date: "`r Sys.Date()`"
output: 
 html_document:
   includes:
     before_body: logo-option.html

deleting the css: style.css line

but I still can't see the style ..gmail is blocking it

[ghost]

Hi @datawookie
I tried something different .. I tried to send the file as an attachment and I can't see the style if I access it through google chrome whereas If I download the file and open it with Firefox or I open the attachment with my phone I can see the style .. so it's probably something related to my setting in gmail/google chrome .. from your screenshot I can see that you are using chrome as well.. do you have any advice ?

[datawookie]

Hi @ang-ita,

@datawookie I do not understand what you have done

In my experience it's always better to start from a simple example that works and then layer on the complexity until either (1) something breaks or (2) you achieve what you are aiming for.

In the example above I have shared three files (R code, R markdown and CSS) which comprise a complete working example. I suggest starting from these. Either establish that they work for you or that they fail. Either way, since we will then both be looking at the same code (and I won't have to guess what your complete code looks like) we can sort this out.

Thanks, Andrew.

[ghost]

Hi @datawookie your css works for me as well .. however the css option doesn't work when I try to change the font type .. Gmail seems to block the font type .. I tried these two options

CSS file first option @import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,600;1,400&display=swap'); body { font-family: 'Arimo', sans-serif; }

CSS file second option body { font-family: 'Verdana', sans-serif; }

[datawookie]

Yes, I think that GMail doesn't tolerate the @import statement in CSS. I don't think that there is an easy way around this, I'm afraid.

[ghost]

And I think that it doesn't support external images passed as separated html and defined in the css ..

[datawookie]

Yes, unfortunately GMail is a bit picky. You can still make a pretty attractive HTML email using the features which GMail does support though! But I'm afraid that this is a GMail issue and not an {emayili} one (unless we can find a smart way around these limitations).