Бесплатный шаблон BS3-TCSE для DataLife Engine

Основное применение данного шаблона: - Базовый адаптивный каркас для ваших проектов. - Легкая...

Основное применение данного шаблона:
- Базовый адаптивный каркас для ваших проектов.
- Легкая верстка в дальнейшем (так как переставить блоки под ваши нужды в рамках сетки bootstrap не составляет проблем даже для начинающего верстальщика).
- Поддержка ВСЕХ возможностей фрейморка прямо в шаблоне.
- Дописав свои стили, вы легко сможете добавить индивидуальности своему проекту.

Шаблон бесплатный, распространяется на условиях "как есть".
Если у Вас возникли вопросы, оставляйте их в комментариях.

Адаптивная сетка bootstrap 3
В зависимости от ширины экрана браузера - отображает контент оптимальным способом.

Очень маленькие устройство Телефоны (<768px)


Малые устройства Планшеты (≥768px)


Средние устройства Настольные (≥992px)


Большие устройства Настольные (≥1200px)



Модальные окна
В качестве примера работы базовой версии bootsrap реализовали вывод формы добавления комментариев на сайт и панель авторизации через модальные окна.




Полезняшки
- Для меню сайта в шапке и подвале предусмотрены отдельные TPL файлы (menu_header.tpl и menu_footer.tpl).
- Пагинация автоматически подстраивается под ширину страницы (удаляет лишние кнопки в случае маленькой ширины)
Бесплатный шаблон BS3-TCSE для DataLife Engine


- Готовые блоки для отображения рекламы на сайте. Как внутри шаблона полной новости fullstory.tpl так и в боковой панели sidebar.tpl



Исходники:
В основе фреймворк twitter bootstrap 3
Набор иконок fontawesome.
Хорошая русская документация по Bootstrap 3.
Генерация картинок-заглушек, проект img.base64-image.ru

Документация по шаблону в настоящий момент в процессе подготовки.

Скачать шаблон
Скачать файл: Юникод версия шаблона bs3-tcse_utf8.zip [497,42 Kb] (cкачиваний: 1014)
Скачать файл: Windows версия шаблона bs3-tcse_utf8.zip [0 b] (cкачиваний: 815)

Страница шаблона на BitBucket
https://bitbucket.org/tcse/template_tbs3-tcse/

[Из песочницы] Как не надо писать шаблоны для bootstrap

Мало кто сейчас пишет дизайн сайта с нуля — зачем, если есть куча замечательных CSS фреймворков?

Новогодний стикер с Сантой

Продолжаем украшать сайт, добавляя тематические вставки. В этот раз через раздел управление

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

Страница сайта предназначаемая для печати в современном вебе уже не так актуальна как во времена

iPad-шаблон для DataLife Engine

Представляем вашему вниманию шаблон для CMS DLE - специально адаптированный для отображения

дизайн для сайта vintorez.de

TCSE-studio.org переработала бесплатный шаблон для портальной системы DLE для сайта фотографа из

Выпадающее меню в панели номеров страниц Twitter Bootstrap

Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap и мне

20 Комментарии

    1. Данил

      21 января 2015 10:43

      В шаблоне js конфликтуют, не работает быстрое редактирование новости, исправьте!

    1. TCSE

      21 января 2015 18:15

      Цитата: Данил
      В шаблоне js конфликтуют, не работает быстрое редактирование новости, исправьте!


      В конце шаблона main.tpl найдите и удалите строку

      
      <!-- jQuery (necessary for Bootstrap's javascript plugins) -->
      		<script src="https://ajax.googleapis.co
      m/ajax/libs/jquery/1.11.1/jquery.min.js
      "></script>



      кроме этого, можете поменять местами подключаемые библиотеки и содержимое модальных окон.

      Должно стать так

      
      <!-- Login Modal -->
      		<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog"  aria-labelledby="LoginModal"  aria-hidden="true">
      			<div class="modal-dialog">
      				<div class="modal-content">
      					<div class="modal-header">
      						<button type="button" class="close" data-dismiss="modal"><spa
      n aria-hidden="true">&time
      s;</span><span class="sr-only">Закрыть</
      span></button> <h4 class="modal-title">Форма авторизации</h4> </div> <div class="modal-body"> {login} </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal"><i class="fa fa-home"></i> Ясно</button> <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times-circle"></i> Понятно</button> </div> </div> </div> </div><!-- Login Modal --> <!-- Bootstrap javascript --> <script src="https://maxcdn.bootstrapcd
      n.com/bootstrap/3.3.1/js/bootstrap.min.
      js"></script> <script src="{THEME}/js/libs.js"&g
      t;</script>


      Указанный Вами конфликт происходит из-за того, что jquery уже есть в движке и выводится через {headers}.

      Работу быстрого редактирования проверил. Проблем нет.

    1. Alex

      24 января 2015 00:45

      А как насчет регистрации на сайте она так и не доработана до конца?

    1. Andrey1985

      4 февраля 2015 23:16

      Подскажите пожалуйста как сделать чтобы после добавления комментария окно с добавлением само закрывалось?
      Спасибо

    1. TCSE

      16 февраля 2015 18:16

      Цитата: Andrey1985
      как сделать чтобы после добавления комментария окно с добавлением само закрывалось?


      В шаблоне fullstory.tpl
      в самом конце (внутри кода модального окна)

      найдите

      
      <div class="modal-body">
      				{addcomments}
      

      и после него добавте:
      
      <script type="text/javascript">
      $(function(){ $('#dle-comments-form').submit(
      function() { setTimeout(function() { $('#AddcommentsModal').modal(&a
      mp;a mp;a mp;# 39;hide'); }, 500) return false; }); }); </script>


      в итоге содержимое тела модального окна станет таким

      
      <div class="modal-body">
      	{addcomments}
      	<script type="text/javascript">
      $(function(){ $('#dle-comments-form').submit(
      function() { setTimeout(function() { $('#AddcommentsModal').modal(&a
      mp;a mp;a mp;# 39;hide'); }, 500) return false; }); }); </script> </div>


      проверил на сайте ссылка после добавления комментария, модальное окно автоматически закрывается.

      еще один вариант, разместить наш JS непосредственно в файле
      /templates/bs3-tcse/js/libs.js

      добавляем код:
      
      // автоскрытие окна после добавления комментария
      $(function(){
      $('#dle-comments-form').submit(
      function() { setTimeout(function() { $('#AddcommentsModal').modal(&a
      mp;a mp;a mp;# 39;hide'); }, 500) return false; }); });


      в этом случае никаикх правок в исходный вариант fullstoy.tpl делать не нужно.

      PS:
      так-как встроенный в DLE парсер съедает часть тегов, рекомендую смотреть правки на Битбакете

    1. Andrey1985

      16 апреля 2015 11:42

      Не работают кнопки на панели bbcode такие как для вставки ссылки
      кнопка нажимается но в поле невозможно ничего вписать
      http://i48.fastpic.ru/big/2015/0416/e9/
      fa4b40d95d902c18da9c7774bcf192e9.jpg
      У вас на тестовом также не работают, как исправить Спасибо.

    1. Виталий Чуяков

      16 апреля 2015 16:33

      Цитата: Andrey1985
      Не работают кнопки на панели bbcode такие как для вставки ссылки
      кнопка нажимается но в поле невозможно ничего вписать


      Андрей, описанная Вами проблема связана с z-index модальных окон.

      Так получается, что модальное окно Bootsrap перекрывает модальное окно jQueryUI используемые в DLE для системных сообщений.

      Если вы кликните по странице (за пределами окна бутстрапа то увидите окошко с формой добавления ссылок, картинок и прочих выборов цветов.


      Как именно повысить z-index для jQueryUI пока думаем, а вот идея понизить его для окна бутстрап к хорошему не приводит.

      Частично проблему решить удалось



      В набор стилей шаблона добавить

      .ui-dialog {
      z-index: 2000 !important;
      }

      информация о фиксе на битбакете

    1. Andrey1985

      16 апреля 2015 18:41

      Цитата: Виталий Чуяков
      при нажатии окно появляется, но невозможно там что то написать оно не реагирует

    1. TCSE

      17 апреля 2015 12:23

      Цитата: Andrey1985
      при нажатии окно появляется, но невозможно там что то написать оно не реагирует


      Увы пока данную проблему не решить :(

      Выше описали:

      В DLE для диалоговых окон (работают на jQueryUI) указывается минимальная высота z-index: 1005 и уже к ним модификаторы +5 или +10 для различных вариантов: форма для вставки ссылок, окно для выбора смайлов или палитра цветов)

      А в бутсрапе модальные окна имееют минимальный z-index: 1050

      таким образом они ВСЕГДА перекрывают диалоговые окна jQueryUI

      переназначение стиля в

      
      .ui-dialog {
      z-index: 2000 !important;
      }
      


      только переносить оболочку диалогового окна выше модальных окон бутстрапа.

      На данный момент либо стоит отказаться от модального окна в комментариях, либо убрать для посетителей панель ББкодов.

    1. Александр

      19 апреля 2015 11:13

      Добрый день. Как сделать так, чтобы шаблон перестал быть адаптивным? То есть, чтобы одинаково отображался на любом устройстве и не менялся в зависимости от устройства или разрешения экрана?

    1. TCSE

      19 апреля 2015 12:53

      Цитата: Александр
      Как сделать так, чтобы шаблон перестал быть адаптивным?


      Вам будет достаточно в шаблоне main.tpl удалить две строки

      
      <!-- mobile tags -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      



      именно они отвечают за перестроение блоков на мобильных устройствах.

      Если-же Ваша задача убрать адаптивность на десктопах, тогда в шаблонах удалите лишние параметры для сетки:

      допустим, везде, где встречаются стили
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">


      оставьте только одно значение, например col-md-12

      <div class="col-md-12">


      для понимания работы сетки, почитайте эту статью

    1. Владимир

      22 июля 2015 14:34

      Было бы неплохо поддержка под актуальную версию движка и исправления ошибок - (в краткой новости с чередованием через одну новость полностью кликабельна и ссылка ведет на комментарии)

    1. TCSE

      4 сентября 2015 15:31

      Цитата: Владимир
      Было бы неплохо поддержка под актуальную версию движка и исправления ошибок - (в краткой новости с чередованием через одну новость полностью кликабельна и ссылка ведет на комментарии)


      Рекомендуем смотреть ветку на BitBucket
      https://bitbucket.org/tcse/template_tbs
      3-tcse/


      и там же оставлять информацию о найденных ошибках.
      Мелкие фиксы время от времени вносим.

    1. Turist

      29 октября 2015 10:00

      Подскажите пожалуйста, до какой версии DLE он подходит?

    1. TCSE

      3 декабря 2015 20:33

      Цитата: Turist
      Подскажите пожалуйста, до какой версии DLE он подходит?


      копия шаблона из архива в данной публикации для DLE 10.3,
      а актуальная версия на Битбакет уже доработана для DLE 10.6

    1. Валентин

      17 декабря 2015 21:21

      Подскажите как изменить фон <body>?

    1. TCSE

      28 декабря 2015 19:07

      Цитата: Валентин
      Подскажите как изменить фон <body>?


      а в чем проблема прямо в файле main.tpl внести правки?

      <body style="background-color: #164194;">


      или так

      <body class="background-01">


      затем в /css/styles.css

      добавить новый стиль фона

      
      .background-01  {
      background-color: #164194;
      background: url('../images/background_1.png'
      ;) repeat; }

    1. TCSE

      29 февраля 2016 22:30

      В версию шаблона для DLE 10.6 внесен ряд правок.
      Рекомендуем обновить свою версию.

    1. Валентин

      1 ноября 2016 01:10

      Подскажите когда выйдет версия для dle 11.1?

    1. TCSE

      1 ноября 2016 11:27

      релиз шаблона на битбакете https://bitbucket.org/tcse/template_tbs
      3-tcse/ уже поддерживает DLE 11.1
      к сожалению нет времени описать все нововведения и доработки в шаблоне.
      Качайте и тестируйте самостоятельно.

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги