Для самых нетерпеливых сам код файла print.tpl
<!DOCTYPE html>
<html lang="ru">
<head>
<meta content="text/html; charset={charset}" http-equiv=Content-Type>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title}</title>
<style type="text/css">
body, td{font-family:arial,sans-serif;font-size:95%} a:link, a:active, a:visited{color:#0000CC} img{border:0} pre { white-space: pre; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; width: 800px; overflow: auto;}
/* стили цитат и тегов кода */
.scriptcode, .quote { border:2px dotted #bebebe; text-align: left; padding: 5px;}
</style>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- JS -->
<script type="text/javascript" src="/engine/classes/js/jquery.js"></script>
<script type="text/javascript" src="/engine/classes/js/jqueryui.js"></script>
<script type="text/javascript" src="/engine/classes/js/dle_js.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<p class="visible-print">
<img src="http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo" class="img-responsive" alt="site logo" style="height: 100px;">
</p>
<p class="hidden-print">
<a href="{full-link}">
<img src="http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo" class="img-responsive" alt="site logo" style="height: 100px;">
</a>
</p>
</div>
<div class="col-xs-6 col-sm-6">
<p class="pull-right">
<img src="http://api.qrserver.com/v1/create-qr-code/?size=100x100&color=000000&data={full-link}" alt="QR-код адреса статьи">
</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-12">
<span style="font-size: 36px;">{title}</span>
<span class="pull-right">
<button onclick="doClick();" class="btn btn-primary btn-lg hidden-print"><i class="fa fa-print"></i> Печать</button>
</span>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-12">
<p>{full-story}</p>
</div>
</div>
<div style="clear: both"></div>
<hr>
© 2015 Бесплатный шаблон BS3-TCSE для DataLife Engine
<hr>
<a href="javascript:history.go(-1)" class="hidden-print">Вернуться назад</a>
</div>
<script language="javascript">
<!--
function doClick()
{
window.print();
}
//-->
</script>
</body>
</html>
В качестве основы используем
Bootstrap 3 со ссылками на CDN.
Дополнительно для корректной работы спойлеров в шаблон подключены JS файлы непосредственно из движка.
Для отображения логотипа сайта мы используем заглушку http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo
ее необходимо заменить на прямой URL вашего логотипа.
обратите внимание:
логотип указан 2 раза подряд.
в первом случае
<p class="visible-print">
<img src="http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo" class="img-responsive" alt="site logo" style="height: 100px;">
</p>
Класс visible-print входящий в комплект к Bootstrap 3 отображает свое содержимое только на печати.
Но так-же на печати отображаются ВСЕ ссылки встречаемые на странице (что логично, так как иначе будет невозможно получить информацию на бумаге о гиперссылках в тексте.
Что-бы на печати наш логотип не был перечеркнут текстовой ссылкой, мы второй раз добавляем логотип сайта в блоке
<p class="hidden-print">
<a href="{full-link}">
<img src="http://imgholder.ru/320x100/F4F4F4/000000&text=Site+Logo" class="img-responsive" alt="site logo" style="height: 100px;">
</a>
</p>
Класс hidden-print отображается только в браузере и автоматически исчезает на листе бумаги.
Логотип сайта в данном блоке обернут тегами ссылки на основную (не печатную версию) страницы и позволяет в 1 клик вернуться назад (если печатная версия не потребовалась).
О пользе версии для печати в шаблоне для смартфонов.В самом начале такая мысль казалось бредовой, экран смартфона для того и нужен, что-бы не переводить бумагу.
Но диалог печати на Android (при использовании Google Chrome) позволяет воспользоваться шикарной фичей для оффлайн чтения.
При клике на кнопку "печать" в нашем шаблоне print.tpl Хром создаем версию в виде файла PDF
который замечательно сохраняется во внутренней памяти телефона.
Ну а далее Вы по своему усмотрению можете в любой момент времени без интернета прочитать полученную копию страницы в PDF (главное, что-бы была установлена нужная читалка данного формата).
Актуальная версия шаблона страницы для печати доступна на
bitbucketЖивые примеры шаблонов страницы "версия для печати"
blogssmartzone.com - обычная текстовая статья на блоге.
Ana-sm.com - статья с использованием таблиц внутри текста. Если стили таблиц отличаются от bootstrap то их необходимо добавить в print.tpl.
fiat-ac.ru- версия страница автодилера с информацией по акциям. Используются теги цитаты.
stgroup-cpt.ru - пример коммерческого предложения о грузовом транспорте с использованием данных из дополнительных полей движка.
Видео с примером работы "версии для печати" и сохранения из нее файла PDF