HTML Templates Documentation

Настройка вложеных модулей и расширений

Google webfonts

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

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

Вместо них будут отображаться стандартные шрифты. Поэтому веб-разработчики ищут альтернативные решения. В наших шаблонах пользовательские шрифты добавляются при помощи самой популярной технологии — Google Web Fonts.

Процедура подключения Google шрифтов детально описана в оффициальной документации https://developers.google.com/fonts/docs/getting_started.

Также вы можете обратиться к туториалу по работе с Google Web Fonts Как работать со шрифтами Google web Fonts.

Не удается загрузить Google Fonts:

  1. Откройте 'site\index-*.html' или 'site\css\style.css' файлы
  2. Найдите строку:

    //fonts.googleapis.com/css?family=[---your_web_font_name_here---]
  3. Замените её следующим:

    //fonts.useso.com/css?family=[---your_web_font_name_here---]

Использование дополнительных наборов символов Google Fonts

Если текстовое содержимое Вашего сайта написано не на английском языке, а на языке, шрифт которого будет содержать отличные от латинских символы, то вам может понадобиться расширение набора символов. Для того, чтобы добавить дополнительный charset к целевому шрифту Google Fonts, на странице сервиса Google Fonts необходимо выполнить следующую последовательность действий:

  1. Выбрать данный шрифт (например, Open Sans), нажав на кнопку Add to Collection
  2. В появившейся панели нажать на кнопку Use. Откроется страница настройки шрифтов.
  3. На этой странице, в пункте “2. Choose the character sets you want:” выбрать необходимые кодировки шрифта.
  4. В пункте 3, выбрать вкладку “@import”
  5. Скопировать содержимое данной вкладки
  6. Вставить скопированное содержимое вместо строки подключения старой версии шрифта в файле style.css.

RD Google Map

В шаблонах используется плагин по работе с Google Map нашей разработки RD Google Map.

Плагин поддерживает следующие настройки:

  • Замена координат карты;
  • Добавление пользовательких маркеров на карту;
  • Добавление всплывающих окон к маркерам;

Смена координат карты

Для замены координат карты на Ваши необходимо в .html файле с картой в блоке

<div id=”google-map” class=”map_model”></div>

указать два data атрибута: data-x (северная широта) и data-y (западная долгота). В результате у вас получится такая строка кода:

<div id=”google-map” class=”map_model” data-x="-73.9994068" data-y="40.643180"></div>

Сами координаты можно получить с помощью сервиса Google Maps. Для этого необходимо в целевом участке карты нажать правую кнопку мыши и выбрать пункт “Что здесь”. В открывшемся модальном окне необходимые координаты будут под названием локации, где первое число это data-x, второе data-y.

Если не указать здесь данные координаты, они будут взяты по умолчанию со скрипта.

Также обращаем ваше внимание, что часто координаты путают местами и карта показывает неправильный адрес в другом полушарии Земли.

Добавление пользовательких маркеров на карту

Для того, чтобы добавить пользовательский маркер на карту необходимо в .html файле с картой в список

<ul class=”map_locations”></ul>

добавить новый пункт

<li></li>

и определить в него два data атрибута: data-x (северная широта) и data-y (западная долгота). В результате получится строка кода:

<li data-x="-73.9994068" data-y="40.643180"></li>

Без указанных координат скрипт проигнорирует пустой пункт списка и маркер не отобразится.

Полный примера кода будет выглядеть следующим образом:


<div class="map">
    <div id="google-map" class="map_model"></div>

    <ul class="map_locations">
        <li data-x="-73.9874068" data-y="40.643180">
            <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                <span>800 2345-6789</span>
            </p>
        </li>
        <li data-x="-72.9874068" data-y="39.643180">
            <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
                <span>800 2345-6789</span>
            </p>
        </li>

    </ul>
</div>
    

- где:


<li data-x="-73.9874068" data-y="40.643180">
    <p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45.
        <span>800 2345-6789</span>
    </p>
</li>
    

Представляет собой новый маркер на карте

Добавление всплывающих окон к маркерам

Для добавления всплывающего окна к пользовательскому маркеру достаточно просто написать контент всплывающего окна в соответствующем пунке списка маркеров карты

<li></li>

В результате получится строка кода:

<li data-x="-73.9994068" data-y="40.643180">Наше представительство</li>

RD Mailform

Универсальная форма. Скрипт поодерживает три режима работы: Контакная форма, Форма подписки и Форма заказа.

В шаблоне все формы сразу настроены под нужный тип. Вам необходимо только указать e-mail адрес владельца сайта, на который будут отправляться результаты заполнения формы посетителем сайта.

При необходимости можно указать несколько адресов. Для этого вам нужно:

  1. Открыть файл bat/rd-mailform.php.
  2. Используя поиск (Ctrl + F) найти переменную $recipients
  3. Вставить ваш e-mail адерес после знака “=”:

    $recipients = “[email protected]” — для одного адреса

    $recipients = “[email protected] [email protected]” — для двух и более.

Изменение режима работы формы:

Если появилась необходимость сменить режим работы формы на целевой *.html странице сразу после открывающего тега <form>, добавить поле

<input type=”hidden” name=”form-type” value=”YOUR_FORM”>

с соответствующим типом формы YOUR_FORM:

  • contact
    для контактной формы;
  • subscribe
    для формы подписки;
  • order
    для формы заказа.

Например, для определения котактной формы необходимо в коде формы указать следующую разметку:

<input type=”hidden” name=”form-type” value=”contact”/>

Настройка отправки через SMTP:

Настройка SMTP сервера никоим образом не относится к настройке нашей формы.

Для отправки почты с помощью SMTP сервера вам необходимо обратиться к оффициальной документации PhpMailer (библиотеки, которую мы используем) или воспользоваться туториалом из оффиальной документации http://phpmailer.worxware.com/?pg=examplebsmtp.

Внимание! Функция RD Mailform не работает локально. Она работает только на хостинг-сервере с включенным PHP.

Цветовые схемы

В шаблонах, которые содержат заранее подготовленные цветовые схемы, пользователь при покупке получает соответствующие файлы стилей colorScheme-1.css, colorScheme-2.css, colorScheme-#.css.

Для внедрения желаемой цветовой схемы необходимо на целевых страницах подключить соответствующие цветовые схемы в секции <head> перед закрывающим тегом </head>

Например, для внедрения цветовой схемы colorScheme-1.css на страницу index.html, необходимо в файле index.html в секции <head> перед закрывающим тегом </head> указать следующую разметку:

<head> …. <link rel=”stylesheet” href=”css/colorScheme-1.css”/> </head>

Переключатель цветовых схем, присутствующий на LiveDemo шаблона является исключительно функцией предпросмотра и с шаблоном не поставляется.

Слайдер

В наших шаблонах используется Camera Slider. Вам может понадобиться замена картинки слайда и описания к ней.

Для того, чтобы добавить новый слайд в слайдер необходимо в HTML разметке слайдера соответствующего .html файла указать следующую конструкцию:


<div data-src="images/page-1_slide02.jpg">
    <div class="camera_caption fadeIn">
        Slide content 2
    </div>
</div>
    

В результате получим такой код (при условии, что у нас уже был 1 слайд):


<div class="camera_container">
    <div id="camera" class="camera_wrap">
        <div data-src="images/page-1_slide01.jpg">
            <div class="camera_caption fadeIn">
                Slide content 1
            </div>
        </div>
        <div data-src="images/page-1_slide02.jpg">
            <div class="camera_caption fadeIn">
                Slide content 2
            </div>
        </div>
    </div>
</div>

Где

<div data-src="images/page-1_slide01.jpg"> … </div>

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

<div class="camera_caption fadeIn"> </div>

Для того, чтобы включить/выключить автопроигрывание слайдов в слайдере необходимо в файле инициализации скриптов script.js в коде инициализации скрипта:


/* Camera
========================================================*/
;(function ($) {
var o = $('#camera');
    if (o.length > 0) {
        if (!(isIE() && (isIE() > 9))) {
            include('js/jquery.mobile.customized.min.js');
        }

        include('js/camera.js');

        $(document).ready(function () {
            o.camera({
                autoAdvance: true,
                height: '40.9375%',
                minHeight: '300px',
                pagination: false,
                thumbnails: false,
                playPause: false,
                hover: false,
                loader: 'none',
                navigation: true,
                navigationHover: false,
                mobileNavHover: false,
                fx: 'simpleFade'
            })
        });
    }
})(jQuery);
    

