Перейти к контенту

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


Рекомендуемые сообщения

Основные «трюки» при создании стилей 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%;

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

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

//

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

body

{

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

}

</style>

//

Ссылка на комментарий
Поделиться на других сайтах

  • 9 месяцев спустя...

Присоединиться к обсуждению

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

Гость
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Ответить в этой теме...

×   Вы вставили отформатированный текст.   Удалить форматирование

  Допустимо не более 75 смайлов.

×   Ваша ссылка была автоматически заменена на медиа-контент.   Отображать как ссылку

×   Ваши публикации восстановлены.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

Зарузка...
×
×
  • Создать...

Важная информация

Находясь на нашем сайте, вы соглашаетесь на использование файлов cookie, а также с нашим положением о конфиденциальности Политика конфиденциальности и пользовательским соглашением Условия использования.