Для создания собственного дизайна Вашего сайта Вам потребуются знания
языка разметки (HTML) и системы стилей (CSS).
Сначала для создания дизайна в "Панели управления" выберите пункт
"Создать шаблон моего сайта".
Помните, что это именно создание, а не редактирование текущего дизайна.
На появившейся странице Вы можете увидеть следующие элементы:
- набор схем расположения блоков на сайте
- редактор с табами для различных блоков, свойств и настроек
- кнопки управления
Теперь Вам необходимо выбрать схему расположения блоков на Вашем сайте.
Это именно схема, расположить сами блоки по-другому Вы можете
в "Панели управления" в любой момент после создания дизайна.
Кстати, при наведении мыши на любой блок в схеме,
Вы увидите его текстовое описание.
Выбрать схему достаточно легко - нужно просто кликнуть на соответствующую картинку.
На данный момент доступны только 4 схемы,
но в будущем их количество будет увеличено.
Теперь перейдем к редактору. Редактор имеет следующие табы:
- нижний блок
- меню навигации
- дизайн окна
- блок входа
- блок контента
- блок описания раздела
- декораторы рабочих областей
- всплывающее окно
- контролы окна
- CSS переменные
- текст CSS
- выбранное представление шаблона
Самым простым табом является "Выбранное представление шаблона".
Он содержит HTML код, описывающий схему расположения блоков,
т.е. то, что Вы выбрали на предыдущем шаге.
Он служит для большего понимания того, как сделана данная схема.
Этот таб - только для чтения.
Следующий набор табов - декораторы рабочих областей.
Рабочая область - это логически отделенная часть сайта,
которая может содержать 0 и больше различных блоков.
Набор рабочих областей жестко закреплен в схеме дизайна.
Каждая рабочая область описывается HTML-кодом оформления и
тэгами вида @MLP_WORK_PLACE_N@, где N - номер рабочей области.
Данные тэги при выводе страницы подменяются на реальное содержание
рабочей области. При редактировании расположения блоков после создания дизайна Вы как
раз и перемещаете блоки между различными рабочими областями.
Следующий основополагающий таб - это "CSS переменные".
Этот таб позволяет редактировать набор переменных,
которые потом можно использовать во всех остальных табах.
Эта функциональность задумывалась для удобства указания
одних и тех же css свойств для различных тегов в различных табах.
В принципе, как Вы понимаете, то же самое можно сделать и просто указав
css класс и используя его везде где это необходимо.
"CSS переменные" кроме это реализует еще одну удобную вещь -
все именованные переменные становятся доступными для удобного
редактирования посредством форм в "Панели управления"
через пункт "Редактировать настройки дизайна".
Переменные должны добавляться в следующем формате:
<@ИМЯпеременной@>:<тип переменной>:<значение переменной>:<описание переменной>
Список доступных типов переменных:
- COLOR - цвет; для этого типа в пункте "Редактировать настройки дизайна" мы показываем форму выбора цвета
- FONT_FAMILY - свойства шрифта; для этого типа в пункте "Редактировать настройки дизайна" мы показываем форму выбора шрифта
- BORDER - свойства границы; для этого типа в пункте "Редактировать настройки дизайна" мы показываем форму выбора толщины, свойства и цвета границы
- FONT_WEIGHT - свойства толщины шрифта; для этого типа в пункте "Редактировать настройки дизайна" мы показываем форму выбора свойcтва шрифта
- FONT_SIZE - свойства размера шрифта; для этого типа в пункте "Редактировать настройки дизайна" мы показываем форму выбора размера шрифта
Типы переменных также будут расширяться в дальнейшем.
Описание переменной будет показано как название для соответствующей
формы в пункте "Редактировать настройки дизайна".
При этом использовать переменную нужно например так:
Цитата: |
body {
background-color: @BODY_BG_COLOR@;
}
| | |
Теперь поговорим о табе "Текст CSS". Этот таб позволяет редактировать CSS код,
который будет подключаться на каждой странице сайта.
Базовый набор стилей:
стили для иконки "свернуть" у блоков:
- span.window_minimize
- span.window_minimize font
стили для иконки "закрыть" у блоков:
- span.window_close
- span.window_close font
стили для иконки "редактировать" у блоков:
- span.window_edit
- span.window_edit font
стили, описывающие элементы табуляции в системе:
- ul.mlp_tab_block
- li.mlp_tab
- li.mlp_tab_active
- li.mlp_tab_active a
стили, описывающие оформление верхнего главного меню :
- span.top_menu_block
- span.top_menu_block_inner
- span.top_menu
- span.top_menu a
- span.top_menu#top_menu_active
- span.top_menu#top_menu_active a
стили, описывающие оформление заголовка таблицы:
- .InnerHead - для заголовка таблицы
- .OneLine - для нечетных строк таблицы
- .TwoLine - для четных строк таблицы
стили, описывающие блок сообщения об ошибке или предупреждения:
стили для данных, выведенных в Wiki с помощью тэга <pre>...</pre>:
Следующим опишем таб "Контролы окна". Контролы - это кнопки управления блока.
Почти каждый блок в дизайне имеет несколько из предопределенных контролов:
- control_edit - иконка "редактировать"
- control_close - иконка "закрыть"
- control_minimize - иконка "свернуть"
В этом табе, соотвественно, Вы можете отредактировать пути к каждой иконке
и использовать собственные картинки, закаченные Вами на свой сайт.
Например:
Цитата:
Еще один базовый таб "Дизайн окна" позволяет редактировать оформление,
которое используется для большинства (но не для всех) однотипных блоков на сайте.
Все блоки, которые было невозможно создать через стандартный блок, добавлены
в наш редактор как отдельные табы.
В этом и последующих табах используются внутренние теги и внутренние переменные.
Теги используются для разметки содержимого и удобной генерации страницы.
Вместо переменных же при генерации страницы подставляются данные.
Используемые тэги и переменные :
- <MLP_WINDOW_START> - обозначение начала кода окна
- </MLP_WINDOW_END> - обозначение конца кода окна
- <MLP_WINDOW_FORM_OPEN> - обозначение начала формы
- </MLP_WINDOW_FORM_CLOSE> - обозначение конца формы.
- @MLP_WINDOW_WIDTH@ - ширина блока, по умолчанию 100%;
Допустим, если Вы хотите сделать так, чтобы каждый(!) блок занимал
только 90% ширины отведенного ему пространства, у Вас есть возможность сделать это
- @MLP_WINDOW_TITLE@ - заголовок блока. Можно достаточно просто
поменять показ заголовков для всех блоков,
окружив, например, его так:
@MLP_WINDOW_TITLE@
- @MLP_WINDOW_CONTROL@ - набор контролов окна
(иконки "закрыть", "свернуть", "редактировать");
Если Вы хотите добавить собственный контрол для каждого блока,
то это можно сделать добавив до или после @MLP_WINDOW_CONTROL@ собственный код
- @MLP_WINDOW_BODY@ - содержание (контент) блока
Остальные табы служат для редактирования блоков,
разрешенных для редактирования.
Также эти блоки обычно не используют оформление из таба "Дизайн окна".
По порядку:
1. таб "Нижний блок"
Позволяет редактировать внешний вид нижнего блока страницы,
в котором выводятся копирайты.
Используемые тэги и переменные:
- @MLP_BOTTOM_MENU@ - строка копирайтов для скина. В своем скине удобно убрать эту переменную и написать свое имя :)
2. таб "Меню навигации"
Позволяет редактировать внешний вид блока, показывающего меню навигации.
Используемые тэги и переменные:
- @MLP_NAVIGATION_MENU_TITLE@ - заголовок окна навигации. С его помощью можно декорировать заголовок меню навигации. Также можно его вообще удалить и написать собственный.
- @MLP_NAVIGATION_MENU_ITEM_CONTENT@ - элемент навигации (пункт меню);
Каждый пункт из меню можно оформить, окружив эту переменную HTML кодом.
- <MLP_NAVIGATION_MENU_ITEM_START> - начало цикла вывода пунктов меню
- </MLP_NAVIGATION_MENU_ITEM_END> - конец цикла вывода пунктов меню
3. таб "Блок входа"
Позволяет редактировать внешний вид блока для входа на сайт или блока "Пользователь",
которое показывается когда пользователь вошел на сайт.
Используемые тэги и переменные:
- <MLP_LOGIN_MENU_FORM_OPEN> - обозначение начала формы
- </MLP_LOGIN_MENU_FORM_CLOSE> - обозначение конца формы
- @MLP_LOGIN_MENU_TITLE@ - заголовок блока. С его помощью можно декорировать заголовок. Также можно его вообще удалить и написать собственный.
- @MLP_LOGIN_MENU_CONTENT@ - содержание блока
4. таб "Блок контента"
Позволяет редактировать внешний вид блока,
показывающий основную информацию (контент) страницы.
Используемые тэги и переменные:
- @MLP_CONTENT_TITLE@ - заголовок блока. С его помощью можно декорировать заголовок. Также можно его вообще удалить и написать собственный.
- @MLP_PAGE_ACTION@ - показывает ссылку на вывод страницы в RSS
- @MLP_CONTENT_BODY@ - содержание страницы
5. таб "Блок описания раздела"
Позволяет редактировать внешний вид блока,
показывающий описание текущего раздела сайта.
Сам текст описания можно редактировать при редактировании меню навигации.
Блок обычно выводится над блоком контента.
Используемые тэги и переменные:
- @MLP_PAGE_TOP_CENTER_TITLE@ - название раздела
- @MLP_PAGE_TOP_CENTER_CONTENT@ - описание раздела
6. Всплывающее окно
Позволяет редактировать внешний вид блока,
который всплывает при каком-то действии (например, при наведении на имя пользователя).
В большинстве случаев похоже на описание стандартного окна,
но при наличии скругленных краев, имеет прозрачный фон,
чтобы не перекрывать контент страницы.
Используемые тэги и переменные:
- <MLP_WINDOW_START> - обозначение начала кода окна.
- <MLP_WINDOW_FORM_OPEN> - обозначение начала формы.
- @MLP_LOGIN_MENU_TITLE@ - ширина окна в пикселях.
- @MLP_WINDOW_TITLE@ - заголовок окна.
- @MLP_WINDOW_CONTROL@ - контролы окна (иконки "закрыть", "свернуть").
- @MLP_WINDOW_BODY@ - содержание окна (контент).
- </MLP_WINDOW_FORM_CLOSE> - обозначение конца формы.
- </MLP_WINDOW_END> - обозначение конца кода окна.
Теперь можно сказать и кнопках управления. Кнопки - это лишь условное название.
На самом деле - это:
- кнопка "сохранить" - предназначена для сохранения содержания текущего таба
- кнопка "Сбросить изменения" - устанавливает для ВСЕХ (!) табов стандартное содержание, которое берется из описания текущей схемы
- линк, ведущий на Ваш сайт - очень удобно для проверки изменения.
Алгоритм следующий - редактируем таб, сохраняем и жмем на линк для проверки - как это изменило показ Вашего сайта
- линк "Установить стандартный скин сайта" - при клике устанавливает стандартный дизайн, при этом сбрасывая
все Ваши изменения. Стандартный дизайн на данный момент это дизайн №4
Вам так же пригодятся
Вход
Регистрация
