Главная страница форума для ucoz
Главная страница форума для ucoz. Для всех, кому надоедает стандартный табличный вид форума. Я предлагаю свой - блочный.
Скрипт работает на jQuery 1.3.2 и выше. Только для сайтов uCoz!
Установка скрипта довольно таки проста. Для начала посещаем страницу
"Общий вид страниц форума" (управление дизайном). Ищем (в самом низу)
тег
/body>
Перед этим тегом ставим следующий код:
Код
<script>
var gTLast = 'show',
infodiv = true,
marginBlock = '1';
$.getScript('http://obsub.ucoz.net/js/mjsforum.js');
</script>
А это в свой CSS:
Код
/* Главная страница форума */
.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 настроить дизайн
элементов. Здесь вы выставляете любое значение в цифрах. Переменная
устанавливает величину отступа каждого раздела друг от друга.
Поэкспериментируйте и поймете ее смысл
Вот и все!
|