Документация для шаблонов Bootstrap

Разархивирование шаблона

В распакованном архиве шаблона находятся 3 папки: "documentation", "screenshots" и "site". Также вы увидите архив "sources_############.zip" который нужно распаковать.

Папка sources содержит исходные файлы темы. Она защищена паролем и ее можно открыть только при помощи программ WinZip (Windows OS) и StuffitExpander (MAC OS).

Оба приложения можно скачать бесплатно для пробного использования:

• WinZip
• StuffitExpander

При разархивировании файла "sources_############.zip" нужно будет ввести пароль, который можно найти на странице скачивания шаблона (откройте ссылку в электронном письме от нашей компании).

После распаковывания шаблон будет состоять из 4 папок: "documentation", "screenshots", "site" и "sources".

Общие сведения

Программные требования

Sublime Text 3 (скачать бесплатно). Используется для редактирования файлов .HTML, .JS, .PHP и .CSS.
Adobe Photoshop CS и выше (скачать бесплатно пробную версию). Используется для редактирования файлов .PSD.

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

• documentation – содержит документацию по редактированию и установке шаблона.
• screenshots - содержит скриншоты шаблона.
• site - содержит .html файлы шаблона.
  • assets - содержит полезные скрипты и бонусные дополнения.
  • bat - содержит рабочий .php скрипт контактной формы.
  • css - содержит все файлы .css, используемые в дизайне.
  • img - содержит все изображения, используемые в файлах .html.
  • js - содержит библиотеки JavaScript и плагины jQuery.
  • search - содержит файлы .js, .php и .css поискового движка.
• sources содержит исходные файлы темы.
  • psd - содержит файлы .psd Adobe Photoshop.
  • less - содержит файлы .css LESS, используемые в шаблоне.
• fonts_info.txt - содержит список шрифтов, используемых в шаблоне.
• info.txt - содержит информацию о защищенной паролем папке "sources".

Редактирование шаблона

При работе с шаблоном необходимо редактировать файлы .html, .css, .js и .psd.

Редактирование файлов HTML и CSS

Все редактируемые файлы HTML находятся в папке "site" шаблона (index.html, index-1.html,index-2.html, и т.п.). Каждый файл index-#.html представляет отдельную страницу шаблона.

Чтобы открыть файл .html при помощи программы Sublime Text 3, щелкните правой кнопкой мыши по файлу и в контекстном меню выберите Открыть с помощью > Sublime Text 3. Когда файл открыт, его можно редактировать.

Sublime Text 3 - это рекомендуемое приложение, позволяющее редактировать контент файлов HTML.

Файлы CSS используются для изменения внешнего вида шаблона, например шрифтов (семья шрифтов, размер, цвет и т.п.), фон, значение ширины колонки и т.д. Файлы css можно редактировать при помощи программы Sublime Text 3. В нашем онлайн-центре поддержки находятся детальные туториалы о том, как работать с файлами CSS.

Редактирование файлов PSD

Файлы PSD находятся в папке "sources/psd" шаблона. PSD - это исходные файлы дизайна шаблона. Они делятся на слои, поэтому любую часть дизайна шаблона можно изменить.

Во время редактирования можно использовать файлы PSD для редактирования картинок контента страниц или изображений, составляющих дизайн.

Более детальную информацию о работе с Photoshop можно найти в туториалах.

Пользовательские шрифты

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

Google Web Fonts

Более детальную информацию об использовании шрифтов 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---]

Туториалы по редактированию

Как редактиовать текст

Шаблоны основаны на HTML, поэтому весь контент находится в файлах .html.

1. Перейдите в папку site шаблона.
2. Откройте файл index.html в редакторе HTML.
3. Можно использовать функцию поиска CTRL+F , чтобы найти нужный текст.
4. Измените текст в редакторе HTML. Сохраните файл и откройте в браузере, чтобы увидеть изменения.

Также, для поиска нужных блоков, можно использовать браузерные инструменты разработчика. Более детальная информация о инструментах разработчиков находится в описаниях и туториалах.

Предлагаем ознакомиться со статьей Инструменты Разработчика.

Вы можете посмотреть детальный видео туториал Как редактировать текст в шаблонах JS Animated

Как редактировать изображения

Перейдите в папку 'site/img' шаблона. Вы можете загружать изображения с тем же названием и расширением, что и исходные, таким образом заменяя их.

