Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Luz в Вт 1 Июн - 12:41

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

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



  1. Основной код

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

    <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 , управляющий всем содержимым вашей новой панели и выравненный по низу страницы. Вы можете добавлять сюда любые новые элементы.

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

  2. Настройка

    В коде, расположенном выше, вы можете настраивать свойства height и width :
    Код:

    style="height: 40px;  position: fixed;
            width: 800px;
          top: auto;
            right: 0;
    margin: 0 auto;
            bottom: 0;
            left: 0;"

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

    Свойство height определяет высоту вашей панели. Вы должны будете отрегулировать это значение в зависимости от высоты ваших иконок. Чем больше иконки, тем больше должно быть значение height.

  3. Дополнения в 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 :



Код:
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


  1. - Откройте ПА – Оформление – Шаблоны – 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>


    Сохраните и опубликуйте ваш шаблон.

  2. - В ПА – Оформление – Цвета и картинки – Цвета – 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



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16467
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2563

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения