Newsletter CSS - Blockquotes

The image is selef explanatory - but in a nutshell why does using ‘>’ in my post make the blockquote just not appear ?

I was using some CSS to eliminate the built-in header and it ended up also stripping my blockquotes. I took that CSS out and quotes reverted to normal.

oh - now THAT is very interesting. I flat earthed everything yesterday - but that built-in header is still there - going to take a look right now!

I’ve changed the detail page for a newsletter to always have the “Preview” button even if an email has already been sent to subscribers. That way you can repeatedly send a preview to yourself for an older email to test CSS changes. I’m also adding a class name for the built-in header so it’s easier to hide, but that change hasn’t rolled out yet.

2 Likes

But how do you edit a sent newsletter? I don’t see an option to do that.

I think it’s literally as Manton says: testing old issues. Seems like a quickly-provided stopgap before a full Preview feature is added.

So how do I test CSS changes if I can’t edit an older email?

Here’s how I think it should now work:

  • CSS for newsletters is edited in theme settings →
  • You then send the preview of the old email →
  • You’ll receive the unedited content of the old email with the newly changed CSS.

Manton posted about styling newsletters, whilst Amit Gawande posted a super useful guide for making changes.

1 Like

That’s right. You can’t edit the email text, but you can still edit the CSS under the Design screen and then re-send the email to see how the changes look in email clients. When sending an email newsletter, Micro.blog always takes the latest CSS and applies it.

1 Like

Ah! Yes. That makes sense. Thanks for clarifying.

This is great! Is there a CSS class name for the footer yet?

There’s not, but I’ll add one.

1 Like

Does that mean that if I want quotes to work normally, I can’t have custom CSS? I’m asking this question as a complete CSS amateur and borrowing from the generosity of others.

Partially related question - on what day of the month do monthly newsletters go out? The last day of the current month or the first day of the next?

Not at all. I’m using custom CSS and I’m really pleased with the way it looks. The method I was using to eliminate the header, though, was also hiding the blockquotes. Manton is adding a CSS selector for the header element, so that it can be targeted directly, which should allow for it to be hidden without causing an issue with other elements.

First day of the month.

1 Like

The header/footer CSS selector change has been rolled out. The class names are microblog_header and microblog_footer. For example, to completely hide the header you should be able to use something like this:

.microblog_email .microblog_header {
  display: none;
}

I recommend keeping the footer because it has the unsubscribe link.

Long term, I’m planning to move the email template into Hugo, so that it can be processed just like other blog pages. This would open up full customization of HTML, including to Micro.blog plug-ins too, so people could make plug-ins for different email designs. That change will take longer but seems like the natural next step.

What change did you make because now I’m facing the same issue? So does @amit apparently who is the original author of the CSS I’m using.

Yeah, it has got to do with the CSS that hides the header – .microblog_email p:nth-of-type(1). May have to find a fix for this. A CSS selector for header (and preferably other newsletter elements like posts, intro, footer) will really help.

We do have the selector for headers (.microblog_header) and footers (.microblog_footer) now. So you replace the .microblog_email p:nth-of-type(1) with .microblog_header and you should see the blockquotes working. I have verified with mine (thank you for the always available preview), it works. I have also updated the original post. @pratik