Создаем свой уникальный стиль.Часть 1

[k1llers]

Создаем свой уникальный стиль.Часть 1


Здарова, мой верный читатель :D, в этом уроке будем создавать свой уникальный дизайн, точнее переделывать стиль subsilver2 на свой личный. В этот раз урок будет длинным, только не устаньте читать.

Сейчас будет оформлять главную страницу форума.
На главной странице спользуется несколько шаблонов, overall_header, overall_footer, index_body, forumlist_body, breadcrumbs и возможно другие.

Подробнее о шаблонах:
Что бы изменить шаблоны, переходим: Админ Панель -> Стили -> Шаблоны -> Ваш стиль(В данном случае subsilver2)...

overall_header.html — верхний колонтитул конференции.
overall_footer.html — нижний колонтитул конференции.
index_body.html — этот файл отображает содержимое главной страницы.
forumlist_body.html — этот файл отображает категории и форумы на главной странице.
breadcrumbs.html — страница, отображающая текущую полосу навигации по конференции, и настройки времени.
и т.д.

Заходим в первый шаблон, overall_header.html.
Сейчас будем менять логотип форума. Для легкого способа поменять, можно зайти в мененджер картинок, занрузить логотип, и нажать кнопку "Установить как логотип для стиля subsilver2". Это был второй способ, перейдем подробнее к первому способу.
Будем менять именно этот логотип:

[Ссылки могут видеть только зарегистрированные пользователи. ]

За логотип отвечает html код "{SITE_LOGO_IMG}". Ищем такую строку

<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>

Подсказка от CTAJIb:
Для более быстрого нахлждения строки, нажимаем клавищи, ctrl+f, это работает для браузера google chrome, для других браузеров другая комбинация клавиш. Если вы не нашли определенную строку, то найдите ее по частям, например, надо найти строку: "<td><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>" по отдельности будет: "{SITE_LOGO_IMG}" и т.д.

Нашли. Разберем ее на подробности:
{U_INDEX} - ссылка на главную страницу форума
{SITE_LOGO_IMG} - ссылка на логотип форума.

Идем дальше. Нам сейчас нужно поставить другую картинку, значит заменяем {SITE_LOGO_IMG} на html тег img с ссылкой, например, html тег для картинки, это <img src="URL" alt="альтернативный текст">, заменяем {SITE_LOGO_IMG} именно на html тег. Теперь только вставляем картинку, то есть заменяем URL в html теге на ссылку на картинку.

Пример вставленной картинки:

[Ссылки могут видеть только зарегистрированные пользователи. ]

Все с логотипом мы разобрались. Переходим к фону под логотипом. Частенько мы будем заходить в CSS стиля.

[Ссылки могут видеть только зарегистрированные пользователи. ]


Уголок идиота:
Дяденька, а-а для чего он нужен, Этот CSS?
Дело в том, дорогой читатель, он обязателен для любого форума, проекта.
Он определяют отображение различных объектов, цвета, фоны, ссылки и так далее, который содержит информацию о теме оформления.

Теперь вы знаете для чего нужен CSS, по другому Тема Стиля. Туда можно зайти по такому пути:
Админ панель -> Стили -> Тема стиля -> ваш стиль

Для того что бы изменить фон под логотипом, ищем такую строку "#logodesc"
Полный вид она выглядет так:

#logodesc {
    margin-bottom: 5px;
    padding: 5px 25px;
    background: #D9DFE4;
    border-bottom: 1px solid #4787A7;
}

Разбераем на подробности:
margin-bottom - Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента
padding - Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
background - Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно.

Идем далее. За фон отвечает "background", вот его и будем менять. Для background допустимы несколько значений, то есть, можно на фон поставить картинку, цвет и т.д.
Про background вы можете прочитать в [Ссылки могут видеть только зарегистрированные пользователи. ]. Прочитали, идем далее. После прочитанного вы поняли, как поставить цвет или картинку.

Переходим к редактированию меню.
Я научу редактировать уже имеющейся меню, и заменять на новое меню
Редактируем меню. Заходим в overall_header.html. Ищем строчку "<div id="menubar">".
Полностью эта опция имеет такой вид:

<div id="menubar">
        <table width="100%" cellspacing="0">
        <tr>
            <td class="genmed">
                <!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->
                <!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
                <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
                <!-- IF not S_IS_BOT -->
                    <!-- IF S_USER_LOGGED_IN -->
                        <!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
                    <!-- ELSEIF S_REGISTER_ENABLED --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
                    <!-- ENDIF -->
                <!-- ENDIF -->
            </td>
            <td class="genmed" align="{S_CONTENT_FLOW_END}">
                <a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> {L_FAQ}</a>
                <!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
                <!-- IF not S_IS_BOT -->
                    <!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
                    <!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
                <!-- ENDIF -->
            </td>
        </tr>
        </table>
    </div>

Такие ссылки как FAQ, поиск или пользователи и т.д. отвечает всего одна строчка:

<a href="ссылка"><img src="картинка" width="12" height="13" alt="*" /> название</a>
Может быть и так
<!-- IF not S_IS_BOT --><a href="ссылка"><img src="картинка" width="12" height="13" alt="*" /> название</a><!-- ENDIF -->
и т.д.

Заместо "ссылка" можно написать ссылку на страницу, "картинка" - знеачок ссылки, "название" - имя ссылки. Например, ссылка на "Личный раздел" имеет такой вид:

<!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->

Что бы добавить новую ссылку на любую страницу, ПЕРЕД

</td>
        </tr>
        </table>
    </div>

Добавляем:

<a href="ссылка"><img src="картинка" width="12" height="13" alt="*" /> название</a>

Можно и без значка:

<a href="ссылка">название</a>

В теме стиля(CSS) отвечает за меню такая строчка:

#logodesc {
    margin-bottom: 5px;
    padding: 5px 25px;
    background: #D9DFE4gg;
    border-bottom: 1px solid #4787A7;
}

Здесь вы можете добавить/изменить обводку меню, фон, картинку и т.д.

Теперь переходим к добавлению готовой меню.
Например, у вас есть меню, которое имеет CSS, и сам скрипт менюшки. В самый конец темы стиля, добавляем CSS новой меню, а старое меню(то что написано выше), заменяем новым. Обычно в скрипте есть такая строка:

<li><a href="ссылка">название</a></li>

Знеачит просто со старой меню копируем ссылку, и название. Также не забываем о том что некоторые ссылки не должны видеть гости или пользоваетели, поэтому, как в старой менюшке, перед <li> добавляем соответсвующие ему html код, "<!-- значение -->" и после </li> - <!-- ENDIF -->. Например для ссылки на поиск в старой менюшке имеет такой вид:

<!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->

То в новой менюшке будет так:

<!-- IF S_DISPLAY_SEARCH --><li><a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a></li><!-- ENDIF -->

И не забывем редактировать меню в CSS.

Пока на этом первый урок заканчивается. Все непонятки и вопросы, задаем здесь.

Автор: CTAJIb(k1llers)