установить соответствующий флаг для опции autoAdvance. Например,

autoAdvance: true,
для включения автопроигрывания слайдов
autoAdvance: false,
для выключения автопроигрывания слайдов

RD Parallax

Для внедрения секции с параллакс эффектом в любую часть вашего проекта необходимо в целевом участке страницы определить следующую разметку:

<section class="parallax" data-url="images/parallax1.jpg" data-mobile="true"> </section>

Где,

  • data-url
    Путь к целевому фоновому изображению,
  • data-mobile
    True (Для отображения параллакс эффекта на мобильных устройствах) / False (Для отображения статического изображения на мобильных устройствах)

Для наблюдения эффекта высота картинки должна быть больше, чем высота секции, к которой применяется параллакс.

Фоновое видео

Для реализации фонового видео в шаблоне используется jquery-плагин Vide.

Видео на фон секции вставляется специальным скриптом.

Разнаые браузеры поддерживают разные форматы видео, поэтому для кроссбраузерности необходимо проделать следующие шаги:

  1. Конвертировать Ваше видео сразу в 3 формата: *.mp4, *.ogv, *.webm (названия файлов должны совпадать);
  2. Подготовить изображение для отображения в браузерах, которые не поддерживают вставку видео на фоне, в т.ч. мобильных устройствах;
  3. В соответствующем блоке с классом .vide необходимо в data атрибуте data-vide-bg указать путь к файлам, созданным на предыдущих двух шагах без указания разрешения.

    Например:

    <div class="vide" data-vide-bg="video/video-bg"> Your content </div>

Предупреждение. В связи с политикой Apple и других мобильных платформ фоновое видео не работает на девайсах!

RD Calendar

Календарь - необязательный скрипт. Присутствует только в случае наличия одного на .PSD макете.

Для добавления пользовательских событий в календарь необходимо в разметке календаря в блоке с классом .rdc-events указать список соответствующих событий. Например,


<div class="rd-calendar">
    .......
    <div class="rdc-events">
        …...
        <ul>
            <li class="rdc-event" data-date="6/3/2015">
                My Event 1
            </li>
            <li class="rdc-event" data-date="6/8/2015">
                My Event 2
            </li>
        </ul>
    </div>
</div>
    

где,

<li class="rdc-event" data-date="6/3/2015"></li>

представляет собой каждое отдельное событие. Дата события, при этом, задается в атрибуте data-date в формате MM/DD/YYYY.

Таймер обратного отсчёта (страница “сайт в разработке”)

Таймер обратного отсчёта - необязательный скрипт. Присутствует только в случае наличия оного на .PSD макете.

Для того чтобы указать пользователький таймер обратного отсчёта необходимо в файле /js/script.js в секции


/* Countdown
========================================================*/
;
(function ($) {
    var o = $('.countdown');
    if (o.length > 0) {
        include('js/jquery.plugin.js');
        include('js/jquery.countdown.js');

        $(document).ready(function () {
            var date = new Date(),
                countTo = new Date(date.getFullYear(), date.getMonth() + 2, date.getDay());
            $(o).countdown({until: countTo, padZeroes: true});
        });
    }
})(jQuery);
    

в переменной countTo указать целевую дату в формате

countTo = new Date(year, month + 1, day);

Например, запуск продукта стартует 12 мая 2020 года. Тогда данная строка будет выглядеть следующим образом:

countTo = new Date(2020, 6, 12);

Полный пример в данном случае будет выглядеть следующим образом:


/* Countdown
========================================================*/
;
(function ($) {
    var o = $('.countdown');
    if (o.length > 0) {
        include('js/jquery.plugin.js');
        include('js/jquery.countdown.js');

        $(document).ready(function () {
            var date = new Date(),
                countTo = new Date(2020, 6, 12);

            $(o).countdown({until: countTo, padZeroes: true});
        });
    }
})(jQuery);
    

Цифровые прогрессбары

Данный скрипт - необязательный. Присутствует только в случае наличия оного на .PSD макете.

Для измения процента заполнености радиального прогресс бара необходимо в целевом элементе указать необходимое значение:


