Tag Archives: css

When the printing from wordpress child theme is not working

I wanted to allow a PDF download on my blog. Unfortunately this turned out to be complicated for multiple problems including WP and browser caching, CSS failure and mPDF misdirection. Here are the solutions.

Issue 1: If you are editing the print.css but the browser shows the old version: Comment out or delete the reference to parent in child css

/*
Theme Name: Twenty Twenty Child 1
Theme URI: http://wordpress.org/themes/twentytwenty
@import url('../twentytwenty/style.css');
*/

and include versioning in header.php

function my_theme_enqueue_styles() { 
  wp_enqueue_style( 'twentyfourteen', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'twentyfourteen-child1', get_stylesheet_directory_uri() . '/style.css',  array(), filemtime(get_template_directory() . '/style.css'), false );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

 

Issue 2: css editing is applied but printing is still not correctly formatted, possible due to higher specificity of formatting instructions in the parent theme.

Solution: This is a bit tricky as it needs try and error to find the offending element. Chrome can show the print version in the browser as shown on this SO thread

https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode

Then add the important flag to the specific css rule..

@media print {
   .myelement1 { display: none !important; }
}

 

Issue 3: mPDF pulls the screen not the print version. Solution: Create an own mpdf media tag.

@media mpdf {
  #sidebar, #header {
    display:none !important;
  }
  blockquote, table, pre {
    page-break-inside:avoid !important;
    font-size: 0.7em  !important;
  }
}

CC-BY-NC

htaccess nightmare

I have rewritten my image website last week, collapsing 25 php scripts into 1 while combining it with another 5 javascript files. The interesting point is that most of the server side layout moved now to the client side.
The website was running basically for 20 years while I felt it is too time consuming now to update it one more time always running at risk of some security flaws.
There is now now a true responsive layout, image upload is now done by a web form and no more by FTP. I am also not storing any more different image sizes while all the processing including watermarking is now done on the fly. This required however some more sophisticated rules for site access.
Writing the htaccess rules was the most complicated. thing where even chatGPT failed.  Only the rules tester helped me out…


CC-BY-NC

Link out symbol

I have been looking for a wikipedia-style link out symbol (wikipedia uses a svg symbol). Some websites recommend font awesome symbol /f08e others are in favor of the north east arrow #x2197; while I modfied now a code pen by thiago for the css of this wordpress child theme

  a:not([href*='wjst.de'])::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
  }

CC-BY-NC

How to switch divs on or off – a super neat trick

I want to hide a div container as it clutters my otherwise clean picture display. And I found some javascript – free, CSS only solution: the  checkbox hack. Modified it a bit while it looks now like this

<label for="t">license me...</label>
<input id="t" type="checkbox" />
<div id="buy">price</div>
input[type=checkbox] {position: absolute;
 top: -9999px; left: -9999px; }
label { border:none; cursor: pointer; }
label:hover { border-bottom:1px solid #444; }
div#buy { display:none; }
input[type=checkbox]:checked ~ div#buy
 { display: block; }

You get the idea: whenever the label of the unvisible checkbox is being clicked, the display state of the div container is changing between on to off.


CC-BY-NC

Let your visitors switch background color

There seem to be million of ways to do that – here is the most parsimonious solution that works for me even under difficult conditions and in different browsers.

// should be run in a $(document).ready(function(){ bracket });
// if there is no cookie we set one
if (document.cookie.indexOf("color")!== -1 {
  document.cookie = "color=white";
}
// we need a body class without any background definition
// and a class for body.black that has background:black
if (document.cookie.indexOf("black") === -1) {
  // switch to the new .black class
  $("body").toggleClass("black");
  // this is also possible in the iframe
  $(#iframe").contents().find("body").toggleClass("black");
}
// link or whatever is being clicked for the effect
$(".place").click(function () {
if (document.cookie.indexOf("white") !== -1) {
  document.cookie = "color=black";
}
else {
  document.cookie = "color=white";
}
// reload page with a small delay
setTimeout( function() { location.reload() }, 250 );

CC-BY-NC

Forcing two divs in one row

In my picture gallery I show two divs side by side. Div1 is variable and needed only on a few pages. Div2 is large, complicated and takes quite some time to load as there are numerous pictures and jquery actions.
div
Rather simple setup, isn’t it? The rendering should be smooth (both divs loading at final position and not jumping around at the end of page loading) and fluid (working on smaller devices as well) and without any dynamic stylesheet language.
This simple task turned out to be complicated. Continue reading Forcing two divs in one row


CC-BY-NC

How browsers render elements

This is a bit of mystery for me but fortunately there is some information out there, mainly the article “How browsers work” by Tali Garsiel.
I was a bit annoyed by the current Twentyfourteen WordPress Template that renders first some lines before getting towards the final layout. I am experimenting therefore with keyframe encapsulating as I did not find any better method. Continue reading How browsers render elements


CC-BY-NC