Convert Linked CSS File into Inline CSS for your HTML Email

When I about to create an email template for my friend’s email marketing campaign, I came up with free responsive email templates http://mashable.com/2013/11/08/email-responsive-design/. The problem with a linked to a file css like this code line, in its HTML file is that – it will not copy what’s inside in email.css, and it wrecked the aesthetics of your template.

So that fastest thing to do are follows:
Step 1. Open Google Chrome (I don’t use mozilla to avoid extra inaccurate codes)
Step 2. Copy all website content using ctrl+c (Windows_ or ctrl+a (Mac) inline css
On my case, I just minimize the browser’s width or viewport at 600px to compatibility reason or email client

Step 3. Paste it using gmail web email, outlook, or mail app.
Step 4. Send it to dummy email for a test
Step 5. Edit your email template if anything goes wrong and if you’re sure on how does it look,
send it to your recipient.

Inline CSS Tricks for Email Template

Email clients doesn’t recognize external CSS or JS links. By doing it manually will eat your time, by just a simple copy and paste like word document will work. Enjoy!

How to Easily Install Awesome Font Icons into your WordPress

How to Easily Install Awesome Font Icons into your WordPress

Awesome fonts will let you embed social media icons, symbols, shapes, and fonts into WordPress post easily. You don’t need to embed or attached any images, all you have to do is to learn a trick. This article will help you install Awesome Fonts into your WordPress.

See examples here.

entypo font awesome

So let’s get started.

Step1. Download from their official site here and extract.

Step2. Copying and Uploading

Copy and Upload css and font folder into your wordpress theme directory e.g. /wp-content/themes/your-theme/awesome/

Note: /awesome/ you can create your own folder/directory

awesome css fonts

Step3. In your function.php add these following lines.

if ( !function_exists( 'awesome_fonts_css' ) ) {

		function awesome_fonts_css() {
			wp_enqueue_style( 'font-awesome-id', get_template_directory_uri() . '/awesome/css/font-awesome.min.css', false, '3.2.1' );		
		}
}
if (!is_admin())
		add_action('wp_enqueue_scripts', 'awesome_fonts_css');

Optional:
If you want IE7 support, add this few lines in the header.php just after !Doctype declaration.

<!--[if IE 7 ]>
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/awesome/css/font-awesome-ie7.min.css">
<![endif]-->

Step 4. Testing Add New Post Text view (not Visual) add these following lines

<a class="btn" href="#">
  <i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
  <i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
  <i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
  <i class="icon-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#">
  <i class="icon-flag icon-2x pull-left"></i> Font Awesome
Version 3.2.1</a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

Great job! You have successfully installed it. You can get some more examples at

http://fortawesome.github.io/Font-Awesome/examples/

There are many font-face tricks in the internet, I like also Entypo 250+ carefully crafted pictograms, you can also play on that using the same method. Also check the compatibility across browsers for the finest showcasing it.

Although there is a plugin that you can play relating to this feature called FontAwesomeIcons, but our main goal here is to make our WP codes clean and free from excessive files that might cause your page’s slow loading time.

Free Quality Web Capture or Screenshot Apps for Mac

I want to share you on how to do a web capture or screenshot using your Macbook. Why you need to buy premium apps if Macbook has its own native app to execute web capture. Whether you are using Snow Leopard or Mountain Lion, I hope it will work for you.

Screen Capture using Grab

This app can be found at Applications > Utilities or simply type “Grab” in your Spotlight.

grab screenshot macbook

Easy Screen Shot using Mac Keyboard Shortcuts

If you want to save it in your desktop

Save picture of screen as file (Option + Command + 3)
Save picture of selected area as file (Option + Command + 4)

If you want to save it in your Clipboard

Copy picture of screen to the clipboard (Control + Option + Command + 3)
Copy picture of selected are the clipboard (Control + Option + Command + 3)

See this screenshot
web screenshot