« Заменяем стандартные кнопки на стильные на сайте uCoz »

Описание материала:

Многие веб мастера меняют дизайн, так как их может что-то не устраивать. В этой теме рассмотрим как поменять кнопки на стильные, а также их добавить в описание, так как они будут идти на классе, что очень удобно. За основу возьмем надписи на форуме, это, как правило, или личные сообщение, но у каждого есть, если этот модуль активирован.

Все можете понять по самому изображению и теперь начнем менять их.

Для начало нам нужен один официальный сайт Fontawesome.ru там мы будем драть кнопки , а точнее класс на них.

Установка:

Можно с официального сайта скачать архив и разместить его в корень сайта, но мы сделаем по другому, так как он предоставляет код.

Идем вверх сайта в шапку и в самый вверх устанавливаем между head

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


Как поставили, теперь можно заняться сменой надписей на форуме и выставить свое оригинальное.

Идем в общий вид страниц форума и находим скрипт который отвечает за них, это основном такой идет.

Код
<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  
}


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

Теперь о главном:

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

Вот пример, поставил на регистраций.



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

Код
<i class="Здесь класс"></i>


Это будет так:

Код
<i class="fa fa-user-secret"></i>


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

Делается так:

Код
<i class="fa fa-check-square" style="font-size:19px;"></i>


И здесь не чего сложного нет.

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

Надеюсь вам этот небольшой мануал поможет в сайт строение.

Источник - http://zornet.ru/

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: Kosten | Категория: Кнопки и иконки | Просмотров: 1071
Поделиться в соц. сетях:
Комментариев: 1
1 Kosten
В 23:58, 04.03.2016 оставил(а) комментарий:
Забыл сказать, если у вас включен переводчик, но на официальном сайте, когда все прочтете, отключите его, чтоб классы были оригинальны а не переведенные.
Нравится Нет Спам
Войдите:
avatar