Инструкция по ручному обновлению темы дизайна ServicesSite, v.1.2.

12 октября 2015

Инструкция по ручному обновлению темы дизайна ServicesSite, v.1.2.

Приложение "Сайт"

  • Добавление возможности редактировани файлов adaptive.js, handler.js, adaptive.css через админку

1. Перенести файлы adaptive.js, handler.js из папки site/themes/servicessite/js/ в папку site/servicessite/

2. Перенести файл adaptive.css из папки site/themes/servicessite/css/ в папку site/themes/servicessite/

3. Сайт - Дизайн - Шаблоны. В файле index.html

3.1. Заменить строку

<link rel="stylesheet" href="{$wa_theme_url}css/adaptive.css?v{$wa_theme_version}" />

на

<link rel="stylesheet" href="{$wa_theme_url}adaptive.css?v{$wa_theme_version}" />

3.2. Заменить строку

<script src="{$wa_theme_url}js/handler.js"></script>

на

<script src="{$wa_theme_url}handler.js"></script>

3.3. Заменить строку

<script src="{$wa_theme_url}js/adaptive.js"></script>

на

<script src="{$wa_theme_url}adaptive.js"></script>

4. Сайт - Дизайн - Шаблоны. В файле theme.xml

добавить код

<file path="adaptive.css" custom="0">
  <description locale="en_US"/>
  <description locale="ru_RU"/>
</file>
<file path="handler.js" custom="0">
  <description locale="en_US"/>
  <description locale="ru_RU">JS-файл</description>
</file>
<file path="adaptive.js" custom="0">
  <description locale="en_US"/>
  <description locale="ru_RU"/>
</file>

сразу перед строкой

</files>

5. Сайт - Дизайн - Шаблоны. В файле adaptive.css

заменить во всём документе часть кода

