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

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


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

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

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


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

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

Уникальный (Раздел-Форум)

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

Уникальный (Раздел-Форум)

Сообщение автор Георгий Шевченко в Чт 11 Сен - 5:30

Как выделить раздел?

Очень долго думал как же выделить раздел, и ни как не мог додуматься. Но тут меня осенило, что у каждого раздела есть ссылка, так по чему бы мне не обращаться по ссылке. Все очень просто оказалось.



И так, теперь ищем такой код. И удаляем все содержимое.
Код:
<!-- BEGIN tablehead -->
 Ваше содержимое
 <!-- END tablehead -->

Заменяем его на этот.
Код:
<!-- BEGIN tablehead -->
 <div>
                  <div class="main-head">
 <div class="page-title">{catrow.tablehead.L_FORUM}</div>
 </div>
 <!-- END tablehead -->

Ищем такой код. И удаляем все содержимое.
Код:
<!-- BEGIN forumrow -->
 Ваше содержимое
 <!-- END forumrow -->

Заменяем его на этот.
Код:
<div class="metro-web">
                    <a class="metro-a-web" href="{catrow.forumrow.U_VIEWFORUM}">
                      <font color="white">{catrow.forumrow.FORUM_NAME}</font><br />
                      <span class="metro-info-web">
                      <i class="fa fa-envelope" style="color: white;"></i>   {catrow.forumrow.POSTS}&nbsp;&nbsp;
                    <i class="fa fa-folder" style="color: white;"></i>   {catrow.forumrow.TOPICS}
                      </span>
                    </a>
                  </div>

В самый вверх вставляем это.
Код:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">



- Открываем новое окно вашего форума
- Наводим на раздел и видим примерно такой адрес http://ваш адрес.ru/f1-forum
- Возвращаемся в окно к стилям
- Добавляем такой код

Код:
.metro-info-web {
 text-align: center;
color: white;
  text-shadow: 2px 2px 2px black;
  
}

.metro-web a[href="/f1-forum"] {
 width: 200px;
   display: block;
  height: 100px;
  margin-left: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: url('http://i39.servimg.com/u/f39/13/71/53/06/for1-w10.png') no-repeat center;
  background-size: 100% 100%;
  color: white;
  text-shadow: 2px 2px 2px black;
  text-decoration: none;
  padding-left: 20px;
  padding: 7px;
  border: 1px solid lightgray;
  border-radius: 100%;
 padding-top: 8%;
  text-align: center;

  -webkit-animation-name:rotater;
  -webkit-animation-duration:1500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  -moz-transform:rotate(0deg) scale(1);
  -moz-transition-duration:1500ms;
  -moz-transition-timing-function: ease-out;

  -o-transform:rotate(0deg) scale(1);
  -o-transition-duration:1500ms;
  -o-transition-timing-function: ease-out;

  -ms-transform:rotate(0deg) scale(1);
  -ms-transform-duration:1500ms;
  -ms-transform-timing-function: ease-out;
}

.metro-web a[href="/f1-forum"]:hover {
  -webkit-animation-name:rotater;
  -webkit-animation-duration:500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  -moz-transform:rotate(360deg) scale(1.2);
  -moz-transition-duration:500ms;
  -moz-transition-timing-function: ease-out;

  -o-transform:rotate(360deg) scale(1.2);
  -o-transition-duration:500ms;
  -o-transition-timing-function: ease-out;

  -ms-transform:rotate(360deg) scale(1.2);
  -ms-transform-duration:500ms;
  -ms-transform-timing-function: ease-out;
}


.metro-web a[href="/f2-forum"] {
   display: block;
  float: inherit;
 width: 200px;
  height: 100px;
  margin-left: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: url('http://i39.servimg.com/u/f39/13/71/53/06/for1-w10.png') no-repeat center;
  background-size: 100% 100%;
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px 2px black;
  padding-left: 20px;
  padding: 7px;
  border: 1px solid lightgray;
  border-radius: 100%;
 padding-top: 8%;
  text-align: center;

  -webkit-animation-name:rotater;
  -webkit-animation-duration:1500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  -moz-transform:rotate(0deg) scale(1);
  -moz-transition-duration:1500ms;
  -moz-transition-timing-function: ease-out;

  -o-transform:rotate(0deg) scale(1);
  -o-transition-duration:1500ms;
  -o-transition-timing-function: ease-out;

  -ms-transform:rotate(0deg) scale(1);
  -ms-transform-duration:1500ms;
  -ms-transform-timing-function: ease-out;
}

.metro-web a[href="/f2-forum"]:hover {
  -webkit-animation-name:rotater;
  -webkit-animation-duration:500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  -moz-transform:rotate(360deg) scale(1.2);
  -moz-transition-duration:500ms;
  -moz-transition-timing-function: ease-out;

  -o-transform:rotate(360deg) scale(1.2);
  -o-transition-duration:500ms;
  -o-transition-timing-function: ease-out;

  -ms-transform:rotate(360deg) scale(1.2);
  -ms-transform-duration:500ms;
  -ms-transform-timing-function: ease-out;
}



А как же остальные разделы, сделать такими?

Все очень просто. Берем копируем снова кусок кода. Вставляем в CSS и заменяем ссылку.
Код:
.metro-web a[href="ссылка на раздел/категорию"] {
   display: block;
  float: inherit;
 width: 200px;
  height: 100px;
  margin-left: 25px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: url('http://i39.servimg.com/u/f39/13/71/53/06/for1-w10.png') no-repeat center;
  background-size: 100% 100%;
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px 2px black;
  padding-left: 20px;
  padding: 7px;
  border: 1px solid lightgray;
  border-radius: 100%;
 padding-top: 8%;
  text-align: center;

  -webkit-animation-name:rotater;
  -webkit-animation-duration:1500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  -moz-transform:rotate(0deg) scale(1);
  -moz-transition-duration:1500ms;
  -moz-transition-timing-function: ease-out;

  -o-transform:rotate(0deg) scale(1);
  -o-transition-duration:1500ms;
  -o-transition-timing-function: ease-out;

  -ms-transform:rotate(0deg) scale(1);
  -ms-transform-duration:1500ms;
  -ms-transform-timing-function: ease-out;
}

.metro-web a[href="ссылка на раздел/категорию"]:hover {
  -webkit-animation-name:rotater;
  -webkit-animation-duration:500ms;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function: ease-out;

  -moz-transform:rotate(360deg) scale(1.2);
  -moz-transition-duration:500ms;
  -moz-transition-timing-function: ease-out;

  -o-transform:rotate(360deg) scale(1.2);
  -o-transition-duration:500ms;
  -o-transition-timing-function: ease-out;

  -ms-transform:rotate(360deg) scale(1.2);
  -ms-transform-duration:500ms;
  -ms-transform-timing-function: ease-out;
}

Демонстрация


Георгий Шевченко
 

Мужчина

Сообщения : 44
Возраст : 22
Место обитания : Украина / Одесса
Регистрация : 2014-08-24
Благодарности : 27

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

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

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


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