Также можно загружать пользовательские картинки со своим названием и расширением. Затем необходимо изменить название файла изображения в html.

1. Откройте файл .html в папке “site” редактором html.
2. При помощи функции поиска CTRL+F найдите изображение в файле html.
3. Отредактируйте название и расширение файла-картинки.

Вы также можете ознакомиться с детальным видео туториалом Как изменять изображения.

Как активировать контакт-форму

1. Откройте папку шаблона.
2. Перейдите в директорию site/bat.
3. Откройте файл 'MailHandler.php' любым редактором кода (Sublime Text 3, Notepad и т.п.).
4. При помощи функции поиска (CTRL+F) найдите переменную $owner_email.

Вы увидите следующую строку:

$owner_email='#';

замените символ # требуемым email-адресом. Вот и все, теперь контакт-форма должна отправлять сообщения на ваш email.

Дополнения TM

В зависимости от дизайна, шаблон может включать следующие бесплатные дополнения:

1. Контактная форма - с ее помощью посетители сайта могут отправлять сообщения владельцу.
2. Поисковый движок - выполняет поиск по контенту .html файлов.
3. Сайт в разработке - страница с таймером обратного отсчета.
4. Форма подписки - позволяет добавлять подписку на рассылку писемы.

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

Руководство по контактной форме

<form id="contact-form">
  <div class="contact-form-loader"></div>
  <fieldset>
    <label class="name">
      <input type="text" name="name" placeholder="Name:" value="" data-constraints="@Required @JustLetters"  />
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*This is not a valid name.</span>
    </label>
    <label class="state">
      <input type="text" name="state" placeholder="State:" data-constraints="@JustLetters" />
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*This is not a valid state.</span>
    </label>
    <label class="email">
      <input type="text" name="email" placeholder="Email:" value="" data-constraints="@Required @Email" />
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*This is not a valid email.</span>
    </label>
    <label class="phone">
      <input type="text" name="phone" placeholder="Phone:" value="" data-constraints="@Required @JustNumbers" />
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*This is not a valid phone.</span>
    </label>
    <label class="fax">
      <input type="text" name="fax" placeholder="Fax:" data-constraints="@JustNumbers" />
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*This is not a valid fax.</span>
    </label>
    <label class="file">
      <input type="file" name="attachment" class="filestyle file-input" data-input="true" >
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*This is not a valid file.</span>
    </label>
    <label class="message">
      <textarea name="message" placeholder="Message:" data-constraints='@Required @Length(min=20,max=999999)'></textarea>
      <span class="empty-message">*This field is required.</span>
      <span class="error-message">*The message is too short.</span>
    </label>
    <div>
      <a href="#" data-type="submit" >submit</a>
      <a href="#" data-type="reset" >reset</a> 
    </div>
  </fieldset> 
  <div class="modal fade response-message">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          You message has been sent! We will be in touch soon.
        </div>      
      </div>
    </div>
  </div>
</form>   

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript" src="js/bootstrap-filestyle.js"></script>
<script type="text/javascript" src="js/TMForm.js"></script>

$owner_email='#';

//SMTP server settings  
$host = 'ssl://smtp.gmail.com';
$port = '465';//"587";
$username = '';
$password = '';  

$subject='A message from your site visitor ';

$file_types='/(doc|docx|txt|pdf|zip|rar)$/';

$error_text_filesize='file size must be less than';
$error_text_filetype='wrong file type';
$error_text='something goes wrong';

Руководство для поискового движка

<form id="search" action="search.php" method="GET" accept-charset="utf-8">
   <input type="text" name="s" />
   <a onclick="document.getElementById('search').submit()">Search</a>
</form>

Скрипт обратного отсчета (Страница Сайт в разработке)

<div id="counter"></div>
<div class="counter_desc">
  <div class="days">Days</div>
  <div class="hours">Hours</div>
  <div class="minutes">Minutes</div>
  <div class="seconds">Seconds</div>
</div>

<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>

$(document).ready(function(){
var _date=new Date()
	,countdown_to={
		year:2013
		,month:6 
		,date:13
		,hours:0
		,minutes:15
		,seconds:00
	}

_date.setFullYear(countdown_to.year,countdown_to.month,countdown_to.date)
_date.setHours(countdown_to.hours)
_date.setMinutes(countdown_to.minutes)
_date.setSeconds(countdown_to.seconds)

/*code for demonstration*/
_date=new Date()
_date.setMonth(_date.getMonth()+8)
/*end code for demonstration*/
	
$('#counter').countdown({
	image: 'img/digits_inverted.png',
	startTime: _date,
	stepTime: 35
});	
});							

