• Страница 1 из 1
  • 1
Форум Kentos311 » uCoz » Скрипты для сайта » Современные кнопки для форума uCoz (Оригинальный кнопки на замену стандартных надписей)
Современные кнопки для форума uCoz
Kentos311Дата: Понедельник, 08.01.2018, 14:52 | Сообщение # 1
Сообщений: 729
Статус:

Сегодня вы сможете заменить свои кнопки на форуме на современные и реалистичные. Заходя на форум гости и в том числе вы видите некрасивые надписи "Новые сообщения, Участники, Правила форума, Поиск, Подписки" предлагаю вам заменить на более усовершенствованные кнопки для uCoz.
Ваши кнопки заменят красивые иконки, при наведении на них будет показано в title информация. Данные кнопки будут работать на любом дизайне uCoz, начиная от светлого и заканчивая темным.

Установка:
Заходим в панель управления ➜ управление дизайном ➜ Общий вид страниц форума и находим код:
Код
<table border="0" cellpadding="0" height="30" cellspacing="0" width="100%">
<tr>
<td align="right">[<?if($USER_LOGGED_IN$)?>
<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>-->Личные сообщения<!--</s>-->($UNREAD_PM$)</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="http://s22.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>-->Новые сообщения<!--</s>--></a> ·  
<a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>-->Участники<!--</s>--></a> ·  
<a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>-->Правила форума<!--</s>--></a> ·  
<a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>-->Поиск<!--</s>--></a> ·  
<a class="fNavLink" href="$RSS_LINK$" rel="nofollow">RSS</a><?if($USER_LOGGED_IN$)?> ·  
<a class="fNavLink" href="$SUBSCRIPTION_LINK$" rel="nofollow"><!--<s6773>-->Подписки<!--</s>--></a><?endif?> ]</td>
</tr>
</table>


И меняем его на вот этот:
Код
<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>


- Дальше прописываем в стили 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  
}


- Подключаем иконочный шрифт между hеad и /hеаd в "Общий вид страниц форума"
Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Установка завершена!, обновляем страницу сайта, и радуемся результату.
Прикрепления: 8298144.png (49.6 Kb)
 
Форум Kentos311 » uCoz » Скрипты для сайта » Современные кнопки для форума uCoz (Оригинальный кнопки на замену стандартных надписей)
  • Страница 1 из 1
  • 1
Поиск: