Конструктор скинов для www.forum.HeroesWorld.ru



Что нужно для того чтобы создать скин:
1) Оформить графическую часть скина. Описание папок в которых хранятся графические файлы представлена ниже под загаловком "Директории изображений". Соответственно заменив существующие картинки теми которые вы хотите чтобы присутствовали в скине.
2) Оформить стили отображения для текста, границ, фонов и т.д. Для этого ниже располагаются все стили с описанием каждого. Сделано очень удобно [например чтобы изменить цвет можно кликнуть по цвету и выбрать из палитры]. Если какие-то поля не заполнены они будут стандартными. В данный момент они заполнены в таком виде в каком представлен www.forum.heroesworld.ru первоначально.
3) После оформления картинок и стилей [такую операцию можно и нужно проводить в процессе создания] в самом конце страницы находится кнопочка "Создать CSS стиля". При нажатии на нее ниже появится созданный на основе выбранных вами стилей выше содержимое файла css. Теперь вам необходимо скопировать это содержимое и заменить то что сейчас находится в файле "style.css".{желательно скопировать куда-нибудь стандартный "style.css" - он может вам понадобиться}. После этой замены запускаем в браузере "forum.htm" и видим измененную версию нашего любимого геройского портала - теперь уже со скином созданным вами в текущий момент.
4) Теперь что нужно именно выкладывать на форуме чтобы admin мог закачать этот скин и активировать:
4.1) Сохраняем страницу, после того как все стили настроены и протестированы, "scin_form.htm" без графики, т.е в Internet Explorer это выглядит как [Файл->Сохранить как...->Веб страница. Только HTML(*.htm, *.html)]
4.2) Сохраняем содержимое CSS стиля, которое создано по нажатии "Создать CSS стиля" [допустим в файл "scin.css"]
4.3) Теперь создаем отдельный каталог допустим "scin_1"
4.4) Копируем туда все что было изменено в папочке "images" в "scin_1\images"
4.5) Копируем "scin_1\scin_form.htm" и "scin_1\scin.css"
4.6) Можно еще всю папку заархивировать zip-ом, при желании - чтобы выкладывать только один файл.
5) Ну и чтобы скин был установлен на форум еще нужно согласие форумчан ;)
6) Теперь скин будет установлен. УРА !!!

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

  
Директория иконок статуса Эта директория содержит все изображения, представляющие статус разделов, тем, сообщений и т.д.
Например: announcement_old.gif / announcement_new.gif

  
Директория иконок для вложений Эта директория содержит различные иконки, используемые для представления различных типов вложенных файлов, например txt, jpg, zip и т.д.
  
Папка прочих изображений Эта директория содержит различные изображения, которые не вошли в другие разделы.
  
Директория элементов управления текст. редактора Эта директория содержит кнопки и элементы интерфейса для редактора текста (используется для написания/редактирования сообщений)
  
Директория изображений для опросов Эта директория содержит изображения, используемые для построения цветных полос в результатах опросов.
  
Директория изображений рейтинга Эта директория содержит изображения, используемые для иллюстрации рейтинга (обычно для тем).
  


Body
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Body Раздел 'Body' используется для установки цвета внешней границы страницы, и установки базовых параметров для текста и ссылок на всех страницах.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: body


Фон страницы
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Фон страницы 'Фон страницы' используется, чтобы установить основной фон и цвета текста страницы.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .page


<td>, <th>, <p>, <li>
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
<td>, <th>, <p>, <li> Используйте эту настройку, чтобы установить атрибуты текста для всех элементов текста на странице, которые могут игнорировать атрибуты 'body', например текст внутри тегов <td> и т.д.
CSS селектор: td, th, p, li


Граница таблицы
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Граница таблицы 'Граница таблицы' используется, чтобы установить цвет фона всех таблиц, отображается в виде линий между ячейками. Также это используется для определения внешней границы таблицы.
CSS селектор: .tborder


Полосы категорий
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Полосы категорий Раздел 'Полосы категорий' также служат двум целям. Они используются для обозначения 'Категорий' (закрытых для сообщений) разделов форума, а также используются как стиль заголовка большинства таблиц.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .tcat


Заголовок таблицы
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Заголовок таблицы 'Заголовок таблицы' наиболее часто используется как стиль для заголовка колонки в таблице, но также иногда используется для заголовка маленькой таблицы, например 'Правила форума'.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .thead


Низ таблицы
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Низ таблицы Некоторые таблицы имеют дополнительную строку для размещения элементов управления и т.д. 'Низ таблицы' используется как стиль для этой строки.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .tfoot


Первый чередующийся цвет
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Первый чередующийся цвет Большинство ячеек таблицы в страницах форума использует или Первый или Второй цвет как фон.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .alt1, .alt1Active


Второй чередующийся цвет
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Второй чередующийся цвет Большинство ячеек таблицы использует или Первый или Второй цвет как фон.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .alt2, .alt2Active


