ExBB Community :: Версия для печати :: Использование слоев при изготовлении скинов для форума

1. LordShad0W - 8 ноября 2009 — 21:22 - перейти к сообщению

Уважаемые пользователи форума ExBB!

Сидел делал новый скин, вдруг задался таким вопросом:

Хочется в скинах реализовать такую идею, чтобы рисунки tile_down.gif (синие полоски на форуме, в которых пишется название форумов) выглядели не так:
[img=http://img7.imageshost.ru/imgs/0...42214/t2d7c8.jpg]
а к примеру вот так:
[img=http://img7.imageshost.ru/imgs/0...d66a6/t2cff4.jpg]
или так:
[img=http://img7.imageshost.ru/imgs/0...30681/t30f38.jpg]
То есть, к примеру такую полоску сделать не просто прямой, а фигурной или с какими то рисунками по краям (1)...
И второе: Как реализовать, чтобы фон можно было делать таким, как на 3-м рисунке (2)

У кого какие предложения есть, пишите....

2. altjo - 9 ноября 2009 — 15:22 - перейти к сообщению

LordShad0W пишет:

То есть, к примеру такую полоску сделать не просто прямой, а фигурной или с какими то рисунками по краям (1)...

как вариант (скругление углов) см. как это сделано в шкурке ExBBDarkGrey или ExBBLightGrey (хотя, возможно, не совсем удачно, но в браузерах работает). Раньше делал через div'ы, но в ИЕ6 появлялись баги, поэтому пришлось отказаться от этого в пользу дополнительной таблицы с тремя ячейками...
(Добавление)
да и Defenderyk тоже скруглял углы в новом стиле, правда не знаю каким макаром он это сделал )

3. LordShad0W - 10 ноября 2009 — 14:29 - перейти к сообщению

altjo пишет:

Раньше делал через div'ы, но в ИЕ6 появлялись баги, поэтому пришлось отказаться от этого в пользу дополнительной таблицы с тремя ячейками...

altjo пишет:

да и Defenderyk тоже скруглял углы в новом стиле, правда не знаю каким макаром он это сделал )

Ну я тему создал специально для примеров. То, что это можно сделать по разному и так понятно, а вот как именно применить это - не совсем..Желательно бы подробное описание всего... Хорошо

Тем более интересуют не только закругления, а к примеру всяческие навески (как в скине BloodRosesExBB) типа цветочков, кандилябриков и т.д.

4. altjo - 19 ноября 2009 — 17:06 - перейти к сообщению

В общем делалось это как-то так...
*однако замечу весьма трудоемко (в плане правки файлов)

ПРИМЕР (как делал у ExBBDarkGrey с помощью таблицы, по крайней мере то, что вспомнил)
- открываем шаблон news.tpl (для примера) отвечающий за вывод Объявлений на главной странице

там есть такое

CODE:

<img src="./templates/InvisionExBB/im/nav_m.gif" border="0" alt=">" width="8" height="8" />  {$fm->LANG['Announ']}

где {$fm->LANG['Announ']} заменяется на слово "Объявления"

помещаем эту строку в среднюю ячейку новой таблицы (первая - левый рисунок; третья - правый)

---------------------------------------------------------------- ----
<table width="100%" id="blah" cellspacing="0" cellpadding="0"><tr>
<td class="mleft"></td>
<td valign="middle" align="left"><img src="./templates/InvisionExBB/im/nav_m.gif" border="0" alt=">" width="8" height="8" />  {$fm->LANG['Announ']}</td>
<td class="mright"></td>
</tr></table>
---------------------------------------------------------------- ----

где <td class="mleft"></td> первая ячейка с левым рисунком
<td class="mright"></td> третья с правым

CSS
в maintitle

CODE:

.maintitle { background-color: #6495ed; vertical-align:middle;font-weight:bold; color:#FFF; padding:8px 0px 8px 5px; background-image: url(im/tile_down.gif) }

вместо
padding:8px 0px 8px 5px;
пишем
padding:0;
удаляем background-image и background-color

т.е.

CODE:

.maintitle { vertical-align:middle;font-weight:bold; color:#FFF; padding:0;}

добавляем

CODE:

.mleft {background:url('im/im_left.gif') no-repeat left top; padding:0 5px; height:100%; width:1px;}
.mright {background:url('im/im_right.gif') no-repeat right top; padding:0 5px; height:100%;}
#blah {border:0; padding:0; margin:0; background:url(im/'imgtitle.gif') repeat; height:30px;}

результат

*нарисовать можно что угодно, например, такое, или скруглить углы...
в архиве три рисунка (нужно залить в папку im скина)