Cоздание Темы оформления SMF

[KapaBG]

орегенал статьи находитсо тута. имеетсо ввиду што найдутсо добровольцы и переведут еще чуток и так далей (устал нах)

Руководство по созданию Темы оформления SMF

версия 2.0

Содержание

• Введение
• Часть 1 - С чего начать
• Часть 2 - Таблицы Каскадных Стилей (CSS)
• Часть 3 - Рекомендации при создании Темы оформления
• Заключение
• Копирайты и Ссылки

Введение

Это простое руководство по написанию Темы для Simple Machines Forum. Для этого вам понадобятся следующее:

1. Рабочая версия Simple Machine Forum на сервере, который поддерживает запуск скриптов PHP и SQL.
2. Таблицы цветов в 16-ричном виде

Часть 1 - С чего начать

Прежде чем создавать свою тему оформления, сначала инсталлируйте SMF на свой сайт, или перейдите на уже готовый форум. Чтобы изменять темы, используя права администратора, зайдите в Центр Администрации и в меню с левой стороны экрана выберите пункт "Темы оформления".

В этой части контрольноой панели, перейдите в секцию "Установить новую тему оформления". Выберите пункт "Создать копию используемой по умолчанию темы:" и введите название темы, которую вы выбрали сами. В моем примере - MyTheme. Нажмите кнопку "Установить".

После того, как вы только что установили свою тему, вы можете изменять Таблицы Вложенных Стилей (CSS), которая представляет собой простой текстовый файл, описывающий все цвета, шрифты, стили и прочие атрибуты вебсайта. Для изменений в новом шаблоне темы, нужно на той же странице с которой вы установили вашу тему, перейти на закладку "Изменение темы оформления" и найти название вашей темы.

Вы можете попробывать просмотреть что каждый пункт собой представляет, но сейчас нас будет интересовать пункт "Изменить стили (CSS) этой темы оформления."

Часть 2 - Таблицы Каскадных Стилей (CSS)


Как уже упомянуто в Части 1, CSS представляет собой простой текстовый файл с кодом, описывающий все цвета, шрифты, стили и прочие атрибуты форума. Код который вы теперь видите, является Таблицами стилей форума. Если вам трудно разобраться с этим, продолжайте читать это руководство!

Я сделаю общий обзор его различных разделов, что бы смогли модифицировать содержимое этих таблиц стилей.

Код Выделить Развернуть

/* Normal, standard links. */
a:link
{
color: #000000;
text-decoration: underline;
}
a:visited, a:hover
{
color: #323232;
text-decoration: underline;
}

Выше расположено управление всеми цветами ссылок на вашем форуме (за исключением навигации в дереве ссылок). Этот кодом задает правило, что для всех нормальных ссылок по умолчанию цвет должен быть черным и подчеркнутым. Для ссылок, которые вы уже недавно посетили, или навели на него курсор мыши, ссылка по умолчанию тоже будет подчеркиватся и цвет для них будет темно-серым (в демонстрационных целях я выставил значение цвета в файле и на картинке #323232)

Код Выделить Развернуть

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
font-weight: bold;
color: #cc3333;
text-decoration: underline;
}

Этот небольшой отрывок кода определяет действие навигации по ссылкам, как на картинке выше. Если вы заметили, навигация в списке, ссылкаи и посещенные ссылки черного цвета и без подчеркивания. Ссылка "Добро пожаловать в SMF!" является примером ссылки под курсором мыши (hovering). Код указывает на то, чтобы такого рода ссылка была темно-красной и подчеркнутой.

Я пропускаю "Пустые ячейки в таблицах (tables) тоже должны быть показаны". Поскольку никто обычно и не использует столы (tables) каким-то образом

Код Выделить Развернуть

/* By default (td, body..) use Tahoma in black. */
body, td
{
color: #000000;
font-size: small;
font-family: Tahoma, arial, helvetica, serif;
}

Следущая порция кода, фактически является самой важной частью CSS. Эта часть устанавливает цвет самого разного текстового содержимого, такого как список разделов, заголовка и нижнего колонтитула и текста в теле страницы. Как вы видите, по умолчанию он черный, размер - small, и семейство шрифтов включает Tahoma, Arial, Helvetica и Serif (Примечание: для наглядности я изменил цвет по умолчанию #000000 на лимонно-зеленый #01D901).


Часть 3 - Рекомендации при создании Темы оформления

Заключение

Копирайты и Ссылки

[KapaBG]

картинки черезчур искажонные в натуре оне весма приличные у мене

[Lysyj]

может потому что здесь используется GD2?

[KapaBG]

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

[ZeUsSaN]

а как добавить в "Информационный центр" ячейки или строчки, или и то и другое

[SergeyA]

Извините что поднимаю старую темку, просто хотелось бы подробнее углубиться в данный вопрос.
Если есть возможность у кого-то поправить картинки ибо не видно...

[Mavn]

не представляется возможным картинки были размещены на другом ресурсе и у нас нет к ним доступа