Некоторые «трюки» при создании стилей к IP.Board.

[SpeeN]

Основные «трюки» при создании стилей IPB. Часть первая.

Создание стиля это дело творческое и у каждого дизайнера свои способы реализации идеи. Я постараюсь выделить основные моменты в этом процессе.

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

А теперь более подробно об изменениях в шапке (header)

 

Создаём графическое подменю

http://hands.kanet.ru/before.jpg

Я буду рассматривать варианты создание подменю через таблицы, т.к. это очень удобно и довольно просто. Итак, поехали.

Для начала определимся с количеством и размером наших кнопок. Я выбрал размер 100х25 с количеством кнопок равным 8.

Итак, вот одна из кнопок

+ мне потребуется фон для кнопок (хотя можно обойтись и без него). Фон возьму размером 5x30.

Действие I.

Избавляемся от ненужного куска кода. Ненужный кусок в нашем случае это стандартное подменю =). Открывает html фрагменты форума: Основные фрагменты(All Global HTML) >> global_board_header. Ищем и удаляем кусок:

 

 <div id="submenu">
	<p class="home"><!--ipb.leftlinks.start--><a href="{ipb.vars['home_url']}">{ipb.vars['home_name']}</a><!--IBF.RULES--><!--ipb.leftlinks.end--></p>
	<p><!--ipb.rightlinks.start-->
<if="ipb.vars['blog_default_view'] != """>
<a href="{ipb.script_url}automodule=blog">{ipb.lang['blog']}</a>
</if>
<if="ipb.vars['gallery_images_path'] != ''">
<a href="{ipb.script_url}act=module&module=gallery">{ipb.lang['gallery']}</a>
</if>

<a href="{ipb.script_url}act=Help">{ipb.lang['tb_help']}</a><a href="{ipb.script_url}act=Search&f={ipb.input['f']}">{ipb.lang['tb_search']}</a><a href="{ipb.script_url}act=Members">{ipb.lang['tb_mlist']}</a><a href="{ipb.script_url}act=calendar">{ipb.lang['tb_calendar']}</a><!--IBF.CHATLINK--><!--IBF.TSLLINK-->
	<!--ipb.rightlinks.end--></p>
</div>

 

Действие II

Добавления в CSS:

фон для кнопок

 .fon_button { background: url(<#IMG_DIR#>/fon.gif); /*путь до изображения*/
border: 0px;
width: 100%; 
height: 30px;
}

 

Действие III.

 

Возвращаемся к html фрагментам Основные фрагменты(All Global HTML) >> global_board_header.

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

<!--ipb.logo.end--></a></div>

создаем таблицу и заполняем её.

 <table width="100%" height="30px" border="0" cellpadding="0" cellspacing="0">
<tr class="fon_button" height="30">
<td><a href="#"><img src="http://путь до форума/style_images/1/news.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/forums.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/members.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/help.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/kal.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/search.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/rules.gif"></a></td>
<td><a href="#"><img src="http:// путь до форума /style_images/1/statis.gif"></a></td>
</tr>
</table>

 

Готово. Меню можно переместить повыше если необходимо. Немного подправлю Лого под выбранный в меню стиль и вот что у нас получается в шапке, немного правлю css. Всё

 

Примечание:

1. Вместо # указываем ссылку до места.

2. Можно добавить alt для того чтобы была возможность видеть названия ссылокпри просмотре страницы без загрузки изображений, т.е. добавить к <img src="http:// путь до форума /style_images/1/help.gif"> alt. И получится: <img src="http:// путь до форума /style_images/1/help.gif" alt=”Помощь”>

 

Основные «трюки» при создании стилей IPB. Часть вторая.

 

Фон форума.

Изображение как фон форума

Для того чтобы сделать изображение фоновым рисунком форума необходимо сделать небольшие изменения в CSS. Итак, открываем CSS и ищем:

 body{ 
background: #FFF;
color: #7D7B7B;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
font-size: 11px;
line-height: 135%;
margin: 0;
padding: 0; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}

 

Теперь сделаем небольшие изменения. Допишем в background форума путь до изображения.

 

 body{ 
background: #FFF url(http://путь до изображения) no-repeat center fixed;
color: #7D7B7B;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
font-size: 11px;
line-height: 135%;
margin: 0;
padding: 0; /* required for Opera to have 0 margin */
text-align: center; /* centers board in MSIE */
}

 

Смотрим изменения.

url(style_images/1/11.jpg) no-repeat center fixed;

 

1) url(style_images/1/11.jpg) – путь до картинки

 

