ГлавнаяCmsРедактирование шаблона umi cms

Документация по макросам и шаблонам UMI.CMS. Редактирование шаблона umi cms


Редактирование основных настроек страницы

Если "Расширенные поля" скрыты - мы видим только самые основные поля и элементы управления:

После нажатия на "Показать расширенные поля" становятся доступными дополнительные поля и элементы управления:

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

help.docs.umi-cms.ru

Редактирование страниц/объектов сайта

Чтобы редактировать страницу сайта, нажмите на ее название или на пиктограмму редактирования в соответствующей строке. Откроется окно редактирования страницы (такое окно открывается также при создании новой страницы).

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

1. Блок Основные параметры (для доступа ко всем настройкам нажмите ссылку Показать расширенные поля): доступны название текущей страницы, псевдостатический адрес, тип данных, мета-информация, теги и активность текущей страницы. Также здесь (или отдельным  блоком ниже, в зависимости от типа страницы) может быть расположен визуальный редактор содержимого.
2. Блок Дополнительные параметры страницы: доступны поля для задания изображений активных и неактивных разделов и заголовков, выбор шаблона дизайна, а также опции, связанные с навигацией, индексацией поисковиками и поиском по сайту.
3. Блок Права доступа к странице: содержит настройки, связанные с доступом и изменением информации на данной странице для групп или отдельно взятых пользователей.
4.		 Блок История изменений: позволяет отслеживать историю изменения страницы.

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

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

help.docs.umi-cms.ru

Как изменить дизайн готового сайта. Азбука CSS

Итак, у вас есть готовый сайт на UMI.ru. С профессиональным дизайном, тщательно спроектированными интерфейсами, настроенными стилями форматирования. Но что делать, если текущий шаблон вам не совсем подходит: хочется изменить внешний вид сайта, поиграть с цветами, адаптировать веб-страницы под ваш корпоративный стиль или ваше видение? Как изменить сайт?

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

А можно такой же, но с перламутровыми пуговицами? Да!

На 1С-UMI есть возможность изменить внешний вид готового сайта несколькими способами, которые можно сочетать или использовать по отдельности:

1. Самый простой способ — изменить вид страниц сайта при помощи картинок. 

Исходный шаблон дизайна:

Шаблон, измененный при помощи картинок:

 

2. Самый радикальный способ - изменить шаблон дизайна.

Этот способ подойдет, если вы хотите полностью изменить внешний вид сайта, выбрав другую тематику оформления. Для этого просто зайдите в раздел “Дизайн – Смена дизайна” в панели управления вашего сайта и выберите новый дизайн. При этом, вы можете сохранить все внесенные изменения: тексты, картинки, структуру, объекты каталога и т.д.

3. Самый творческий способ - редактирование стилей CSS.

CSS - это технология описания внешнего вида веб-страниц, написанных на языке разметки HTML. Определенные стили CSS уже применены к готовым сайтам на UMI.ru и описывают внешний вид всех элементов: текстов, кнопок, ссылок, меню, “хлебных кошек” и др. Для их изменения необходимо прописать новые стили в специальном файле, который находится в разделе “Дизайн” - “Управление CSS” в панели управления вашего сайта (доступно на платном тарифе).

С помощью стилей CSS можно изменить:

Все это можно сделать самостоятельно, но вам потребуются некоторые базовые знания о редактировании стилей CSS. Не пугайтесь, вам не придется сочинять код: все стили уже есть в специальных учебниках. Разобраться в основах вам поможет отличный самоучитель CSS - htmlbook.ru, а получить нужный код - генераторы CSS:  css3maker.com и css3generator.com. А если у вас есть знакомые, знающие язык HTML, то они с легкостью помогут в редактировании стилей.

И сайт превращается…

Как изменить сайт при помощи CSS и посмотреть, какие стили уже применены к элементам страниц - вы узнаете из нашего руководства. 

А чтобы вы поняли, насколько это легко - разберем несколько примеров.

Действия с объектами

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

Перед тем, как изменить сайт, не забудьте сохранить его резервную копию - тогда вы сможете его легко восстановить с случае неполадок. Теперь можно приступать к редактированию. При помощи инструмента инспектирования кода (в нашем примере использован Firebug в браузере Mozilla Firefox) находим код необходимого элемента - в данном случае, это код кнопки:

В правом окошке инспектора “Стиль” прописан код, обозначенный разными цветами:  

Мы видим, что класс кнопки называется .direction_title. Чтобы понять, какой фрагмент представленного кода отвечает за цвет, можно “перевести” зеленые теги, воспользовавшись поиском в справочнике. За цвет фона кнопки отвечает свойство background (не путайте со свойством color, оно отвечает за цвет шрифта). Сейчас кнопке присвоен стиль background: #1f1f1f; где background - это свойство, определяющее стиль фона, а #1f1f1f - голубой цвет в шестнадцатеричной кодировке цвета.

Чтобы сделать кнопку красной, нужно узнать цифровой код красного цвета. Его можно посмотреть с помощью онлайн-палитры, либо в любом графическом редакторе, которым вы привыкли пользоваться (например, Microsoft Paint, Photoshop, онлайн-редактор и т.п.). Итак, код красного цвета - #ff0000:

