Изменение дизайна шаблонного сайта UMI.RU

Шаблонные сайты на юми.ру конечно выглядят весьма привлекательно, но у них существует ряд важных недостатков. В общем, я уже описывал их в статье «3 основные недостатка UMI.RU«. Сейчас я хочу поговорить об одном из них более детально. Речь идет об изменении дизайна клаудного сайта на юми.ру.

Итак, какие же есть средства у разработчика? Да на самом деле, практически все. Это и css, который явно представлен в административной зоне сайта, и js, к которому добраться чуть сложнее, но все равно вполне реально. Ну и конечно же картинки: фоны, спрайты и прочее, которые загружаются в облако и к которым у вас есть непосредственный доступ. Правда это еще далеко не полный список. Но обо всем по порядку.

Чтобы добраться до css нужно в административной зоне выбрать пункт меню «Дизайн» — «Управление CSS». Вы увидите поле, в котором с легкостью можете исправить любой без исключения стиль на сайте.

С точки зрения картинок, то к ним лучше указывать абсолютный путь, то есть путь от корня сайта. Узнать его просто — добавьте свою картинку в любое поле html-текста и посмотрите исходный код.

Загрузку картинок можно осуществить, используя файловый менеджер. Он вызывается в режиме редактирования EIP либо при клике на картинку, любо при попытке вставки картинки в html-код. Не забывайте создавать папки — они облегчают ориентирование.

Добраться до js чуть сложнее, но тоже вполне реально. Дело в том, что в любом макете есть специальное поле — поле для вставки кода счетчика. Оно прекрасно подходит для добавления своего кода js.

Допустим, все это было проделано успешно. Но даже после всех модификаций на сайте все еще не хватает пары-тройки блоков с различным функционалом и назначением.

Именно в этот момент на помощь приходит библиотека.

В ней есть 2 функции: добавить в конец тега umiRuAppend и добавить в начало тега umiRuPrepend, по аналогии с jquery.append и jquery.preppend, правда чуть сложнее.
У обоих функций параметры представлены двумя составляющими:
html — это код, который будет вставлен,
after_append (after_prepend) — функция, которая будет вызвана по окончании вставки.

Пример: допустим, вы вставляете картинку, которая должна открываться всплывающим окном fancybox. Для этого она должна быть пройдена соответствующим обработчиком. Но что, если обработчик сработал до вставки? Тогда действие на картинке никак не отразится и картинка не будет всплывать. Именно для таких случаев и сделана эта функция.

Пример использования:

HTML-код до вставки:

<div class="append">
<p>test1</p>
</div>

Вызов функции:

<script type="text/javascript" charset="utf-8" src="//umicms.me/utils/jquery.umi_ru_form.js"></script>
<script>
$('.append').umiRuAppend({'html': '<p>test2</p>'});
</script>

HTML-код после вставки:

<div class="append">
<p>test1</p>
<p>test2</p>
</div>

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

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


Простой и понятный online-курс для обучения XSLT-программиста с любого базового уровня

Июл16

Ваш отзыв