Бесплатный шаблон 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качиваний: 1029)
Скачать файл: Windows версия шаблона bs3-tcse_utf8.zip [0 b] (cкачиваний: 830)

Страница шаблона на 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 и мне потребовалось добавить...

Подробнее
  1. В шаблоне js конфликтуют, не работает быстрое редактирование новости, исправьте!
    Данил Данил 21 января 2015 10:43 Ответить
  2. Цитата: Данил
    В шаблоне 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}.

    Работу быстрого редактирования проверил. Проблем нет.
    TCSE TCSE 21 января 2015 18:15 Ответить
  3. А как насчет регистрации на сайте она так и не доработана до конца?
    Alex Alex 24 января 2015 00:45 Ответить
  4. Подскажите пожалуйста как сделать чтобы после добавления комментария окно с добавлением само закрывалось?
    Спасибо
    Andrey1985 Andrey1985 4 февраля 2015 23:16 Ответить
  5. Цитата: 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 парсер съедает часть тегов, рекомендую смотреть правки на Битбакете
    TCSE TCSE 16 февраля 2015 18:16 Ответить
  6. Не работают кнопки на панели bbcode такие как для вставки ссылки
    кнопка нажимается но в поле невозможно ничего вписать
    http://i48.fastpic.ru/big/2015/0416/e9/
    fa4b40d95d902c18da9c7774bcf192e9.jpg
    У вас на тестовом также не работают, как исправить Спасибо.
    Andrey1985 Andrey1985 16 апреля 2015 11:42 Ответить
  7. Цитата: Andrey1985
    Не работают кнопки на панели bbcode такие как для вставки ссылки
    кнопка нажимается но в поле невозможно ничего вписать


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

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

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


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

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



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

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

    информация о фиксе на битбакете
    Виталий Чуяков Виталий Чуяков 16 апреля 2015 16:33 Ответить
  8. Цитата: Виталий Чуяков
    при нажатии окно появляется, но невозможно там что то написать оно не реагирует
    Andrey1985 Andrey1985 16 апреля 2015 18:41 Ответить
  9. Цитата: Andrey1985
    при нажатии окно появляется, но невозможно там что то написать оно не реагирует


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

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

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

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

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

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

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


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

    На данный момент либо стоит отказаться от модального окна в комментариях, либо убрать для посетителей панель ББкодов.
    TCSE TCSE 17 апреля 2015 12:23 Ответить
  10. Добрый день. Как сделать так, чтобы шаблон перестал быть адаптивным? То есть, чтобы одинаково отображался на любом устройстве и не менялся в зависимости от устройства или разрешения экрана?
    Александр Александр 19 апреля 2015 11:13 Ответить
  11. Цитата: Александр
    Как сделать так, чтобы шаблон перестал быть адаптивным?


    Вам будет достаточно в шаблоне 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">


    для понимания работы сетки, почитайте эту статью
    TCSE TCSE 19 апреля 2015 12:53 Ответить
  12. Было бы неплохо поддержка под актуальную версию движка и исправления ошибок - (в краткой новости с чередованием через одну новость полностью кликабельна и ссылка ведет на комментарии)
    Владимир Владимир 22 июля 2015 14:34 Ответить
  13. Цитата: Владимир
    Было бы неплохо поддержка под актуальную версию движка и исправления ошибок - (в краткой новости с чередованием через одну новость полностью кликабельна и ссылка ведет на комментарии)


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


    и там же оставлять информацию о найденных ошибках.
    Мелкие фиксы время от времени вносим.
    TCSE TCSE 4 сентября 2015 15:31 Ответить
  14. Подскажите пожалуйста, до какой версии DLE он подходит?
    Turist Turist 29 октября 2015 10:00 Ответить
  15. Цитата: Turist
    Подскажите пожалуйста, до какой версии DLE он подходит?


    копия шаблона из архива в данной публикации для DLE 10.3,
    а актуальная версия на Битбакет уже доработана для DLE 10.6
    TCSE TCSE 3 декабря 2015 20:33 Ответить
  16. Подскажите как изменить фон <body>?
    Валентин Валентин 17 декабря 2015 21:21 Ответить
  17. Цитата: Валентин
    Подскажите как изменить фон <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; }
    TCSE TCSE 28 декабря 2015 19:07 Ответить
  18. В версию шаблона для DLE 10.6 внесен ряд правок.
    Рекомендуем обновить свою версию.
    TCSE TCSE 29 февраля 2016 22:30 Ответить
  19. Подскажите когда выйдет версия для dle 11.1?
    Валентин Валентин 1 ноября 2016 01:10 Ответить
  20. релиз шаблона на битбакете https://bitbucket.org/tcse/template_tbs
    3-tcse/ уже поддерживает DLE 11.1
    к сожалению нет времени описать все нововведения и доработки в шаблоне.
    Качайте и тестируйте самостоятельно.
    TCSE TCSE 1 ноября 2016 11:27 Ответить

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

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