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:

Откройте 'site\index-*.html' или 'site\css\style.css' файлы
Найдите строку:
//fonts.googleapis.com/css?family=[---your_web_font_name_here---]
Замените её следующим:
//fonts.useso.com/css?family=[---your_web_font_name_here---]

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

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

Выбрать данный шрифт (например, Open Sans), нажав на кнопку Add to Collection
В появившейся панели нажать на кнопку Use. Откроется страница настройки шрифтов.
На этой странице, в пункте “2. Choose the character sets you want:” выбрать необходимые кодировки шрифта.
В пункте 3, выбрать вкладку “@import”
Скопировать содержимое данной вкладки
Вставить скопированное содержимое вместо строки подключения старой версии шрифта в файле 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 адрес владельца сайта, на который будут отправляться результаты заполнения формы посетителем сайта.

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

Открыть файл bat/rd-mailform.php.
Используя поиск (Ctrl + F) найти переменную $recipients
Вставить ваш e-mail адерес после знака “=”:
$recipients = “test@gmail.com” — для одного адреса
$recipients = “test@demolink.com test2@demolink.com” — для двух и более.

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

Если появилась необходимость сменить режим работы формы на целевой *.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.

Search

Внимание! Форма поиска является необязательной, то есть, присутствует в шаблоне только в случае его наличия в .PSD макете. Функция поиска не работает локально. Она работает только на хостинг-сервере с включенным PHP.

RD Navbar

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

Скрипт автоматически адаптируется к разметке заданной в HTML и считывает пункты меню заданные в вашей основной навигации для создания мобильного варианта.

В дополнительной настройке не нуждается.

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

В шаблонах, которые содержат заранее подготовленные цветовые схемы, пользователь при покупке получает соответствующие файлы стилей 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,: для выключения автопроигрывания слайдов

Галерея

Подробная документация по галереи описана на оффициальном сайте

http://fancyapps.com/fancybox/

RD Parallax

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

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

Где,

data-url

Путь к целевому фоновому изображению,
data-mobile

True (Для отображения параллакс эффекта на мобильных устройствах) / False (Для отображения статического изображения на мобильных устройствах)

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

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

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

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

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

Конвертировать Ваше видео сразу в 3 формата: *.mp4, *.ogv, *.webm (названия файлов должны совпадать);
Подготовить изображение для отображения в браузерах, которые не поддерживают вставку видео на фоне, в т.ч. мобильных устройствах;
В соответствующем блоке с классом .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 содержит ссылку на видео в соответствующей сети.

Facebook

Процесс внедерния плагина Facebook Page Plugin подробно описан в оффициальной документации:

https://developers.facebook.com/docs/plugins/page-plugin

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 -->