Довольно долго ничего не выкладывал, и вот решил вас порадовать новым дизайном для форума на платформе uCoz. Приятная для глаз гамма оттенков серого, удобное меню, возможность расширения на весь экран основного блока с форумом за счёт скрытия левого сайдбара с колонкой меню, новый вид материалов и многое другое. Итак, встречаем, новый дизайн форума (версия 1.0)

Подготовка к установке:
ВНИМАНИЕ!
Для работы шаблона в Общих настройках в Панели управления сайтом выставить версию библиотеки jQuery 1.10.2 !
1. Скачайте файл с архивом и распакуйте его
2. В Файловом менеджере своего сайта создайте папки css, font, img, js
3. Закачайте в них содержимое из одноимённых папок архива.
Перейдите в Управление дизайном и редактирование шаблонов. Найдите шаблон "Общий вид страниц форума" и замените его содержимое на этот код:
Код
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>$MODULE_NAME$</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="/css/custom.min.css" rel="stylesheet">
<link href="/css/forum.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="/forum/" class="site_title"><i class="fa fa-comments" aria-hidden="true"></i> <span>Мой форум</span></a>
</div>
<div class="clearfix"></div>
<div class="profile">
<div class="profile_pic">
<?if($USER_AVATAR_URL$)?>
<img src="$USER_AVATAR_URL$" alt="" class="img-circle profile_img">
<?else?>
<img src="/img/na.png" alt="" class="img-circle profile_img">
<?endif?>
</div>
<div class="profile_info">
<?if($USER_LOGGED_IN$)?>
<span>Вы вошли как</span> <h2>$USERNAME$</h2>
<?else?>
<span>Приветствую Вас,</span> <h2>$USERNAME$</h2>
<?endif?>
</div>
</div>
<!-- Основное меню форума -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3><?if($USER_LOGGED_IN$)?>
<i class="fa fa-check-circle" aria-hidden="true"></i> $USER_GROUP$
<?else?>
Нет группы
<?endif?></h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bars" aria-hidden="true"></i> Меню управления <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="$RECENT_POSTS_LINK$" rel="nofollow">Новые сообщения</a></li>
<li><a href="$MEMBERS_LIST_LINK$" rel="nofollow">Участники</a></li>
<li><a href="$BOARD_RULES_LINK$" rel="nofollow">Правила форума</a></li>
<li><a href="$SEARCH_PAGE_LINK$" rel="nofollow">Поиск</a></li>
<li><a href="$RSS_LINK$" rel="nofollow">RSS</a></li>
<?if($USER_LOGGED_IN$)?>
<li><a href="$SUBSCRIPTION_LINK$" rel="nofollow">Подписки</a></li><?endif?>
</ul>
</li>
<li><a><i class="fa fa-folder-open-o" aria-hidden="true"></i> Разделы форума <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#">Ссылка на первый раздел</a></li>
<li><a href="#">Ссылка на второй раздел</a></li>
<li><a href="#">Ссылка на третий раздел</a></li>
</ul>
</li>
<li><a><i class="fa fa-folder-open-o" aria-hidden="true"></i> Список форумов <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a href="#">Форум первый</a></li>
<li><a href="#">Форум второй</a></li>
<li><a href="#">Форум третий</a></li>
<li><a href="#">Форум четвертый</a></li>
<li><a href="#">Форум пятый</a></li>
<li><a href="#">Форум шестой</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /основное меню форума -->
<!-- Меню в подвале форума слева -->
<?if($USER_LOGGED_IN$)?>
<div class="sidebar-footer hidden-small">
<a href="$PERSONAL_PAGE_LINK$" data-toggle="tooltip" data-placement="top" title="Профиль">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</a>
<a href="/index/11" data-toggle="tooltip" data-placement="top" title="Настройки">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</a>
<a href="/index/0-3" data-toggle="tooltip" data-placement="top" title="Обратная связь">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
</a>
<a href="$LOGOUT_LINK$" data-toggle="tooltip" data-placement="top" title="Выход">
<span class="glyphicon glyphicon-off" aria-hidden="true"></span>
</a>
</div>
<?else?>
<div class="sidebar-footer hidden-small">
<a href="$REGISTER_LINK$" data-toggle="tooltip" data-placement="top" title="Регистрация">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</a>
<a href="/index/0-3" data-toggle="tooltip" data-placement="top" title="Обратная связь">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
</a>
<a href="$LOGIN_LINK$" data-toggle="tooltip" data-placement="top" title="Вход">
<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
</a>
</div>
<?endif?>
</div>
</div>
<!-- /меню в подвале форума слева -->
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<?if($USER_AVATAR_URL$)?>
<img src="$USER_AVATAR_URL$" alt=""><?else?><img src="/img/na.png" alt=""><?endif?>
<?if($USER_LOGGED_IN$)?>$USERNAME$<?else?>$USERNAME$<?endif?>
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<?if($USER_LOGGED_IN$)?><li><a href="$PERSONAL_PAGE_LINK$"> Профиль</a></li><?else?><li><a href="$REGISTER_LINK$"> Регистрация</a></li><?endif?>
<?if($USER_LOGGED_IN$)?><li><a href="/index/11">Настройки</a></li><?endif?>
<li><a href="/index/0-3">Обратная связь</a></li>
<?if($USER_LOGGED_IN$)?>
<li><a href="$LOGOUT_LINK$"><i class="fa fa-sign-out pull-right"></i> Выход</a></li>
<?else?>
<li><a href="$LOGIN_LINK$"><i class="fa fa-sign-in pull-right"></i> Вход</a></li>
<?endif?>
</ul>
</li>
<?if($USER_LOGGED_IN$)?>
<li role="presentation" class="dropdown">
<a href="javascript://" rel="nofollow" id="upml" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');
return false;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-envelope-o"></i>
<span class="badge bg-green">$UNREAD_PM$</span>
</a>
<?if($IS_NEW_PM$)?>
<script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml','')",500)</script>
<bgsound src="/.s/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?>
</li>
<?endif?>
</ul>
</nav>
</div>
</div>
<!-- Контент страницы -->
<div class="right_col" role="main">
<!-- Информеры вверху страницы -->
<div class="row tile_count">
ЗДЕСЬ ВАШИ ИНФОРМЕРЫ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
</div>
<!-- /Информеры вверху страницы -->
<div class="row">
<div class="dashboard_graph">$BODY$</div>
</div>
</div>
</div>
<!-- Содержимое подвала -->
<footer>
<div class="pull-right">$POWERED_BY$</div>
<div class="clearfix"></div>
</footer>
<!-- /Содержимое подвала -->
</div>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/custom.min.js"></script>
<script type="text/javascript">
(function() {
function checkQS(obj, callback) {
if (obj)
callback(obj);
return;
}
if ('threadpage' == 'threadpage' || 'threadpage' == 'forum') {
checkQS(document.querySelector('a[href$="-0-0-1-1"]'), function(obj) {
obj.classList.add('postbtn1');
obj.innerHTML = '<span></span> Новая тема';
});
checkQS(document.querySelector('a[href$="-0-0-1-2"]'), function(obj) {
obj.classList.add('postbtn2');
obj.innerHTML = '<span></span> Новый опрос';
});
if ('threadpage' == 'threadpage') {
checkQS(document.querySelector('a[href="#post"]'), function(obj) {
obj.classList.add('postbtn3');
obj.innerHTML = '<span></span> Ответить';
});
checkQS(document.querySelector('img[src*="t_closed"]'), function(obj) {
var e = document.createElement('span');
e.classList.add('postbtn4');
e.innerHTML = '<span></span> Закрыто';
obj.parentNode.insertBefore(e, obj);
obj.remove();
});
}
checkQS(document.getElementById('frmButns83').querySelectorAll('a[onclick*="_uWnd"]'), function(objs) {
for (var i = objs.length; i-- > 0;)
objs[i].remove();
});
}
})();
</script>
</body>
</html>
Войдите в "Замена стандартных надписей - ПОЛЬЗОВАТЕЛИ" и вместо "Онлайн" и "Оффлайн" вставьте On и Off соответственно. Сохраните изменения!
Далее замените содержимое шаблона "Вид материалов форума" на следующее:
Код
<table border="0" width="100%" cellspacing="1" cellpadding="2" class="postTable">
<tr>
<td width="23%" class="postTdTop" align="center">
<a class="postUser" href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a>
</td>
<td class="postTdTop">
<?if($AWARDS_DO_URL$ && $USER_LOGGED_IN$ && $CUR_USER_ID$!=$UID$)?>
<div style="float:right">
<a href="$AWARDS_DO_URL$"><img alt="" src="/.s/img/icon/thumbu.png" width="13" border="0" title="Хороший пост"></a>
<a href="$AWARDS_DO_URL$"><img alt="" src="/.s/img/icon/thumbd.png" width="13" border="0" title="Плохой пост"></a>
</div>
<?endif?>Дата: $WDAY$, $DATE$, $TIME$ | Сообщение # $NUMBER$
</td>
</tr>
<tr>
<td class="postTdInfo" valign="top">
<div class="col-xs-12 profile_details">
<div class="well profile_view">
<div class="col-sm-12">
<h4 class="brief"><i><?if($GROUP_NAME$='Администраторы')?><i class="fa fa-graduation-cap" aria-hidden="true"></i> $GROUP_NAME$
<?else?><i class="fa fa-user" aria-hidden="true"></i> $GROUP_NAME$<?endif?></i></h4>
<div class="left col-xs-7">
<h2>$USERNAME$</h2>
<p><strong><?if($USER_TITLE$)?>$USER_TITLE$<?else?>$USER_RANK_NAME$<?endif?></strong></p>
<ul class="list-unstyled">
<li>Сообщений: $POSTS$</li>
<?if($AWARDS_READ_URL$)?><li>Награды: <a href="$AWARDS_READ_URL$" title="Список наград"><b>$AWARDS$</b></a>
<?if($AWARDS_DO_URL$)?> <a href="$AWARDS_DO_URL$"><b>+</b></a><?endif?></li><?endif?>
<?if($READ_REP_URL$)?><li>Репутация: <a title="Смотреть историю репутации" class="repHistory" href="$READ_REP_URL$"><b>$REP_RATING$</b></a>
<?if($DO_REP_URL$)?> <a class="reputationDo" title="Изменить репутацию" href="$DO_REP_URL$"><b>±</b></a><?endif?></li><?endif?>
<?if($READ_BAN_URL$)?><li>Замечания: <a class="banPercent" title="Смотреть историю замечаний" href="$READ_BAN_URL$">$BAN_RATING$</a>
<?if($DO_BAN_URL$)?> <a title="Изменить уровень замечаний" class="banDo" href="$DO_BAN_URL$">±</a><?endif?></li><?endif?>
</ul>
</div>
<div class="right col-xs-5 text-center">
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="$USERNAME$" class="img-circle img-responsive"><?endif?>
</div>
</div>
<div class="col-xs-12 bottom text-center">
<div class="col-xs-12 col-sm-6 emphasis">
<p class="ratings">
<?if($USER_RANK_NAME$='Рядовой')?>
<i class="fa fa-star-half" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Сержант')?>
<i class="fa fa-star" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Лейтенант')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Майор')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Подполковник')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Полковник')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Генерал-майор')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Генерал-лейтенант')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Генерал-полковник')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star-half" aria-hidden="true"></i><?endif?>
<?if($USER_RANK_NAME$='Генералиссимус')?>
<i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i> <i class="fa fa-star" aria-hidden="true"></i><?endif?>
</p>
</div>
<div class="col-xs-12 col-sm-6 emphasis">
<?if($USER_STATUS$='<span class="statusOnline">On</span>')?><button type="button" class="btn btn-success btn-xs">
<i class="fa fa-child" aria-hidden="true"></i> Онлайн
</button><?else?>
<button type="button" class="btn btn-primary btn-xs">Оффлайн</button>
<?endif?>
</div>
</div>
</div>
</div>
</td>
<td class="posttdMessage" valign="top" style="word-wrap: break-word;">$MESSAGE$
<?if($ATTACHMENT$)?> <div align="left" class="eAttach">Прикрепления: $ATTACHMENT$</div><?endif?>
<?if($SIGNATURE$)?><br><hr size="1" width="150" align="left" class="signatureHr"><span class="signatureView">$SIGNATURE$</span><?endif?>
<?if($EDITEDBY$)?><br><br><div class="edited">Сообщение отредактировал $EDITEDBY$</div><?endif?></td></tr>
<tr><td class="postBottom" align="center">
<?if($USER_IP$)?><div class="postip">
[ <a class="postIpLink" href="https://apps.db.ripe.net/search/query.html?searchtext=$USER_IP$" target="_blank">$USER_IP$</a>
<?if($POST_COUNTRY_ID$)?> (<a href="javascript://" rel="nofollow" onclick='prompt("","$POST_COUNTRY$");return false;'>$POST_COUNTRY_ID$</a>)<?endif?> ]</div>
<?else?> <?endif?>
</td>
<td class="postBottom">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td>$USER_DETAILS_ICON_BAR$</td><td align="right" style="padding-right:15px;">$ENTRY_MANAGE_ICON_BAR$</td><td width="2%" nowrap align="right">$ON_TOP_ICON$$DEL_ENTRY_FIELD$</td></tr>
</table>
</td>
</tr>
</table>





По сути, новый шаблон форума установлен. В его верхней части располагаются информеры. Их код однотипен и примерно такой:
Код
<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
<span class="count_top"><i class="green"><i class="fa fa-user-plus" aria-hidden="true"></i></i> Заголовок:</span>
<div class="count">Содержимое</div>
<span class="count_bottom">Нижняя <i class="green">часть </i> </span>
</div>