TCSE веб-студия | Наши разработки | Бесплатный шаблон BS3-TCSE для DataLife Engine

Бесплатный шаблон 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/

 обновлений от 16-04-2015

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

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

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

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

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

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

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

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

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

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

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

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

Вконтакте

YouTube

Telegram

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
      к сожалению нет времени описать все нововведения и доработки в шаблоне.
      Качайте и тестируйте самостоятельно.

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

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