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

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

^{пример:}

нажать, чтобы прочитать алгоритм действий:

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

• Общая схема(!) кода выглядит так:
  

  Код:

  <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>

  и т.д.
  После того, как вы оформили список целиком, сохраните виджет.
  

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

• Добавьте в Па > Оформление > Цвета — Каскадная таблица стилей 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/