Шаблон версии для печати 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 рублей.
    https://tcse-cms.com/works/654-print-tpl-dle.html | Наши разработки
    Заказать мод


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

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

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

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

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

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

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

    DJ Vaden - 2 STEPs to LOVE Mixed CD

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

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

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

    Блоки комментариев на css без изображений

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

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


    @

    • 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