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

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


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

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

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


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

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

Виджет со ссылками

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

Виджет со ссылками

Сообщение автор Dana Domirani в Ср 23 Фев - 21:21


Виджет с простыми текстовыми ссылками
пример:
1. Создайте колонку виджетов на главной странице. Если она у Вас уже есть, этот пункт можно пропустить. Если нет, читайте алгоритм действий:
нажать, чтобы прочитать алгоритм действий:
Зайдите в ПА > Модули > Виджеты форума
Общие настройки виджетов главной страницы.
Укажите:
  • Показывать виджеты главной страницы: да
  • Ширина колонки 1 (слева): 200px
Если Вам нужна колонка справа, тогда укажите:
  • Ширина колонки 3 (справа): 200px

Сохраните.
2. Создайте новый персональный виджет
  • В ПА > Модули > Виджеты форума нажмите кнопку "Создать персональный виджет"

  • Заполните все поля в окне "Общие параметры виджета"
    - Имя виджета : любое, по Вашему желанию. Для примера будет указано Меню 'наши друзья'
    - Использовать стандартный шаблон : да / нет (по желанию)
    - Название виджета : любое, по Вашему желанию. Для примера будет указано Наши друзья
    - Содержание виджета : сюда поместите код Ваших ссылок

    И нажмите кнопку "Сохранить".
3. Теперь подробнее о ссылках
  • Общая схема(!) кода выглядит так:
    Код:
    <div class="wigmenu">
    <a href="ссылка 1">Название ссылки 1</a>
    <a href="ссылка 2">Название ссылки 2</a>
    <a href="ссылка 3">Название ссылки 3</a>
    </div>
  • Внимание: просто скопировать указанную схему в виджет недостаточно!
    Для того, что превратить эту схему в список ссылок Вам надо заменить текст ссылка 1, ссылка 2 и ссылка 3 на адреса сайтов.
  • Например, Вы хотите добавить в виджет ссылку на сайт Forum2x2, адрес которого httр://www.forum2x2.ru/
    Для этого замените в схеме:
    - текст ссылка 1 на адрес httр://www.forum2x2.ru/
    - а текст Название ссылки 1 на заголовок Forum2x2

    Заполните таким образом весь список. В результате у вас должно получиться нечто подобное:
    Код:
    <div class="wigmenu">
    <a href="http://www.forum2x2.ru/">Forum 2x2</a>
    <a href="http://help.forum2x2.ru/">Бесплатный форум поддержки</a>
    <a href="http://profiforum.ru/">Каталог форумов</a>
    </div>
    Количество ссылок может быть любым. Вы можете наращивать список:
    Код:
    <div class="wigmenu">
    <a href="http://www.forum2x2.ru/">Forum 2x2</a>
    <a href="http://help.forum2x2.ru/">Бесплатный форум поддержки</a>
    <a href="http://profiforum.ru/">Каталог форумов</a>
    <a href="http://www.forum2x2.ru/ru/utils/">Аварийные инструменты</a>
    <a href="http://hitskin.com/">Каталог стилей</a>
    <a href="http://www.forum2x2.ru/ru/create-forum/">Создать форум</a>
    </div>
    и т.д.
    После того, как вы оформили список целиком, сохраните виджет.


4. Перетащите ваш виджет из вкладки "Персональные виджеты" в колонку
  • Проверьте, чтобы это была именно включенная колонка (та, для которой указана ширина)!

    После этого нажмите кнопку "Сохранить".


5. Оформите ваши кнопки
  • Добавьте в Па > Оформление > Цвета — Каскадная таблица стилей CSS настройки для отображения вашего списка и нажмите "Ок".
    Примеры самого простого оформления:
    Код:
    .wigmenu a {
    display: block;
    padding: 5px;
    margin: 2px 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #fff;
    color: #696969;
    font-weight: bolder;
    }

    .wigmenu a:hover {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    background-color: #B0C4DE;
    color: #fff;
    text-shadow: 0 0 1px #696969;
    }



    Код:
    .wigmenu {
    background-color: #B6FD71;
    }

    .wigmenu a {
    display: block;
    padding: 8px 0 8px 5px;
    margin: 0;
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    font-family: Helvetica, Arial, sans-serif;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    }

    .wigmenu a:hover {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    margin-left: 5px;
    color: #B6FD71; 
    }



    Код:
    .wigmenu a {
    display: block !important;
    margin: 0;
    padding: 7px 0 7px 30px;
    border: 3px solid transparent;
    background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/search10.png') no-repeat 5px center;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 #fff;
    color: #0760A3;
    font-weight: bolder;
    }

    .wigmenu a:hover {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    background-color: #fff6f0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 3px solid #ddd;
    color: #708090 !important;
    }
    Для создания собственных стилей можно использовать специальные онлайн-сервисы, например, такие как http://www.css3.me/



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


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


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


avatar
Dana Domirani
Администратор
Администратор

Женщина

Сообщения : 22376
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9008

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

http://poltergeist-legacy.com/

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

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


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