[Tutorial] Allow Media Queries & Style Tags in NetCommunity Emails

Chris McGrane

Hello everyone -


My organization uses NetCommunity v6.64. By default, NetCommunity wraps all "<style>" tag instances with HTML comments. While I can understand the benefit of inlining styles in emails, it is now common practice to include Media Queries within Email Templates, allowing templates to display properly on devices of different sizes. 

If you use Chrome, you can prevent NetCommunity from commenting-out styles.

1.) Chrome uses "Extensions" to add extra functionallity to the browser. I've gone ahead and packaged mine to save you some work. You can download it from my website here: http://chrismcgrane.com/netcommunity/email.zip

2.) Unzip that file and locate "nc.crx". Drag that file to your Desktop.

3.) In Chrome, go to "chrome://extensions/". If that does not work, just go to Settings > Extensions.

4.) Drag the file you placed on your Desktop into the browser window, it should install the Extension and you should notice an icon with an "A" appear on the top right of your URL bar.

That's it! - Now when you edit an email in NetCommunity, it will not strip out your style tags.

Feel free to reply to this thread or private message me if you are having trouble.


- Chris






 

Andrew O'Hoski

Is commenting out styles a new 'feature'?  I created a bunch of templates in February that are now terrible and I could have sworn they were all fine during my tests a couple months ago.


Did you reach out to Blackbaud about this yet?  Any explanation from them?


Thanks!  I'll give the Chrome extension a try.

Chris McGrane

I like that you quoted 'feature' as it is really a step backwards. We have always dealt with this issue, so I assume it's here to stay. My fix should restore the ability to create nicely formatted emails that display correctly cross-browser.


-Chris

Chris McGrane

Andrew, did the extension work for you?


CM

Andrew O'Hoski

I got a message when opening Chrome that said "unsupported extensions have been disabled".


On another note, I found out the main problem was that GMail disables CSS for custom ID and CLASS selectors.  I don't know why this was working in February, but GMail will now only allow inline CSS.

Chris McGrane

Andrew -


I forgot to mention that, before dragging the extension to your browser, you must select the Developer Checkbox. Chrome has disabled extensions by default if they are not on the Chrome Webstore.




Also, Gmail may have disabled Media Queries, however, iOS mail supports this. It's important to inline emails before sending them using Mailchimp Inliner or something similar.


Chris

 

Andrew O'Hoski

Man, wish I knew about Mailchimp's Inliner a couple days ago.  I just finished a lot of copy and pasting.  Thanks!