Визуальный редактор (Обычно как 'Первый чередующийся цвет ' или 'Поля ввода')
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Визуальный редактор (Обычно как 'Первый чередующийся цвет ' или 'Поля ввода') Этот стиль будет применен к области сообщения визуального редактора. Для полной эмуляции форума, настройки должны разделяться 'Первым чередующимся цветом'.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .wysiwyg


Поля ввода
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Поля ввода 'Поля ввода' используется как единый стиль для многострочных полей формы
CSS селектор: textarea, .bginput


Кнопки
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Кнопки Раздел 'Кнопки' используется для определения стиля кнопок, таких как 'submit' и 'reset', а также любых других элементов вида <input type="button" ... />.
CSS селектор: .button


Поля <select>
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Поля <select> Все поля <select> будет стилизованы в соответствии с этой настройкой.
CSS селектор: select


Маленький шрифт
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Маленький шрифт Этот стиль применяется в случаях, когда требуется шрифт, меньший, чем нормальный.
CSS селектор: .smallfont


Цвет Времени
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Цвет Времени 'Стиль Времени' применяется, как правило, для отображения времени.
CSS селектор: .time


Текст панели навигации
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Текст панели навигации Эти настройки управляют стилем навигационной панели.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .navbar


Выделенный шрифт
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Выделенный шрифт 'Выделенный шрифт' используется главным образом, чтобы выделить найденные слова в результатах поиска, но может использоваться и в других целях.
CSS селектор: .highlight


Подсветка элементов встроенной модерации
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Подсветка элементов встроенной модерации Когда включена встроенная модерация, соответствующие элементы будут стилизованы в соответствии с этим классом.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: td.inlinemod


Окружение панели
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Окружение панели Этот стиль определяет толщину границы, которая обрамляет панель, используемую для большинства форм.
CSS селектор: .panelsurround


Панель (формы)
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Панель (формы) 'Панель' используется для создания панели, в которой отображается большинство элементов формы.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .panel


<legend>
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
<legend> Используйте эту установку, чтобы установить стиль <legend> текст, который появляется на границе тега <frameset> в формах.
CSS селектор: legend


Управление всплывающим меню
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Управление всплывающим меню Этот стиль применяется к элементам, которые при нажатии открывают всплывающее меню. Также иногда используется просто, чтобы подчеркнуть элемент, содержащий ссылку.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .vbmenu_control


Всплывающее меню
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Всплывающее меню Этот стиль применяется к всплывающему меню 'vbmenu'.
CSS селектор: .vbmenu_popup


Строки всплывающего меню
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Строки всплывающего меню Этот стиль применяется к каждой строке всплывающего меню 'vbmenu'.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .vbmenu_option


Подсвеченный пункт всплывающего меню
Стандартные атрибуты CSS
Фон
 
Цвет шрифта
 
Стиль шрифта
Размер шрифта
Тип шрифта
Дополнительные атрибуты CSS
Описание
Подсвеченный пункт всплывающего меню Пункт всплывающего меню под курсором.
ссылки CSS нормальный
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS посещено
Фон
 
Цвет шрифта
 
Оформление текста
ссылки CSS Под курсором
Фон
 
Цвет шрифта
 
Оформление текста
CSS селектор: .vbmenu_hilite


Быстрый переход по форуму [к сожалению admin не успел сделать функциональность для этих опций]
Фон
 
Цвет шрифта
 
Глубина 0 пунктов
Фон
 
Цвет шрифта
 
Глубина 1 пунктов
Фон
 
Цвет шрифта
 
Глубина 2 пунктов
Фон
 
Цвет шрифта
 
Глубина 3 пунктов
Фон
 
Цвет шрифта
 
Глубина 4 пунктов
Фон
 
Цвет шрифта
 


Дополнительные определения CSS
Продвинутым пользователям:  
Вы можете добавить дополнительные CSS для использования в своих шаблонах. Любой текст, указанный здесь, будет вставлен в конце тега <style>


Управление стилями текстового редактора [к сожалению admin не успел сделать функциональность для этих опций]
Эти настройки влияют на отображение элементов управления визуального и стандартного редактора текста.
Кнопки редактора в нормальном состоянии
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Кнопки редактора в состоянии наведенного курсора
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Кнопки редактора в нажатом состоянии
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Кнопки редактора в выбранном состоянии
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Пункты меню редактора в нормальном состоянии (только визуальный редактор)
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Пункты меню редактора в состоянии наведенного курсора (только визуальный редактор)
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Пункты меню редактора в нажатом состоянии (только визуальный редактор)
Фон
 
Цвет шрифта
 
Заполнение
Граница
 
Всплывающее меню редактора в нажатом состоянии (только визуальный редактор)
Фон
 
Цвет шрифта
 
Заполнение
Граница