ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильная панель форума для uCoz

Стильная панель форума для uCoz

Стильная панель форума для uCoz
Здесь скрипт на новую и стильную панель на форуме uCoz. Эта там где функций сообщение или правила форума и можно поменять все на кнопки, которые отлично впишутся на сайт. Теперь вместо надписей у нас будут красивые иконки, которые и будут по своей конфигураций, отвечать за ту или иную функцию на этом модуле. Проверено как на светлом и к материалу будут привязаны изображение и на темном стиле.

Установка:

Первое что нужно сделать, это разместить классы скрип вверх или вниз сайта.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Потом идем в CSS и пропишем стили:

Код
.page-nav span {
  display: inline-block;
  vertical-align: baseline;
  padding-left: 15px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10pt;
  font-weight: 400;
}
.page-nav span span {
  padding-left: 0;
}
.page-nav a {
  color: rgba(255, 255, 255, 0.7);
}
.page-nav a:hover span,
.page-nav a:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}
.page-nav-big h2 {
  text-align: center;
  font-size: 22pt;
  color: #fff;
  text-transform: none;
  line-height: 40px;
  white-space: normal;
}
.page-nav-big ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  display: table;
}
.page-nav-big ul li {
  display: block;
  float: left;
  margin: 2px;
  line-height: 40px;
}
.page-nav-big ul li button {
  min-width: 170px;
  background: rgba(0, 0, 0, 0.3);
  }
   
  .page-nav-icon {
margin:0;
padding:0;
list-style:none;
float:right
}

.page-nav-icon li {
position:relative;
float:left;
text-align:center
}

.page-nav-icon li span {
opacity:0;
visibility:hidden;
position:absolute;
right:-40%;
bottom:-30px;
margin:-11px 0 0 -55px;
width:110px;
padding:0 5px;
line-height:22px;
height:22px;
font-size:7pt;
color:#fff;
text-transform:uppercase;
text-align:center;
background:#666;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
transition:All .3619s ease;
-webkit-transition:All .3619s ease;
-moz-transition:All .3619s ease;
-o-transition:All .3619s ease
}

.page-nav-icon li span:before {
content:'';
position:absolute;
top:-5px;
right:25%;
margin-left:-10px;
width:0;
height:0;
border-style:solid;
border-width:0 5px 5px;
border-color:transparent transparent #666
}

.page-nav-icon li:hover span {
opacity:1;
visibility:visible;
bottom:-18px
}

.page-nav-icon li a {
display:block;
position:relative;
padding:0 10px;
font-size:16pt
}

.page-nav-icon li a .num {
position:absolute;
color:#333;
line-height:normal;
top:15px;
right:5px;
font-size:8pt;
background:#fff;
padding:0 2px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px
}


И остается только зайти в общий вид форума в админ панели и убрать старый код и поставить новый.

Код
<ul class="page-nav-icon">
  <?if($USER_LOGGED_IN$)?>
<li><a href="javascript://" rel="nofollow" id="upml" class="fNavLink" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><!--<s3065>--><i class="fa fa-envelope"></i><!--</s>--></a>
  <span>Личные сообщения</span></li>
<?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="http://s5.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<li><a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>--><i class="fa fa-comment"></i><!--</s>--></a><span>Новые сообщения</span></li>
<li><a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>--><i class="fa fa-users"></i><!--</s>--></a><span>Участники</span></li>
<li><a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>--><i class="fa fa-file-text"></i><!--</s>--></a><span>Правила форума</span></li>
<li><a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>--><i class="fa fa-search"></i><!--</s>--></a><span>Поиск</span></li>
<li><a class="fNavLink" href="$RSS_LINK$" rel="nofollow"><i class="fa fa-rss"></i></a><span>RSS</span><?if($USER_LOGGED_IN$)?>  
<li><a class="fNavLink" href="$SUBSCRIPTION_LINK$" rel="nofollow"><!--<s6773>--><i class="fa fa-star"></i><!--</s>--></a><span>Подписка</span></li><?endif?>
  </ul>


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

Красивая панель форума ucoz


Так что на любой дизайн подойдет отлично, если вы решите сменить. Все работает на классе, который вы пропишите вверх или в низ, здесь нет ссылок. И после этого вы можете у себя устанавливать разные кнопки, только прописать их и они появятся.