2) no-repeat center – не повторять, разместить по центру

 

3) fixed – не обязательно писать. При просмотре страницы не закреплён, а подвижен, т.е. при прокручивается вместе со страницей.

 

http://hands.kanet.ru/fon1.jpg

 

Можно также сделать изображение небольшого размера (скажем 4х4 ) которое замостит форум. Для этого необходимо убрать параметр в CSS, т.е. удаляем

 no-repeat center fixed

 

 

Основные «трюки» при создании стилей IPB.Часть третья.

Дополнительные блоки и поля.

 

Обычно всегда ищется место, где можно было бы разместить какую-то важную, полезную информация. К примеру кнопки обычно ставят под копирайтом, спонсоров располагают рядом с описанием форумов и разделов, а баннеры в шапке. Но ведь если необходимо, чтобы информация была видна или её много, да или уже все места куда можно было что-то засунуть, заняты, то необходимо что-то делать. Я предлагаю вариант с добавлением дополнительного блока к форуму через таблицы.

Итак, нам необходимо сделать дополнительный блок. Для этого подводим наш форум в один блок(или одну большую ячейку) и к нему добавляем ещё один. Форум будет сужаться. Можно либо определить размеры, до которых форум будет (т.е. сделать конкретные размеры ячеек), либо просто аккуратно вписывать в блок всё необходимое(к приvеру используя тег <br>.

Приступим.

Открываем и редактируем основой шаблон форума (Edit Root Skin Board Header & Footer Wrapper).

Добавляем перед <div id="ipbwrapper">

 <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr><td>

Далее добавляем после <% COPYRIGHT %></div>

 </td><td width="150px">Россия, политика, экономика, современная история
Посвящается объяснению идей. Круг рассматриваемых вопросов ограничен лишь их общественной значимостью. События, наука, культура, война и мир - всё что касается нас и нашей страны.</td></tr></table>

После увидите, что в середине форума у нас появилось дополнительный блок и с текстом. Я ограничил размер блока (150 пикселей), т.к. у меня только текст.

Играя с размерами блока можно вставить в него практически всё.

Теперь можно немного модифицировать наш блок.

 

http://hands.kanet.ru/part3(1).jpg

 

 </td><td width="150px"><div class="borderwrap"><div class="maintitle">Описание</div><div class="row2">Россия, политика, экономика, современная история
Посвящается объяснению идей. Круг рассматриваемых вопросов ограничен лишь их общественной значимостью. События, наука, культура, война и мир - всё что касается нас и нашей страны.</div></td></table>

Поставил блоки с начала форума + ёщё немного полезной информации сделанных в блоках и готово*)

 

http://hands.kanet.ru/part3(2).jpg

 

Обратите внимание!

При создании блока необходимо немного уменьшить ширину форума в CSS

(#ipbwrapper{

width: 98%;

} ). Уменьшать в зависимости от ширины блока.

[Ziga]

Почему-то не получается сделать фон форума...

[Miroan]

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

[SpeeN]

что именно не получается? Путь до изображения точный указан? Вообще что-либо изменяется?

[Ziga]

не меняется, ничего. Писал по-всякому...

В результате остановилсо на том что б прописать в ваппер

//

<style type="text/css" media="all">

body

{

background: url(style_images/webber/2.gif);

}

</style>

//

[SpeeN]

в CSS стиля прописываете или просто в нтмл фрагменты вставляется? Путь точен?

[Ashtone]

Меню можно переместить повыше если необходимо.

Как это сделать?