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

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

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


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



6 января 2015  20   14 644   шаблон, бесплатно   Версия для печати
Наши разработки

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

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

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

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

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

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

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

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

Представляем вашему вниманию шаблон для CMS DLE - специально адаптированный для отображения контента на планшетных компьютерах Apple iPad Основные моменты: - верстка html5 - метатеги для iOS... читать далее

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

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

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

Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap и мне потребовалось добавить туда выпадающее меню (для выбора вариантов сортировки и количества элементов на... читать далее

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

  1. #1 написал: Данил
    Группа: Гости
    21 января 2015 10:43

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

       

  2. #2 написал: 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}.

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

       

  3. #3 написал: Alex
    Группа: Гости
    24 января 2015 00:45

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

       

  4. #4 написал: Andrey1985
    Группа: Гости
    4 февраля 2015 23:16

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

       

  5. #5 написал: 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 парсер съедает часть тегов, рекомендую смотреть правки на Битбакете
    • 0

       

  6. #6 написал: Andrey1985
    Группа: Гости
    16 апреля 2015 11:42

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

       

  7. #7 написал: Виталий Чуяков
    Группа: Гости
    16 апреля 2015 16:33

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


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

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

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


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

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



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

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

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

       

  8. #8 написал: Andrey1985
    Группа: Гости
    16 апреля 2015 18:41

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

       

  9. #9 написал: TCSE
    Группа: Администраторы
    17 апреля 2015 12:23

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


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

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

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

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

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

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

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


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

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

       

  10. #10 написал: Александр
    Группа: Гости
    19 апреля 2015 11:13

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

       

  11. #11 написал: 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">


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

       

  12. #12 написал: Владимир
    Группа: Гости
    22 июля 2015 14:34

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

       

  13. #13 написал: TCSE
    Группа: Администраторы
    4 сентября 2015 15:31

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


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

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

       

  14. #14 написал: Turist
    Группа: Гости
    29 октября 2015 10:00

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

       

  15. #15 написал: TCSE
    Группа: Администраторы
    3 декабря 2015 20:33

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


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

       

  16. #16 написал: Валентин
    Группа: Гости
    17 декабря 2015 21:21

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

       

  17. #17 написал: 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; 
}
    • 0

       

  18. #18 написал: TCSE
    Группа: Администраторы
    29 февраля 2016 22:30

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

       

  19. #19 написал: Валентин
    Группа: Гости
    1 ноября 2016 01:10

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

       

  20. #20 написал: TCSE
    Группа: Администраторы
    1 ноября 2016 11:27

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

       

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


@

  • 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