Вот так сравнил на белом фоне.



Кто не в курсе, этот скрип пока стоит здесь на сайте и вы можете его посмотреть как демонстрацию в реальности и оценить, устанавливать вам или нужно менять.
25 Января 2016 Просмотров: 1789 Комментариев: (36)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 36
Kosten
Kosten 25 Января 2016 01:451
0
Хочу добавить, так как мне этот скрипт дал Димон, не знаю кто автор и прошу Димона отписать, если ты автор, то нужно прописать.
tsakonter
tsakonter 25 Января 2016 01:472
0
Вот за это спасибо, давно хотел поменять, но в интернете и здесь на сайте не нашел. Просто здесь на форуме в первые увидел его.
Maryges
Maryges 25 Января 2016 01:513
0
Kosten, но ты даешь, недавно просил у тебя этот код, чтоб поделился, сказал что не кому не дам и распространять не буду, ты мне отказал, сейчас сам выложил на сайт.
Kosten
Kosten 25 Января 2016 02:005
0
Maryges, не мог тебе дать, то что мне дали, спросил бы другое, что сам сделал или что мне не давали, то без проблем. Но мне дали и стал бы сразу его раскидывать на право и налево.

Но и вторая причина таилась в классах, которые нужно прописывать, я понимал что у меня на сайте они закачены файлом, но не знал какие. Без них бы просто не было не одной кнопки, а здесь Димон скинул в комментарий. Теперь можно любую установить, к примеру здесь на сайте они в меню стоят, но поняли о чем говорю. Можно было сделать на форуме по этому материал, но его сильно не знаю, отлично знает Димон, он просто скинул, мне осталось залить на сайт.
Здесь будет он скриптом, который вверх поставите или в низ, но как угодно, только в эти 2 модуля нужно его прописать.
ucozmental
ucozmental 25 Января 2016 01:544
0
Но мне больше нравиться, которая стоит сейчас, простые надписи, просто и понятно, но соглашусь, что так намного красивей и стильно смотрится.
AnTron
AnTron 25 Января 2016 02:076
0
Знакомо мне такое, говорят что не сильно подходит и не нравится, а сами иногда вперед всех поставят и скопируют еще материал.

За скрипт Костен спасибо, поставлю посмотрю как смотреться будет, но думаю все должно быть как нужно.
ucozmental
ucozmental 25 Января 2016 02:1410
0
AnTron, давайте судить по делам, вы обо мне не чего не знаете а так говорите, думаю это не прилично с вашей стороны. Если вы кого то и знаете, не нужно меня с ними сравнивать.
csretven
csretven 25 Января 2016 02:3116
0
Есть такое дело, на одном форуме. как клиент не хаем один материал, а потом оказалось, что один из первых поставил, не знаю для чего они так делают, чтоб их заметили.
Сафрон
Сафрон 25 Января 2016 02:087
0
Вот это порадовал, панелька просто замечательно и главное еще сообщение работает, с меня плюс.
Kosten
Kosten 25 Января 2016 02:118
0
Сафрон, да не вопрос, просто время пришло скинуть, раньше не мог.
Kosten
Kosten 25 Января 2016 02:129
0
Траст, да ты рипер еще тот, и не стесняешься говоришь об этом. Ладно, шутка, можно было и на главный сайт ставить.
Canon
Canon 25 Января 2016 02:1611
0
Сразу стало после установки много места, так намного лучше смотрится, но думаю пока на старые перейду, просто не когда не пользуюсь не одной из функций, и мне все равно какие они.
Tergran
Tergran 25 Января 2016 02:1812
0
Все правильно, если один модуль форума, то здесь эти функций пригодятся, как не крути, а так только что то на сайте а точнее на форуме изменить.
Kosten
Kosten 25 Января 2016 02:2013
0
Но не кто не кого не заставляет, просто что то новое можно установить, в нашем случай просто поменять на другое.
Kosten
Kosten 25 Января 2016 13:2523
0
Но вот пример, как на этом форуме, с кнопками стоит эта панель, думаю нормально смотрится.

1 2 3 »
avatar