Category Archives: CSS

Resolving WordPress Twenty Thirteen Disqus Plugin placement issues

CSS, PHP, WordPress

WordPress’ new 2013 theme is fantastic, but if you’re also using the Disqus plugin, it’s quite likely you’ve noticed an issue with its placement.

Rather than sitting nicely under the main content, it spreads out and occupies the space visually reserved for the sidebar.

A WordPress.org forum thread details some fixes, but I found a quick CSS addition fixed the problem.  Simply add this to the bottom of the 2013 Theme’s stylesheet:

#disqus_thread {
    max-width: 1040px;
    padding: 0 376px 0 60px;
}

This should push the area under the left column and respond appropriately.

I also made a small change to the single.php file, because I feel the ‘post nav’ is better suited to being placed after the comments.  Simply modify the loop of that file to this:

<?php while ( have_posts() ) : the_post(); ?>
  <?php get_template_part( 'content', get_post_format() ); ?>
  <?php comments_template(); ?>
  <?php twentythirteen_post_nav(); ?>
<?php endwhile; ?>

I swapped the order of the comments_template() and twentythirteen_post_nav() function calls.

Hope this helps!

Introducing HTML5 Book Review

CSS, JavaScript, Reviews

Introducing HTML5 Book Cover

About a year ago, it was jQuery. Now it seems to be HTML5 that’s getting everybody excited. Unfortunately, HTML5 has become something of an umbrella term for all sorts of technologies that are no part of it. No matter – there are books to help us discern the fluff from the substance.

Not long ago, I reviewed A Book Apart’s HTML5 for Web Designers; another HTML book that’s getting people excited is Introducing HTML5, co-authored by Bruce Lawson and Remy Sharp. In my review of HTML5 for Web Designers, I was probably a little too polite. Whilst I enjoyed reading it, it was too thin and didn’t cover anything in any great detail. Lawson and Sharp’s effort suggests an introduction, but is much more what you’d expect from a book on the subject.

The diplomatic view on the two books is that they reach out to different audiences, and that the abridged format of HTML5 for Web Designers is appropriate for designers wishing to get the facts without the technical detail. I’m going to stick my neck on the line here and say that Introducing HTML5 is the better book, but since I thrive on technical detail, that will come as no surprise.

The book’s dedicated website has a Chapter listing for the book, which is listed here to give you an idea of what’s covered:

  1. Introduction: why HTML5 exists
  2. Structuring a page
  3. Marking up a blog & the outlining algorithm
  4. Forms
  5. Multimedia (video, audio) markup and APIs
  6. Canvas
  7. Storage
  8. Working Offline
  9. Drag & Drop
  10. Geolocation
  11. Messages, Web Workers & Web Sockets

The website also contains a list of companion links for the book, which is a great source of information and inspiration.

The book’s aimed primarily at developers with a working knowledge of HTML and JavaScript, but I don’t see why designers shouldn’t give it a shot. The book’s well written by two authors who are both conversant with their subject matter, but also deliver it in a fun and flowing way that makes it a worthwhile purchase for anybody interested in working on a new generation of web apps.

New CSS demo for Snow Leopard

CSS

Apple continues to ignore Flash support for the iPhone, and perhaps because of this, it’s pushing ahead with new features based on HTML and CSS. The iPhone has supported proprietary CSS on its Webkit-based browser, but things are now starting to take off on the desktop, as demonstrated by this YouTube video showing CSS on a Snow Leopard OS nightly build version of Safari:

Apparently, the effects on show have been proposed for standard adoption, and if approved, we’ll be seeing this sort of thing on other browsers. Certainly impressive, and it reminds me of Firefox plugin Cooliris. If you haven’t already seen Cooliris doing its stuff, you should check it out. It’s amazing to think that this sort of effect may soon be widely supported by our browsers.