Панель с иконками закладок и социальных сетей

автор **Luz** Июнь 1st 2010, 12:41

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

Вот как может выглядеть такая панель:

Панель с иконками закладок и социальных сетей Panel_10

Панель с иконками закладок и социальных сетей Panel_10

Основной код

Перейдите в ПА - Оформление - Главная - Общая информация - Приветствие на главной странице
и вставьте в поле следующий код:

<div id="myfooter" style="height: 40px; position: fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;" >

<p align="center">

<a href="URL первого сайта"><img src="URL иконки 1" title="Название первого сайта" border="0"></a>
<a href="URL второго сайта"><img src="URL иконки 2" title="Название второго сайта" border="0"></a>

</p></form></div></p></div>
Этот код представляет собой блок div , управляющий всем содержимым вашей новой панели и выравненный по низу страницы. Вы можете добавлять сюда любые новые элементы.

Не забудьте подставить ваши ссылки и ваш текст в местах, выделенных красным цветом !
Настройка

В коде, расположенном выше, вы можете настраивать свойства height и width :
Код:
style="height: 40px; position: fixed; width: 800px; top: auto; right: 0; margin: 0 auto; bottom: 0; left: 0;"

Если вы хотите, чтобы ваша панель пересекала весь форум, установите значине width: 100 %

Свойство height определяет высоту вашей панели. Вы должны будете отрегулировать это значение в зависимости от высоты ваших иконок. Чем больше иконки, тем больше должно быть значение height.
Дополнения в CSS
Вам понадобится добавить 2 идентификатора в вашу персональную таблицу стилей CSS (ПА - Оформление - Цвета и картинки - Цвета - CSS)
myfooter и myfooter img (Если у вас уже что-то стоит в этом поле, вы можете добавить этот код в начале или в конце уже имеющегося кода)

Код:
#myfooter{ background-image: url(url of the bar image); background-repeat: no-repeat; } #myfooter img{ border: 0px; margin-top: -12px; padding-right: 20px; }

Идентификатор myfooter img имеет несколько свойств :

border: 0px - используется для того, чтобы не указывать border 0 отдельно для каждой картинки
margin-top: - задает расстояние (в пикселях) от картинок до верха панели. Вы можете изменить это расстояние, если ваши иконки оказались слишком низко или слишком высоко.
padding-right: - задает расстояние (в пикселях) между картинками. Вы можете регулировать это значение по своему усмотрению.

Не забудьте сохранить изменения в персональной CSS !

Внимание! В форумах версий phpbb3 и IPB эта панель может показываться только на главной странице форума.

Несколько моделей панелей от дизайнера Jalokim :

Панель с иконками закладок и социальных сетей Mac_ba10

Код:: http://i61.servimg.com/u/f61/11/71/42/99/mac_ba10.png

Панель с иконками закладок и социальных сетей Mac_ba11

Код:: http://i61.servimg.com/u/f61/11/71/42/99/mac_ba11.png

Панель с иконками закладок и социальных сетей Macdar10

Код:: http://i61.servimg.com/u/f61/11/71/42/99/macdar10.png

Панель с иконками закладок и социальных сетей Mavdar10

Код:: http://i61.servimg.com/u/f61/11/71/42/99/mavdar10.png

Панель с иконками закладок и социальных сетей Simple10

Код:: http://i61.servimg.com/u/f61/11/71/42/99/simple10.png

Установка панели на всех страницах форума в версиях PHPBB2 и PUNBB

В тех версиях наших форумах, в которых есть доступ к редактированию шаблонов HTML, вы можете установить вашу панель на всех страницах форума.
Для этого вам понадобятся те же самые коды, что приведены выше, но вы должны будете установить первый код не в «Приветствие на главной странице», а в шаблон overall_footer

- Откройте ПА – Оформление – Шаблоны – overall_footer

В самом конце шаблона найдите код :
Код:
</div> </body> </html>

Поставьте наш первый код между
Код:
</div>
и
Код:
</body>
:

Код:
</div> <div id="myfooter" style="height: 40px; position: fixed; width: 800px; top: auto; right: 0; margin: 0 auto; bottom: 0; left: 0;" > <p align="center"> <a href="URL первого сайта"><img src="URL иконки 1" title="Название первого сайта" border="0"></a> <a href="URL второго сайта"><img src="URL иконки 2" title="Название второго сайта" border="0"></a> </p></form></div></p></div> </body> </html>

Сохраните и опубликуйте ваш шаблон.
- В ПА – Оформление – Цвета и картинки – Цвета – CSS
Вставьте наш код CSS :

Код:
#myfooter{ background-image: url(url of the bar image); background-repeat: no-repeat; } #myfooter img{ border: 0px; margin-top: -12px; padding-right: 20px; }

Не забудьте сохранить!

автор оригинальной версии туториала : Jalokim