Блочный вид форума
3329 просмотров || Скачали 0 раз || Оставили 1 комментарий


Главная страница форума для ucoz. Для всех, кому надоедает стандартный табличный вид форума. Для этого создали новый вид - блочный.

Установка:

ПУ → Управление дизайном → Общий вид страниц форума → Ищем и перед ним ставим:

Code

<script>  
  var gTLast = 'show',  
  infodiv = true,  
  marginBlock = '1';  
  $.getScript('http://obsub.ucoz.net/js/mjsforum.js');  
  </script>


Далее в таблицу стилей CSS ставим:

Code

/* Главная страница форума */  
  .block{  
  display:block;  
  width:auto;  
  margin: 0;  
  }  
  .forumBlock {display:inline-block;  
  width: 160px;  
  float:left;  
height: 60px;  
background: #E4E7EA;  
margin: 3px;  
padding: 5px 5px 5px 5px;  
position: relative;  
  border:1px solid #95bee8;}  
  .forumBlock:hover{background: #ccdae8;cursor:pointer;text-align:left;}  
  .tablTitle {background: #D1D6DC url(http://thebeststudio.ru//public/img/for-b.gif);  
background-position: 150px 0px;  
  background-size: 450px 17px;  
margin: 0px 0 3px 0;  
padding: 5px 10px;  
background-repeat: no-repeat;  
display: block;  
clear: both;  
width: 100%;  
color: white;  
  font-size: 13px;  
  font-weight:bold;  
  text-transform: uppercase;  
  text-shadow: 1px 1px 4px #9e9e9e;  
  -webkit-box-sizing: border-box;  
-moz-box-sizing: border-box;  
box-sizing: border-box;  
  }  
  .tablTitle a {color: white;  
  text-decoration:none;}  
  .fBTit {  
  color: #56B0D5;  
font-weight: normal;  
margin: 0;  
padding: 0;  
font-size: 12px;  
  font-weight:bold;  
  }  
   
  .forumDesc {display:block;  
  margin-top:5px;  
  padding-left:30px;  
color: #777;}  
  .fInfoTImg {float: left;  
  display:block;  
  width: 24px;  
  height:24px;  
  margin:2px 5px 2px 0;  
  color:#56789d;  
  }  
  .imgPFor{  
   
  display:block;  
  width: 24px;  
  height:24px;  
   
  opacity:0.8;  
  }  
  .imgPFor img { width: 22px;  
  height:22px;  
  }  
  /* ---- */


Небольшие настройки скрипта:

У нас имеются три переменные: gTLast, infodiv, marginBlock, и одна, вызывающая скрипт, функция: $.getScript

Каждая из них отвечает за отдельные настройки: gTLast - имеет два значения - show (появление) и hide (исчезание). Многие дизайнеры изменяют последний блок "Дополнительная информация" и поэтому убирают его. Чтобы блок был виден на странице, поставьте значение show, чтобы исчез - hide.

infodiv - Имеет также два значения - true (истина) и false (ложь). Переменная отвечает за div-блок с информацией (иконка сообщений, кол-во тем и ответов). Значение true оставляет блок, false - удаляет.

Ну и последняя переменная marginBlock. Из-за обтекания блоков форума я не смог с помощью css настроить дизайн элементов. Здесь вы выставляете любое значение в цифрах. Переменная устанавливает величину отступа каждого раздела друг от друга. Поэкспериментируйте и поймете ее смысл.

Вот и все!

Автор: Неизвестен
Сайт автора: Неизвестен



Категория: Форум | Добавил: Endless | Теги: форума, Блочный, вид, ucoz, для, юкоз
Всего комментариев: 1
1 Quemist   (31.07.2015 18:54)
[Материал]
Отсутствует файл скрипта. .js