url(../img/

на

url(img/
  • Добавление файла стилей additional.css, который будет иметь наивысший приоритет

1. Добавить пустой файл additional.css в директорию site/themes/servicessite/

2. Сайт - Дизайн - Шаблоны. В файле index.html

добавить строку

<link rel="stylesheet" href="{$wa_theme_url}additional.css" />

сразу перед строкой

<script src="{$wa_theme_url}js/getCookies.js"></script>

3. Сайт - Дизайн - Шаблоны. В файле theme.xml

добавить код

<file path="additional.css" custom="0">
  <description locale="en_US"/>
  <description locale="ru_RU">Дополнительный файл стилей, который будет иметь высший приоритет относительно других</description>
</file>

сразу перед строкой

</files>
  • Добавление 3 дополнительных цветовых тем в шаблон

1. Загрузить файлы dark_blue.css, purple.css, yellow.css в директорию site/themes/servicessite/css/

2. Загрузить папки dark_blue, purple, yellow в директорию site/themes/servicessite/img/themes/

3. Сайт - Дизайн - Шаблоны. В файле theme.xml

добавить код

<option value="purple">
  <name locale="ru_RU">Пурпурный</name>
  <name locale="en_US">Purple</name>
</option>
<option value="yellow">
  <name locale="ru_RU">Жёлтый</name>
  <name locale="en_US">Yellow</name>
</option>
<option value="dark_blue">
  <name locale="ru_RU">Тёмно-синий</name>
  <name locale="en_US">Dark-blue</name>
</option>

сразу перед строкой

</options>
  • Внесение технических правок, практически не влияющих на работу темы

1. Сайт - Дизайн - Шаблоны. В файле promo.html

1.1 Заменить код

<a href="{$theme_settings.promo_link1|escape}">{$theme_settings.promo_btn1|escape}</a>

на

{if $theme_settings.promo_btn1}
    <a href="{$theme_settings.promo_link1|escape}">{$theme_settings.promo_btn1|escape}</a>
{/if}

1.2 Заменить код

<a href="{$theme_settings.promo_link2|escape}">{$theme_settings.promo_btn2|escape}</a>

на

{if $theme_settings.promo_btn2}
    <a href="{$theme_settings.promo_link2|escape}">{$theme_settings.promo_btn2|escape}</a>
{/if}

1.3 Заменить код

<a href="{$theme_settings.promo_link3|escape}">{$theme_settings.promo_btn3|escape}</a>

на

{if $theme_settings.promo_btn3}
    <a href="{$theme_settings.promo_link3|escape}">{$theme_settings.promo_btn3|escape}</a>
{/if}
  • Правка адаптивной вёрстки

1. Сайт - Дизайн - Шаблоны. В файле adaptive.css

1.1. Заменить

nav.topmenu > ul > li > ul {
    top: 1px;
    left: 240px;
    width: 200px;
}

на

nav.topmenu > ul > li > ul, nav.topmenu > ul > li > ul.ulLt3 {
    top: 1px;
    left: 240px;
    width: 200px;
    min-width: inherit;
}

1.2. Добавить

.comments {
    margin: 0;
}
.comment.in-reply-to {
    padding-right: 8px;
}
.comments ul li .comment-form {
    padding: 0;
}
.view-plain .image {
    width: 254px;
    margin-right: 5px;
}
.view-plain .image img {
    width: 254px !important;
}
ul.view-thumbs li a {
    width: auto;
    margin-right: 10px;
}

сразу после

.logo img {
    max-width:100%;
}

1.3. Заменить

.image img {
    width:49% !important;
    height:200px !important;
}

на

/*.image img {
    height:200px !important;
}*/

1.4. Добавить

.view-plain .image {
    width: 100%;
}
.view-plain .image img {
    width: 100% !important;
    height: auto !important;   
}

сразу после

.forSupport article .page-content.faq-category {
    padding-left: 0;
}

1.5. Заменить

nav.topmenu > ul > li > ul {
    left:0;
    width:210px;
}

на

nav.topmenu > ul > li > ul, nav.topmenu > ul > li > ul.ulLt3 {
    left:0;
    width:210px;
}

1.6. Добавить

.view-plain .image { 
    width: 100%;
}
.view-plain .image img {
    height: auto !important;
}

сразу после

.forSupport #page-content table.table {
    transform: scale(0.9);
    position: relative;
    left: -15px;
}

2. Сайт - Дизайн - Шаблоны. В файле adaptive.js

  • Доработка обрезки текста в блоке "Новости компании"

Сайт - Дизайн - Шаблоны. В файле handler.js

заменить

//Обрезка текста, выходящего за пределы ностного блока
$(".wordWrap").each(function () {
    $(this).dotdotdot({
        ellipsis: '...',
        watch: 'window'
    });
});

на

//Обрезка текста, выходящего за пределы блока
$(".wordWrap, .desc p").each(function () {
    $(this).dotdotdot({
        ellipsis: '...',
        watch: 'window'
    });
});
  • Вставка плашки "Перейти на мобильную версию сайта"

1. Сайт - Дизайн - Шаблоны. В файле styles.css

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

/* Плашка перехода на мобильную версию */
.goMobile {
    height: 30px;
    line-height: 30px;
    -moz-box-sizing: padding-box;
    -webkit-box-sizing: padding-box;
    box-sizing: padding-box;
}
    .goMobile span {
        cursor:pointer;
    }

2. Сайт - Дизайн - Шаблоны. В файле handler.js

добавить

if (getCookie("needMobile") == "false") {
    $("body").prepend('<div class="goMobile"><div class="wrapper"><span>Перейти на мобильную версию</span></div></div>');
    $(".goMobile span").click(function () {
        document.cookie = "needMobile=true; max-age=86400; path=/";
        location.reload(true);
    });
}

сразу после

if (window.innerWidth > 1000) {
    trasformSubMenuInCase();
}
  • Исправление ошибки вывода favicon

Сайт - Дизайн - Шаблоны. В файле index.html

заменить

<link rel="shortcut icon" href="{$wa_theme_url}favicon.ico" />

на

<link rel="shortcut icon" href="/favicon.ico" />
  • Приводим тему дизайна в соответствии с рекомендациями Webasyst

Сайт - Дизайн - Шаблоны. В файле index.html

1. Заменить

<a href="{$wa_url}">

на

<a href="{$wa_static_url}">

2. Заменить

<li {if $a.url != $wa_url && strpos($wa->currentUrl(false), $a.url) !== false} class="active"{/if}><a href="{$a.url|escape}">{$a.name|escape}</a>

на

<li {if $a.url != $wa_static_url && strpos($wa->currentUrl(false), $a.url) !== false} class="active"{/if}><a href="{$a.url|escape}">{$a.name|escape}</a>
  • Внесение изменений в стилевое оформление темы

Сайт - Дизайн - Шаблоны. В файле styles.css

1. Добавить

max-width: 100%;

сразу после

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265e79', endColorstr='#265e79',GradientType=0 ); /* IE6-9 */

2. Добавить

.nav-sidebar-body a:hover {
    text-decoration: underline;
}

сразу перед строкой

.nav-sidebar.right {

3. Добавить

color: #006bd8;
font-family: "Helvetica Neue",Arial,sans-serif;

сразу после кода

ul.menu-h li a {
    display: inline-block;
    padding: 13px 16px 13px 16px;
    display: block\9;
    float: left\9;
    text-decoration: none;

4. Добавить

font-weight: bold;

сразу после кода

ul.menu-h li.selected a {
    background: transparent;

5. Добавить

display: inline-block;

сразу после кода

.phone a {
    text-decoration: none;

6. Заменить

nav.topmenu > ul > li > ul.ulLt3 {
    width: 180px;
}

на

nav.topmenu > ul > li > ul.ulLt3 {
    min-width: 100%;
    width: auto;
    max-width: 300px;
    float:none;
}

7. Заменить

nav.topmenu > ul > li > ul > li.liLt3 {
    width: auto !important;
    display: block;
}

на

nav.topmenu > ul > li > ul > li.liLt3 {
    width: 100% !important;
    display: block;
}

8. Заменить

nav.topmenu > ul > li > ul > li > a {
    color: white;
    font-size: 15px;
    font-family: 'PT Sans', sans-serif;
    line-height: 32px;
    padding-left: 20px;
    padding-top: 4px;
    padding-bottom: 7px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

на

nav.topmenu > ul > li > ul > li > a {
    color: white;
    font-size: 15px;
    font-family: 'PT Sans', sans-serif;
    line-height: 32px;
    padding: 4px 10px 7px 20px;
    display: block;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

8. Добавить

.news h4:hover, .news a:hover {
    text-decoration: none;
}

сразу перед строкой

.news p.wordWrap {

9. Заменить

footer .company_info a {
    text-decoration: none;
}

на

footer .company_info a {
    text-decoration: none;
    display: inline-block;
}

10. Заменить

.image img {
    width: 32% !important;
    float: left;
    margin-left: 1%;
    height: 200px !important;
    margin-bottom: 15px;
}

на

.view-plain .image img {
    /*width: 32% !important;*/
    width: auto !important;
    /*float: left;*/
    margin-left: 1%;
    height: 200px !important;
    margin-bottom: 15px;
}

11. Заменить

.view-plain .image {
    margin-top: -16px;
}

на

.view-plain .image {
    /*margin-top: -16px;*/
    display: inline-block;
    width: 32%;
    margin-right: 0.5%;
}

12. Добавить

main.forBlog #post-stream a:hover {
    text-decoration:none;
}

сразу перед строкой

ul.auth-type {

13. Добавить

.comment-submit input {
    white-space: normal;
}

сразу перед строкой

/*********************** QUESTIONS ***********************/

Приложение "Фото"

  • Переносим ссылки "Все фотографии" и "Избранное" в отдельный файл

1. Если есть доступ к FTP или SSH то нужно добавить файл banner.html в каталог photos/servicessite/banner.html. Если сайт расположен в облаке Webasyst: Фото - Дизайн - Шаблоны - Новый файл

Выбираем пункт "Создать новый файл", в поле "Имя файла" вводим banner.html, в основное поле вставляем код полное содержимое файла banner.html

2. Сайта - Дизайн - Шаблоны. В файле index.html

сразу после строки

<div class="main {if $wholeWidth == true}wholeWidth{/if}" itemscope itemtype="http://schema.org/WebPage">

вставить

{if $wa_app == 'photos'}
    {include file="`$wa_active_theme_path`/banner.html" inline}
{/if}

3. Фото - Дизайн - Шаблоны. В файле main.html

удалить код

<!-- core navigation -->
    <ul class="menu-h">
        <li {if $wa->currentUrl() == $wa_app_url} class="selected"{/if}>
            <a href="{$wa_app_url}">[`All photos`]</a>
        </li>
        <li {if $wa->param('action') neq 'page' && $wa->param('action') neq 'album' && $wa->param('hash') == 'favorites'} class="selected"{/if}>
            <a href="{$wa_app_url}favorites/">[`Editors’ choice`]</a>
        </li>
        {if $pages = $wa->photos->pages()}
            {foreach $pages as $page}
            <li{if strlen($page.url)>1 && $wa->currentUrl()|strstr:$page.url} class="selected"{/if}><a href="{$page.url}">{$page.name}</a></li>
            {/foreach}
        {/if}
        <!-- plugins -->
        {* @event frontend_sidebar.%plugin_id%.menu *}
        {foreach $frontend_sidebar as $plugin_id => $item}{if !empty($item.menu)}
            <li>{$item.menu}</li>
        {/if}{/foreach}
    </ul>

4. Фото - Дизайн - Шаблоны. В файле photos-thumbs.html

заменить

{$wa->photos->getImgHtml($photo, '200x0', ['itemprop' => 'image'])}

на

<a href="#" class="lbox">
    {$wa->photos->getImgHtml($photo, '970x0', ['itemprop' => 'image'])}
</a>
  • Улучшение режима просмотра фотографий

1. Фото - Дизайн - Шаблоны. В файле head.html

заменить код

<script type="text/javascript" src="{$wa_active_theme_url}js/jquery.lightbox.min.js?v{$wa->version(true)}"></script>

на

<script type="text/javascript" src="{$wa_active_theme_url}js/lightbox.js?v{$wa->version(true)}"></script>

2. Добавить файл photos/themes/servicessite/js/lightbox.js

3. Удалить файл photos/themes/servicessite/js/jquery.lightbox.min.js

4. Обновить файл photos/themes/servicessite/jquery.lightbox.css

  • Исправление разметки для вывода фотографий

Фото - Дизайн - Шаблоны. В файле photos-plain.html

1. Поменять местами строки

{foreach $photos as $photo}

и

<figure itemscope itemtype ="http://schema.org/Photograph">

2. Удалить тег

<br>

3. Поменять местами строки

</figure>

и идущую за ней

{/foreach}

4. Заменить

{if $photo.description}
    {if $photo.description|strstr:'

'} <div itemprop="description">{$photo.description}</div> {else} <p itemprop="description">{$photo.description}</p> {/if} {/if}

на

{*if $photo.description}
    {if $photo.description|strstr:'

'} <div itemprop="description">{$photo.description}</div> {else} <p itemprop="description">{$photo.description}</p> {/if} {/if*}

  • Обновление стилевого оформления приложения

Фото - Дизайн - Шаблоны. В файле photos.css было изменено:

1. Заменена строка

.image .stack { position: absolute; top: 5px; left: 0; right: 0; color: #fff; padding: 10px; text-align: center;  }

на

.image .stack { /*position: absolute; top: 5px; left: 0; right: 0;*/ color: #fff; padding: 10px; text-align: center;  }

2. Заменена строка

.view-plain { margin-top: 35px; }

на

.view-plain { margin-top: 20px; }

3. Заменена строка

.view-plain .image { margin: 5px -30px 0; max-width: 970px; text-align: left\9; }

на

.view-plain .image { /*margin: 5px -30px 0;*/ max-width: 970px; text-align: left\9; }

4. Заменена строка

ul.view-thumbs li a { text-decoration: none; color: #000; }

на

ul.view-thumbs li a { text-decoration: none; color: #000; width:200px; display:block;}

5. Добавлены строки

.slideshow .image {
    padding-bottom: 20px;
}
.photo_info {
    padding-bottom: 10px;
}

сразу перед

/* TABLET
========= */
  • Изменение версии темы

Фото - Дизайн - Шаблоны. В файле theme.xml

заменить код

<theme id="servicessite" system="0" vendor="934303" author="BodySite" app="photos" parent_theme_id="site:servicessite" version="1.0">

на

<theme id="servicessite" system="0" vendor="934303" author="BodySite" app="photos" parent_theme_id="site:servicessite" version="1.2" source_theme_id="servicessite">
  • Добавление возможности менять файл через админку

Фото - Дизайн - Шаблоны. В файле theme.xml

вставить код

<file path="banner.html" custom="0">
  <description locale="en_US">App specific banner content</description>
  <description locale="ru_RU">Контент в области баннера</description>
</file>

сразу перед строкой

<file path="main.html" custom="0">

Приложение "Блог"

  • Убираем не нужный блок в боковой части страницы

Блог - Дизайн - Шаблоны. В файле mail.html

заменить код

{$pages = $wa->blog->pages()}
{if count($pages)}
    {include file="`$wa_active_theme_path`/submenu.html" inline}
{/if}

на

{*$pages = $wa->blog->pages()}
{if count($pages)}
    {include file="`$wa_active_theme_path`/submenu.html" inline}
{/if*}
  • Изменение версии темы

Блог - Дизайн - Шаблоны. В файле theme.xml

заменить код

version="1.0"

на

version="1.2"