Шаблон версии для печати print.tpl для DLE

Шаблон версии для печати print.tpl для DLE

Для самых нетерпеливых сам код файла print.tpl



И комментарии по коду шаблона:

В качестве основы используем 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 для DLE

При клике на кнопку "печать" в нашем шаблоне print.tpl Хром создаем версию в виде файла PDF
который замечательно сохраняется во внутренней памяти телефона.

Шаблон версии для печати print.tpl для DLE

Ну а далее Вы по своему усмотрению можете в любой момент времени без интернета прочитать полученную копию страницы в PDF (главное, что-бы была установлена нужная читалка данного формата).

Шаблон версии для печати print.tpl для DLE

Актуальная версия шаблона страницы для печати доступна на bitbucket

Живые примеры шаблонов страницы "версия для печати"
  • blogssmartzone.com - обычная текстовая статья на блоге.
  • Ana-sm.com - статья с использованием таблиц внутри текста. Если стили таблиц отличаются от bootstrap то их необходимо добавить в print.tpl.
  • fiat-ac.ru- версия страница автодилера с информацией по акциям. Используются теги цитаты.
  • stgroup-cpt.ru - пример коммерческого предложения о грузовом транспорте с использованием данных из дополнительных полей движка.

    Видео с примером работы "версии для печати" и сохранения из нее файла PDF


    Уважаемые посетители,
    Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
    Обратная связь
    Наш специалист ответит вам в течении суток.

    Шаблон версии для печати print.tpl для DLE
    шаблон бесплатно, адаптация от 500 рублей.
    http://tcse-cms.com/works/654-print-tpl-dle.html | Наши разработки
    Заказать мод


  • Похожие публикации

    Оформление заглушки для сайта на время его обновления или ремонта

    Время от времени возникает необходимость отключить сайт для проведения профилактических работ по обновлению скриптов. В движке ДЛЕ для этого есть специальный шаблон, позволяющий выводить статическую... читать далее

    Веб-дизайн / CSS для начинающих. CSS кнопки это просто

    Решил я начать новую серию статей — «CSS для начинающих», надеюсь, будет полезно многим. Первый урок будет посвящен кнопкам… Источник: Уроки CSS на Хабрахабре... читать далее

    Блог им. madduck / Print.css — стиль для печати для wordpress

    Я заметил на многих сайтах отсутствует отдельный стиль для печати. То есть, если кто-то захочет распечатать какой-либо материал с сайта, то на бумаге он будет выглядеть почти так же как и в сети,... читать далее

    Блог им. RayZ / Задача: Кнопки в Internet Explorer и волшебные пространства

    Столкнулся с проблемой укрощения кнопок под Internet Explorer. Для наглядности имеем следующий код: <html>   <style type="text/css">     .hacked {       width:auto;... читать далее

    Блог им. Andruhon / Проблема с css в firefox при указанном doctype

    Сегодня пол часа потратил на необычную для меня проблему: Документ во всех браузерах отображается нормально, а в файрфоксе почему-то не работали стили. Проблема возникла только, после помещения сайта... читать далее

    DJ Vaden - 2 STEPs to LOVE Mixed CD

    собственно немогу не поделиться - поднимает настроение до небес ) как давно я не слышал хорошего 2 step а ведь музыка данного направления была крайне популярна в начале 2000 годов.... читать далее

    Прокомментировать


    @

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Вопрос:

    Путин Владимир Вл....

    Ответ: *

    Кликните на изображение чтобы обновить код, если он неразборчив