Панель с иконками закладок и социальных сетей
Страница 1 из 1
Панель с иконками закладок и социальных сетей
Сегодня мы расскажем вам, как сделать на вашем форуме красивую панель с иконками, ведущими на сайты закладок и социальных сетей - или же на любые другие сайты (суть идеи однако в том, что ссылки представлены яркими, легко узнаваемыми иконками).
Данный туториал является переводом оригинальной версии туториала, составленного дизайнером Jalokim, которому мы выражаем нашу благодарность.
Вот как может выглядеть такая панель:
Несколько моделей панелей от дизайнера Jalokim :
Установка панели на всех страницах форума в версиях PHPBB2 и PUNBB
В тех версиях наших форумах, в которых есть доступ к редактированию шаблонов HTML, вы можете установить вашу панель на всех страницах форума.
Для этого вам понадобятся те же самые коды, что приведены выше, но вы должны будете установить первый код не в «Приветствие на главной странице», а в шаблон overall_footer
Данный туториал является переводом оригинальной версии туториала, составленного дизайнером Jalokim, которому мы выражаем нашу благодарность.
Вот как может выглядеть такая панель:
- Основной код
- Настройка
- Код:
style="height: 40px; position: fixed;
width: 800px;
top: auto;
right: 0;
margin: 0 auto;
bottom: 0;
left: 0;"- Дополнения в CSS
- Код:
#myfooter{
background-image: url(url of the bar image);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}
Перейдите в ПА - Оформление - Главная - Общая информация - Приветствие на главной странице
и вставьте в поле следующий код:
Этот код представляет собой блок 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>
Не забудьте подставить ваши ссылки и ваш текст в местах, выделенных красным цветом !
В коде, расположенном выше, вы можете настраивать свойства height и width :
Если вы хотите, чтобы ваша панель пересекала весь форум, установите значине width: 100 %
Свойство height определяет высоту вашей панели. Вы должны будете отрегулировать это значение в зависимости от высоты ваших иконок. Чем больше иконки, тем больше должно быть значение height.
Вам понадобится добавить 2 идентификатора в вашу персональную таблицу стилей CSS (ПА - Оформление - Цвета и картинки - Цвета - CSS)
myfooter и myfooter img (Если у вас уже что-то стоит в этом поле, вы можете добавить этот код в начале или в конце уже имеющегося кода)
Идентификатор myfooter img имеет несколько свойств :
border: 0px - используется для того, чтобы не указывать border 0 отдельно для каждой картинки
margin-top: - задает расстояние (в пикселях) от картинок до верха панели. Вы можете изменить это расстояние, если ваши иконки оказались слишком низко или слишком высоко.
padding-right: - задает расстояние (в пикселях) между картинками. Вы можете регулировать это значение по своему усмотрению.
Не забудьте сохранить изменения в персональной CSS !
Внимание! В форумах версий phpbb3 и IPB эта панель может показываться только на главной странице форума.
Несколько моделей панелей от дизайнера Jalokim :
- Код:
http://i61.servimg.com/u/f61/11/71/42/99/mac_ba10.png
- Код:
http://i61.servimg.com/u/f61/11/71/42/99/mac_ba11.png
- Код:
http://i61.servimg.com/u/f61/11/71/42/99/macdar10.png
- Код:
http://i61.servimg.com/u/f61/11/71/42/99/mavdar10.png
- Код:
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
- Код:
#myfooter{
background-image: url(url of the bar image);
background-repeat: no-repeat;
}
#myfooter img{
border: 0px;
margin-top: -12px;
padding-right: 20px;
}
В самом конце шаблона найдите код :
Поставьте наш первый код между
Сохраните и опубликуйте ваш шаблон.
Вставьте наш код CSS :
Не забудьте сохранить!
автор оригинальной версии туториала : Jalokim
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|