(Solved) Print glitch with Reverie by Theme Fortress

Reverie by Theme Fortress printing glitch discovered and solved.

Hi everyone,
I found a glitch in the ‘/css/foundation.css’ file within the Reverie WordPress theme which is based on Zurb’s Foundation 4.

If you try to print any page on a Reverie themed site a blank page is printed.

line number 2798 through 2800 on Reverie’s version of the foundation.css reads

@media print {
  div:not(.reveal-modal) {
    display: none; } }

Foundation 4’s version of the foundation.css reads

@media print {
  .reveal-modal {
    background: white !important; } }

Simply swapping out the Reverie version of the code for the Foundation 4 version fixes the problem.

The glitch is caused by how the css is written in Reverie
div:not(.reveal-modal) {display: none; }
tells the browser display: none unless the class tag is named reveal-modal, any div without that specific class tag is removed when printed. This is likely an oversight intended to hide modal elements.

More details on how to use div:not here
https://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/

For an example of the error try printing any page on Reverie’s site at https://themefortress.com/demo/ as of this post the error occurs on their site as well.

By comparison try printing any page using Foundation 4.