by ·Comments Off on More concise CSS print rendering for the Flat WordPress theme

The Flat template is—in my opinion—a simple and elegant WordPress template.

Still, when printing blog pages, the output contains a large amount of whitespace.

CSS Customization

Using the template customization feature of WordPress, I adjusted the CSS of the Flat template to suit my needs.

The following CSS fragment is a suggestion for producing a more concise print rendering using the Flat WordPress theme.

@media print {
  .site-info, .entry-meta, .nav-links, .tags-links, a::after, #bit, .fa {
    display: none;
  }
  #masthead .site-title, .hentry .entry-title {
    font-size: 30px;
    font-family: Handlee;
  }
  #masthead .site-title {
    padding-bottom: 0px;
  }
  .post {
    padding-top: 0px;
  }
  .hentry .entry-content {
    padding-top: 0px;
  }
  h2 {
    font-size: 24px;
    margin-top: 5px;
  }
  table.easy-table {
    max-width: 90%;
  }
  .easy-table th, .easy-table td {
    padding-top: 1px;
    padding-bottom: 1px;
  }
}

Testing

I tested the print template live inside Firefox using the Developer Toolbar (Tools → Web Developer → Developer Toolbar) and the command media emulate print.

Chromium also offers a similar functionality in the Developer Tools (Ctrl+Shift+I) → Menu → More tools → Rendering → Emulate CSS media.

by ·0 Comments

For security reasons, WordPress does not allow to upload XML files into the media library, by default. To alleviate this limitation, you have to add the following PHP code to functions.php in your current theme.

add_filter('upload_mimes', 'custom_upload_xml');
 
function custom_upload_xml($mimes) {
    $mimes = array_merge($mimes, array('xml' => 'application/xml'));
    return $mimes;
}

In my setup, the path to this file is [WORDPRESS_ROOT]/wp-content/themes/[MY_THEME]/functions.php.

Thanks to Ernie Leseberg for writing about this solution.