Переключение шаблонов мобильной и настольной версии сайта в DLE
В качестве шаблона для мобильных устройств будем использовать BS3-TCSE
Нам необходимо папку шаблона переименовать в smartphone так как только с таким именем движок DLE воспринимает шаблон для смартфонов.
Далее в любом удобном месте шаблона размещаем кнопку на ОТКЛЮЧЕНИЕ мобильного шаблона.
<a href="/index.php?action=mobiledisable" class="btn btn-warning btn-block" >Открыть полную версию сайта</a>
Мы обычно в мобильном шаблоне устанавливаем такую ссылку в самом конце страницы.

После того как готовый шаблон загрузите на сайт, обязательно проверьте включена ли поддержка работы смартфон-версии в движке.

Далее нам необходимо поставить обратную ссылку для ВКЛЮЧЕНИЯ мобильного шаблона при просмотре настольной версии сайта.
Для этого используется ссылка
<a href="/index.php?action=mobile">Перейти на мобильную версию</a>
Ее в отличии от смартфон-шаблона лучше ставить ближе к шапке сайта.
Но так как отображать ее имеет смысл только на мобильных устройств то в основном шаблоне сайта ссылку дополнительно необходимо обернуть спец-тегами
[not-desktop]
<div class="mobile-templates">
<a href="/index.php?action=mobile" class="btn btn-warning btn-block" >Перейти на мобильную версию</a>
</div>
[/not-desktop]
После этого согласно документации к движку DLE
будет выводить текст заключенный в теги, если посетитель просматривает ваш сайт не со стационарного компьютера или ноутбука.
проверяем с компьютера

ссылка отсутствует.
проверяем с телефона

ссылка отображается там где и следует.
содержимое CSS класса mobile-templates
необходимо отредактировать по своему вкусу и добавить в свой набор стилей основного шаблона.
В нашем случае он выглядит так
в файле {THEME}/style/styles.css
добавить:
.mobile-templates {
width: 300px;
position: absolute;
left: 10%;
top: 100px;
text-align: center;
background-color: transparent;
border: 4px solid #fff;
padding: 10px;
font-size: 16px;
z-index: 20;
}
В шаблон main.tpl после тегов
<body>
{AJAX}
добавить наш блок с кнопкой переключения
[not-desktop]
<div class="mobile-templates">
<a href="/index.php?action=mobile" class="btn btn-warning btn-block" >Перейти на мобильную версию</a>
</div>
[/not-desktop]
Это все.
В качестве дополнения короткое видео на 15 секунд о том как работает такое переключение шаблонов на android смартфоне
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Хак MobTPL для DLE (TCSE_MobTPL) - бесплатно
Обновления хака для DLE 10.3 Хак мобильной версии вместо стандартного шаблона smartphone подключает 3 дополнительных шаблона для мобильных устройств: tabletpc- Планшеты (Android/IOS/WindowsPhone)(втч... читать далее
Хак MobTPL для DLE
Позволяет для разных устройств использовать разные шаблоны. Основан на коде Генри Хофмана "Хак MobTPL для DLE версия 1.0 от 02.08.2012" В данной версии предлагаются две реализации: 1. OLD Version -... читать далее
Версия сайта для слабовидящих - как сделать для DLE
Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих"... читать далее
Шаблон для сайта Nomini.ru
Разработка оригинального шаблона для сайта автомобильной тематики. Шаблон сверстан под CMS DataLifeEngine версии 7.5 Основной упор сделан на крупные шрифты, облегчающие восприятия информации.... читать далее
Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 3
Продолжаю перевод этого замечательного цикла статей. Предыдущие части: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание чистого... читать далее
Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.4
Предыдущие статьи: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1 Создание чистого... читать далее
Комментарии (2)
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru html HTML html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте
аренда майбах на свадьбу Москва . raybradbury.ru . Изготовление рекламных стендов для выставок, уф печать на пластике. Большой выбор стендов.