<div class="radial-progress" data-border="15" data-border-bg="#80d2e0"
    data-border-fg="#1daec8">
    75%
</div>
    

Где,

75%
целевое значение для прогресс бара.

Для изменения процента заполнености горизонтального прогесс бара необходимо в целевом элементе указать необходимое значение в атрибуте style, с помощью свойства width: Xpx.

Где,

X
целевое значение для прогресс бара.

Например,


<div class=”horizontal-progress”>
    <div class=”horizontal-progress-value” style=”width: 80%”></div>
</div>
    

Социальные иконки

Для того, чтобы указать целевые ссылки на пользовательские социальные аккаунты необходимо в сооветствующей социальному аккаунту ссылке в атрибуте href указать адрес страницы в социальной сети.

Например,

<a href=”YOUR_SOCIAL_LINK” class=”fa fa-facebook”></a>

Где, YOUR_SOCIAL_LINK - адрес страницы в Facebook.

Youtube & Vimeo

Для вставки видео из Youtube, Vimeo необходимо воспользовать следующим кодом:

<iframe class=”video” src="//player.vimeo.com/video/37582125?wmode=transparent" allowfullscreen></iframe>

где, атрибут src содержит ссылку на видео в соответствующей сети.

Flickr

Для вставки Flickr Badge виджета вы можете воспользовать хорошим бесплатным Builder’ом:

http://www.flickrbadge.com/

Olark Livechat

Для настройки такого онлайн чата, как на Live Demo необходимо пройти регистрацию на официальном сайте Olark.

Заполнив все данные вам будет предоставлен код, который нужно вставить в код шаблона перед закрывающимся тегом </body>

Код будет весьма объемным, поэтому не пугайтесь. Следующего вида:

<!-- begin olark code --> <script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/ window.olark || (function (c) { var f = window, d = document, l = f.location.protocol == "https:" ? "https:" : "http:", z = c.name, r = "load"; var nt = function () { f[z] = function () { (a.s = a.s || []).push(arguments) }; var a = f[z]._ = {}, q = c.methods.length; while (q--) { (function (n) { f[z][n] = function () { f[z]("call", n, arguments) } })(c.methods[q]) } a.l = c.loader; a.i = nt; a.p = { 0: +new Date }; a.P = function (u) { a.p[u] = new Date - a.p[0] }; function s() { a.P(r); f[z](r) } f.addEventListener ? f.addEventListener(r, s, false) : f.attachEvent("on" + r, s); var ld = function () { function p(hd) { hd = "head"; return ["<", hd, "></", hd, "><", i, ' onl' + 'oad="var d=', g, ";d.getElementsByTagName('head')[0].", j, "(d.", h, "('script')).", k, "='", l, "//", a.l, "'", '"', "></", i, ">"].join("") } var i = "body", m = d[i]; if (!m) { return setTimeout(ld, 100) } a.P(1); var j = "appendChild", h = "createElement", k = "src", n = d[h]("div"), v = n[j](d[h](z)), b = d[h]("iframe"), g = "document", e = "domain", o; n.style.display = "none"; m.insertBefore(n, m.firstChild).id = z; b.frameBorder = "0"; b.id = z + "-loader"; if (/MSIE[ ]+6/.test(navigator.userAgent)) { b.src = "javascript:false" } b.allowTransparency = "true"; v[j](b); try { b.contentWindow[g].open() } catch (w) { c[e] = d[e]; o = "javascript:var d=" + g + ".open();d.domain='" + d.domain + "';"; b[k] = o + "void(0);" } try { var t = b.contentWindow[g]; t.write(p()); t.close() } catch (x) { b[k] = o + 'd.write("' + p().replace(/"/g, String.fromCharCode(92) + '"') + '");d.close();' } a.P(2) }; ld() }; nt() })({ loader: "static.olark.com/jsclient/loader0.js", name: "olark", methods: ["configure", "extend", "declare", "identify"] }); /* custom configuration goes here (www.olark.com/documentation) */ olark.identify('xxxx-xxx-xx-xxxx'); /*]]>*/</script> <noscript><a href="https://www.olark.com/site/'xxxx-xxx-xx-xxxx/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript> <!-- end olark code -->