/*code for demonstration*/
_date=new Date()
_date.setMonth(_date.getMonth()+8)
/*end code for demonstration*/
					

$(document).ready(function(){
var _date=new Date()
	,countdown_to={
		year:2013
		,month:6 
		,date:13
		,hours:0
		,minutes:15
		,seconds:00
	}
});							

/*code for demonstration*/
_date=new Date()
_date.setMonth(_date.getMonth()+8)
/*end code for demonstration*/
						

$('#counter').countdown({
	image: 'img/digits.png',
});						

$('#counter').countdown({
	image: 'img/digits2.png',
});						

Руководство по форме подписки

<form id="subscribe-form">
  <div class="success">Your subscription request<br> has been sent!</div>
    <fieldset>
    <label class="name">
        <input type="text" value="Enter Name:">
        <span class="error">*This is not a valid name.</span></label>
    <label class="email">
        <input type="email" value="Enter Email:">
        <span class="error">*This is not a valid email address.</span></label>
    <div class="btns"><a href="#" class="button" data-type="submit">Submit</a></div>
  </fieldset>
</form>                       

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/sForm.js"></script>

$(window).load(function(){
  $('#subscribe-form').sForm({
    ownerEmail:'#',
    sitename:'sitename.link'
  })
})					

TM Галерея

Вставка фонового видео (Background video)

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

Как установить плагин

Скачайте архив с официального сайта. Скопируйте файл vide.js в папку js, добавьте подключение плагина и проинициализируйте его в файле script.js:

include('js/jquery.vide.js'); 
$(document).ready(function () {
    $("#home").vide("video/[имя_файла]",{
      volume: 1,
      playbackRate: 1,
      muted: true,
      loop: true,
      autoplay: true,
      position: "50% 50%" // Alignment
  });
    $('#home video').fadeOut(0).delay(200).fadeIn(800);
});              

где [имя_файла] - имя файла видео, без указания расширения, а #home блок с id="home" на котором будет отображаться видео.

Также необходимо подготовить видео в форматах mp4, ogv, webm и постер к видео в форматах png, jpg и gif. Имя у всех файлов должно быть одинаковым и соответствовать прописанному ранее [имя_файла]. Все подготовленные файлы нужно разместить в директории video/ в корневой директории сайта.

Использование параллакс-эффекта

  include('js/jquery.stellar.js'); 
  $(document).ready(function() { 
      $.stellar({
        horizontalScrolling: false,
        verticalOffset: -50
    }  
  });      

<section id="priorities" data-stellar-background-ratio="-0.1"></section>   

#priorities {
  background: url('../images/[ваша_картинка].jpg');
}   

Политика использования файлов Cookie

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

Например, cookies позволяют онлайн магазинам запоминать, какие товары вы добавили в корзину. Также они сохраняют данные входа на сайт или предоставляют ценную статистику использования и информацию владельцам сайтов.

Если у вас есть веб-сайт, он почти наверняка использует cookies. Их главная функция - изучать количество и интересы пользователей через специальные инструменты, например Google Analytics. Также они могут использоваться для отображения объявлений, или – если у вас есть онлайн-магазин – быть ключевой частью системы электронной коммерции.

26 мая 2012 г. - ICO опубликовал акт о том, что "подразумеваемое согласие" не допускается и необходимо сообщать о политике приватности/cookie.

Информация:

Согласно Закону об использовании файлов Cookie, мы предлагаем добавить плагин cookiecuttr, созданный Крисом Уортоном и распространяемый по лицензии GNU General Public License.

Он выглядит следующим образом:

Данный плагин используется для предупреждения посетителей веб-сайта об использовании файлов cookies. Он добавляет блок с информацией, который можно полностью модифицировать в файлах css и js :

Как установить плагин

Необходимо скачать файлы jquery.cookie.js, jquery.cookiecuttr.js и cookiecuttr.css. Скопируйте их в папки js и css соответственно, добавьте скрипты плагина и ссылку на файл css в секции <head> каждого html файла:

