Удобная информационная панель для темных сайтов


Удобная информационная панель для темных сайтов

1770
7.6 из 10
Проголосовало: 5




Установка:

1. Это в CSS:

Code
.tab_container {outline:1px solid #3d3d3d;border:1px solid #0d0d0d;border-top:1px solid #0d0d0d;clear:both;float:left;width:100%;background:#212121;margin-left:1px;}  
.tab_content {padding:5px;font-size:1.2em;}  
.container {width: 99%;}  
ul.tabs {margin: 0px;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #3d3d3d;border-left: 1px solid #3d3d3d;width: 100%;}  
ul.tabs li {float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border-top: 1px solid #3d3d3d;border-right: 1px solid #3d3d3d;border-bottom: 1px solid #0d0d0d;border-left: none;margin-bottom: 0px;background: #212121;overflow: hidden;position: relative;}  
ul.tabs li a {text-decoration: none;color: #929292;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #0d0d0d;outline: none;}  
ul.tabs li a:hover {background:url(http://webo4ka.ru/Ucoz3/informachionnai_panel3.png) #232323;color:#ff0000;}  
html ul.tabs li.active {background:url(http://webo4ka.ru/Ucoz3/informachionnai_panel2.png) #272727;color: #ff0000;}  
.inf {border: 1px solid #0d0d0d;border-right:none; background: url(http://webo4ka.ru/Ucoz3/informachionnai_panel.png); height: 22px;color: #ff0000;}  
.inf2 {border: 1px solid #0d0d0d; background: url(http://webo4ka.ru/Ucoz3/informachionnai_panel.png); height: 22px;color: #ff0000;}  
.inf_fon {border: 1px solid #0d0d0d;border-right:none;border-top:none; padding: 5px; background:#232323;}  
.inf_fon2 {border: 1px solid #0d0d0d;border-top:none; padding: 5px; background:#232323;}

2. Данный код куда вам надо:

Code
<table style="background: #212121;border: 1px solid #0d0d0d;outline: 1px solid #3d3d3d;width: 100%;margin-top: 1px;"><tr><td>  
<script type="text/javascript">  
$(document).ready(function() {  

  $(".tab_content").hide();  
  $("ul.tabs li:first").addClass("active").show();  
  $(".tab_content:first").show();  
   
  $("ul.tabs li").click(function() {  
  $("ul.tabs li").removeClass("active");  
  $(this).addClass("active");  
  $(".tab_content").hide();  
  var activeTab = $(this).find("a").attr("href");  
  $(activeTab).fadeIn();  
  return false;  
  });  

});  
</script>  
<div class="container">  
  <ul class="tabs">  
  <li><a href="#tab1">Форум</a></li>  
  <li><a href="#tab2">Пользователи</a></li>  
  <li><a href="#tab3">Файлы</a></li>  
  <li><a href="#tab4">О сайте</a></li>  
  </ul>  
<div class="tab_container">  
<!-- Форум -->  
<div id="tab1" class="tab_content">  
<center>  
<table width="100%" cellpadding="0" cellspacing="0">  
<tbody><tr>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf" align="center">Последние ответы на форуме</td></tr>  
$MYINF_forum1$  
</tbody></table>  
</td>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf2" align="center">Популярные темы на форуме</td></tr>  
$MYINF_forum2$  
</tbody></table>  
</td>  
</tr></tbody>  
</table>  
</center>  
</div>  
<!-- /Форум -->  
<!-- Юзеры -->  
<div id="tab2" class="tab_content">  
<center>  
<table width="100%" cellpadding="0" cellspacing="0">  
<tbody><tr>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf" align="center">Новые пользователи</td></tr>  
$MYINF_users1$  
</tbody></table>  
</td>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf2" align="center">Лучшие пользователи</td></tr>  
$MYINF_users2$  
</tbody></table>  
</td>  
</tr></tbody>  
</table>  
<div style="margin-top: -1px">  
<table width="100%" cellpadding="0" cellspacing="0">  
<tbody><tr>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf" align="center">Уважаемые пользователи</td></tr>  
$MYINF_users3$  
</tbody></table>  
</td>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf2" align="center">Топ ньюсмейкеров</td></tr>  
$MYINF_users4$  
</tbody></table>  
</td>  
</tr></tbody>  
</table>  
</div>  
</center>  
</div>  
<!-- /Юзеры -->  
<!-- Файлы -->  
<div id="tab3" class="tab_content">  
<center>  
<table width="100%" cellpadding="0" cellspacing="0">  
<tbody><tr>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf" align="center">Новые файлы</td></tr>  
$MYINF_files1$  
</tbody></table>  
</td>  
<td>  
<table width="100%" align="center" cellpadding="0" cellspacing="0"><tbody>  
<tr><td class="inf2" align="center">Популярные файлы</td></tr>  
$MYINF_files2$  
</tbody></table>  
</td>  
</tr></tbody>  
</table>  
</center>  
</div>  
<!-- /Файлы -->  
<!-- О сайте -->  
<div id="tab4" class="tab_content">  
<center><a href="hhttp://webo4ka.ru/"><b>webo4ka.ru</b></a> <- </center>  
</div>  
<!-- /О сайте -->  
</div>  
</div>  
</td></tr></table>

3. Создаем информеры:

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 6

Десерт
0
Десерт написал: Написано 15 Июля 2016 в 22:32
Комментарий №6
Смотрится очень классно, а самое лучшее, что в css изменить пару строчек, и уже под светлый дизайн можно использовать

Dock174
0
Dock174 написал: Написано 28 мая 2012 в 19:54
Комментарий №5
Странно, почему то пропали все темы, а только информер выводится.. Есть у кого советы?

GreenZzz
0
GreenZzz написал: Написано 08 Ноября 2011 в 16:17
Комментарий №4
а как сделать,чтобы вкладки форум,пользователи,файлы и т.д. были не слева,а по центру?

JON
0
JON написал: Написано 03 Октября 2011 в 23:15
Комментарий №2
админ как поменять под желтий диз???

Вовчик
0
Вовчик написал: Написано 04 Октября 2011 в 06:58
Комментарий №3
background: #тут цвет;

SanyaSV
0
SanyaSV написал: Написано 20 Апреля 2011 в 22:34
Комментарий №1
кульно спасибо большое

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: