Implications Of Thinking In Blocks Instead Of Blobs

Great smashingmagazine.com article on the new WordPress editor.

https://www.smashingmagazine.com/2018/11/implications-blocks-blobs/

Thank you for reading!

Posted in WordPress | Tagged , | Comments Off on Implications Of Thinking In Blocks Instead Of Blobs

Getting Started with WordPress Plugin Development

Great article on creating WordPress plugins.

Plugins are PHP scripts that alter your website – basically, bits (or even lots!) of code that can be uploaded to your WordPress install to extend and expand the functionality of your site, without having to hack the core code.

Thank you for reading!

Posted in WordPress | Tagged , , | Comments Off on Getting Started with WordPress Plugin Development

Target Outlook App with body[data-outlook-cycle]

It’s all really in the headline. If you want to target the Outlook app, use [data-outlook-cycle] selector. If you apply it to the <body>, then it will cover everything.

body[data-outlook-cycle] .outlookApp_show {display:block !important;color:#ff0000;}
body[data-outlook-cycle] .outlookApp_hide {display:none !important;}

Thank you for reading!

Posted in Email Dev | Tagged , , , | Comments Off on Target Outlook App with body[data-outlook-cycle]

Interactive Email – checkbox hack

I’m going to just post an example instead of going into all the detail, but here is some detail.

This hack only works in Webkit email clients, which is pretty much IOS devices, Outlook on the Mac, Apple mail, and maybe others, but doesn’t work in Outlook in general, Gmail, Yahoo, etc.

To target Webkit email clients, we use this media query:

@media screen and (-webkit-min-device-pixel-ratio: 0)

In this example, we are using the CSS Psudo element :checked to create a click event listener. Part of the hack is that we can use the <label> tag to wrap around content we want clickable. The actual form element being clicked stays hidden.


Styles
input, .webkit_content {display: none;}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .webkit-hide {display:none;}
  #A1_result {display:none;}
  #A1:checked ~ #A1_result {display:block}
}
HTML
<div class="webkit-hide">
  Show this if it is not a Webkit email client
</div>
<!-- [if (gte mso 9)|(IE)]>
<!-->
<form class="webkit_content">
  <label for="A1">
    <input id="A1" name="radio_btn" type="radio" value="">
    Click here!
  </label>
    <div id="A1_result">
      Show this content when you click on "Click here!" above.
    </div>
  </form>
<!--<![endif]-->

Thank you for reading!

Posted in CSS3, Email Dev | Tagged , , , | Comments Off on Interactive Email – checkbox hack