<!-- cookiecuttr plugin -->
 <link rel="stylesheet" href="css/cookiecuttr.css">
 <script src="js/jquery.cookie.js"></script>
 <script src="js/jquery.cookiecuttr.js"></script>
<!-- end cookiecuttr plugin -->                 

Кастомизация плагина

В данном плагине есть множество параметров и настроек, что позволяет модифицировать его как угодно.

Вот примеры некоторых из них:

cookieCutter // измените данную опцию на true, если не хотите, чтобы часть сайта была скрытой, например, вы используете систему комментариев, что вставляет cookies, тогда можно добавить название div снизу для замены на предупреждение о  файлах cookie.
cookieAnalytics //если вы просто используете простой сайт, можно задать эту опцию как true, чтобы показывать простое стандартное сообщение без ссылки на страницу с изложенной политикой - true уже задано по умолчанию.
cookieDeclineButton // если нужно добавить кнопку отказа от использования файлов cookie в браузере, выставите опцию в true;
cookieAcceptButton // задайте true, чтобы убрать кнопку согласия с использованием  файлов cookie, по умолчанию false;
cookieResetButton // если нужна кнопка сброса, чтобы убрать согласие/отказ использования  cookies, измените на true;
cookieOverlayEnabled // не хотите, чтобы панель отображалась упрощенно? при данной опций все сообщения будет показываться на 100% в высоту; 
cookiePolicyLink // если нужно, введите ссылку на политику конфиденциальности - в том случае, когда cookieAnalytics стоит на  false;
cookieMessage // отредактируйте текст, отображаемый в панели cookie, используйте переменную {{cookiePolicyLink}}, чтобы вставить ссылку на страницу с изложенной политикой конфиденциальности;
cookieAnalyticsMessage // отредактируйте текст стандартного сообщения;
cookieWhatAreTheyLink // задайте ссылку на страницу 'Что такое Cookies';
cookieErrorMessage // напишите сообщение, которое будет отображаться вместо функционала;
cookieNotificationLocationBottom // по умолчанию выставлено в false, измените это на true и панель уведомления об использовании cookie будет отображаться внизу страницы; для мобильных и iOS устройств, а также в Internet Explorer 6 панель останется сверху;
cookieDisable // перечислите элементы, которые хотите убрать (через запятую). Опция сработает, только если cookieCutter выставлен в true;
cookieAcceptButtonText // можно изменить текст зеленной кнопки принятия;
cookieDeclineButtonText // можно изменить текст красной кнопки отказа;
cookieResetButtonText // можно изменить текст оранжевой кнопки сброса;
cookieWhatAreLinkText // можно отредактировать текст ссылки "Что такое Cookies" в сообщении Google Analytics;
cookiePolicyPage // измените на true, чтобы отображать необходимое сообщение на странице политики конфиденциальности или cookie;
cookiePolicyPageMessage // напишите сообщение, которое будет показано на странице политики конфиденциальности;
cookieDiscreetLink // по умолчанию false, измените на true, чтобы включить данную опцию;
cookieDiscreetLinkText // задайте текст для упрощенной панели;
cookieDiscreetPosition // по умолчанию имеет значение topleft, можно поставить topright, bottomleft, bottomright;
cookieDomain // по умолчанию не задана, добавьте доменное имя без www. или https:// или http://, чтобы избавиться от Google Analytics cookies;                 

Более детальную информацию и инструкции по кастомизации и использованию плагина можно найти на официальном сайте cookiecuttr.

Загрузка шаблона

Чтобы сделать сайт "живым", загрузите весь контент папки "site" с компьютера на хостинг-сервер.

Внимание: корневая папка веб-сайта зависит от структуры директорий на хостинг-сервере. Если вы просто загрузите папку "site", адрес вашего веб-сайта будет выглядеть как http://your_domain_name/site. Чтобы сайт выглядел как http://your_domain_name/, просто откройте папку "site" и загрузите ее контент.

Данный видео туториал покажет, как загружать файлы на сервер при помощи FTP-клиента FileZilla.

Данный видео туториал покажет, как загружать файлы на сервер при помощи панели управления хостингом (WebHost Manager, WHM).

Ни в коем случае не загружайте папку sources или другие исходные файлы шаблона на хостинг-сервер.

Дополнение куда обратиться за помощью, поддержкой и дополнительной информацией

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