Теперь перейдем в раздел “Дизайн” - “Управление CSS” админзоны нашего сайта и пропишем новое значение для класса кнопки, соблюдая тот же синтаксис, что показывает инспектор в исходном коде: между открывающей и закрывающей фигурной скобкой помещают CSS-свойства со значениями, разделяя их знаком “;”.

Таким образом, в общем виде схема CSS-кода выглядит так:

Тег.Имя класса { свойство1: значение; свойство2: значение; ... }

Что получилось: 

    Было                                                                                                   Стало

 

Вторая задача: перемещение кнопки вверх и вправо на 100px.

Для начала посмотрим значения текущего расположения кнопки с помощью инспектора, если нужно - “переведем” через самоучитель. Сейчас стоят значения bottom: 20px; left: 40px; где bottom - расстояние от нижнего края кнопки до нижнего края родительского блока, а left - расстояние от левого края кнопки до левого края родительского блока.

Таким образом, для перемещения кнопки вверх и вправо на 100px нужно прибавить по 100px снизу и слева - получится 120px снизу и 140px слева. Добавим новые значения в наш файл стилей к уже прописанному классу нашей кнопки .direction_title, соблюдая синтаксис исходного кода:

Что получилось:

    Было                                                                                                  Стало

Изменение шрифтов

При редактировании некоторых текстовых полей на готовых сайтах не появляется визуальный редактор, а потому нельзя стандартным способом изменить цвет, размер и начертание шрифта. Это могут быть заголовки, анонсы новостей, цены на товары, контактные данные в шапке сайта, надписи на кнопках и др. Мы сделали это умышленно: настроили лучшие шрифты, самые удобные для чтения и оптимально подходящие к дизайну сайта. Но если все же вам потребуется изменить стиль этих элементов, то это можно сделать при помощи CSS.

Задача: изменить размер и цвет шрифта в заголовке “Новости”.

Найдем класс заголовка и значения стилей при помощи инспектора кода Firebug, если нужно - “переведем” значения через справочник.

Мы видим, что класс заголовка “Новости” называется .shop-heading, за размер шрифта отвечает свойство font-size, значение которого сейчас - 18px; а за цвет - свойство color со значением #111111 (темно-серый).

Перейдем в раздел “Дизайн” - ”Управление CSS” админзоны сайта и изменим эти значения на нужные нам. Например, увеличим размер до 28px, а цвет изменим на красный. Как вы помните, цвет указывается в шестнадцатеричном коде:

Сохраняем и смотрим, что получилось. Обратите внимание, что при изменении стиля элемента внешний вид поменяют ВСЕ элементы на сайте, к которым применен данный стиль. В нашем случае, стиль .shop-heading применен к заголовкам “Новости” и “Популярные товары”.

Что получилось:

Было                                                                                                          Стало

 

 

 

 

 

 

 

 

 

 

 

Еще несколько примеров работы с CSS описаны в нашем руководстве.

Возможные сложности

1. Не “срабатывают” стили, прописанные в файле CSS.    Решение: после значения свойства прописать правило !important, которое позволяет повысить приоритет стиля. Например:

.shop-heading{ color: #ff0000 !important; font-size: 28px !important;}

2. Вам не понравился результат работы со стилями. Решение: просто очистить файл стилей CSS в админзоне.

3. Если после изменения CSS вы сменили шаблон дизайна, то прописанные вами стили сохранятся, но могут не работать в случае, если на новом шаблоне используется другая верстка. Решение: внести изменения в CSS заново, с учетом новой верстки.

umi.ru

Страницы в UMI.CMS

Страницы в UMI.CMS — это объекты UMI.CMS с особыми дополнительными характеристиками:

Рассмотрим в качестве примера произвольную страницу контента на сайте. Введите в адресной строке запрос (см. описание «Страницы: протокол UPage»):

http://ваш_сайт/upage/id_выбранной_страницы

Вы можете увидеть примерно следующее:

<udata generation-time="0.114856"> <page parentId="0" link="/novaya_stranica_kontenta/" is-active="1" object-id="27146" type-id="10" update-time="1254299905" alt-name="novaya_stranica_kontenta"> <basetype module="content" method="">Страницы контента</basetype> <name>Новая страница контента</name> <properties> <group name="common"> <title>Основные</title> <property name="h2" type="string"> <title>Поле h2</title> <value>Новая страница контента</value> </property> <property name="content" type="wysiwyg"> <title>Контент</title> <value>контент новой страницы контента</value> </property> </group> <group name="svojstva_publikacii"> <title>Свойства публикации</title> <property name="publish_status" type="relation"> <title>Статус публикации</title> <value> <item name="Опубликован" type-id="745" ownerId="14" xlink:href="uobject://27085"/> </value> </property> </group> </properties> </page> </udata>

Можно видеть группы полей (отмечены жирным шрифтом) с непустыми полями, соответствующие полям, описанным в типе данных.

Однако можно видеть в этом примере, что у этой страницы есть свой object-id="27146" и, действительно, мы можем набрать в адресной строке:

http://ваш_сайт/uobject/27146

И мы увидим представление этой страницы как объекта:

<udata generation-time="0.019064"> <object name="Новая страница контента" type-id="10" ownerId="14"> <properties> <group name="common"> <title>Основные</title> ... </group> <group name="svojstva_publikacii"> <title>Свойства публикации</title> ... </group> </properties> </object> </udata>

dev.docs.umi-cms.ru

Prostoy-Site | Все права защищены © 2018 | Карта сайта