Переключение шаблонов мобильной и настольной версии сайта в DLE


Разберем этот пример по шагам.


В качестве шаблона для мобильных устройств будем использовать BS3-TCSE
Нам необходимо папку шаблона переименовать в smartphone так как только с таким именем движок DLE воспринимает шаблон для смартфонов.

Далее в любом удобном месте шаблона размещаем кнопку на ОТКЛЮЧЕНИЕ мобильного шаблона.

<a href="/index.php?action=mobiledisable" class="btn btn-warning btn-block" >Открыть полную версию сайта</a>


Мы обычно в мобильном шаблоне устанавливаем такую ссылку в самом конце страницы.
Переключение шаблонов мобильной и настольной версии сайта в DLE

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

Переключение шаблонов мобильной и настольной версии сайта в DLE

Далее нам необходимо поставить обратную ссылку для ВКЛЮЧЕНИЯ мобильного шаблона при просмотре настольной версии сайта.

Для этого используется ссылка

<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
[not-desktop] текст [/not-desktop]
будет выводить текст заключенный в теги, если посетитель просматривает ваш сайт не со стационарного компьютера или ноутбука.


проверяем с компьютера
Переключение шаблонов мобильной и настольной версии сайта в DLE
ссылка отсутствует.

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

Позволяет для разных устройств использовать разные шаблоны. Основан на коде Генри Хофмана "Хак MobTPL для DLE версия 1.0 от 02.08.2012" В данной версии предлагаются две реализации: 1. OLD... читать далее

Хак MobTPL для DLE (TCSE_MobTPL) - бесплатно

Обновления хака для DLE 10.3 Хак мобильной версии вместо стандартного шаблона smartphone подключает 3 дополнительных шаблона для мобильных устройств: tabletpc- Планшеты... читать далее

Шаблон для сайта Nomini.ru

Разработка оригинального шаблона для сайта автомобильной тематики. Шаблон сверстан под CMS DataLifeEngine версии 7.5 Основной упор сделан на крупные шрифты, облегчающие восприятия информации.... читать далее

Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 3

Продолжаю перевод этого замечательного цикла статей. Предыдущие части: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание чистого... читать далее

Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 4, последняя

Это заключительная часть цикла статей о шаблонах Joomla 1.5. Предыдущие части: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание... читать далее

Блог им. mancocapac / Перевод Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.4

Предыдущие статьи: Создаем шаблон Joomlа по стандартам — часть 1 Создаем шаблон Joomlа по стандартам — часть 1 (продолжение) Создание чистого CSS-шаблона для Joomla 1.5 — часть 2.1 Создание чистого... читать далее

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

  1. #1 написал: Sergey
    Группа: Гости
    10 сентября 2016 14:20

    вариант отличный, но нет возможности для кодировки windows, показывает иероглифы, есть какое-то решение?
    • 0

       

    1. #2 написал: TCSE
      Группа: Администраторы
      26 сентября 2016 17:34

      ваш нужно сменить кодировку файлов шаблона с utf-8 на windows cp-1251

      просто пересохраните файлы в нужной кодировки и никаких проблем с крякозябрами не будет.
      • 1

         

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


@

  • 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

Архив сайта

Реклама на сайте Вызвать специалиста бесплатно, при обращение в ХелпЮзер. . Доставка зимних шин: forward 185 75 r16c. Forward Professional.