« Заменяем ссылки на CSS кнопки для форума uCoz »

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

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

Установка:
1. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:

Код
/* Заменяем ссылки на CSS кнопки для форума uCoz */
.g-button {  
  display: inline-block;  
  min-width: 40px;  
  text-align: center;  
  color: #444;  
  font-size: 12px;  
  height: 27px;  
  padding: 0 8px;  
  line-height: 27px;  
  -webkit-border-radius: 2px;  
  -moz-border-radius: 2px;  
  border-radius: 2px;  
  -webkit-transition: all 0.218s;  
  -moz-transition: all 0.218s;  
  -ms-transition: all 0.218s;  
  -o-transition: all 0.218s;  
  transition: all 0.218s;  
  border: 1px solid #dcdcdc;  
  background-color: #f5f5f5;  
  background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));  
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);  
  background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);  
  background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);  
  background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);  
  background-image: linear-gradient(top,#f5f5f5,#f1f1f1);  
  -webkit-user-select: none;  
  -moz-user-select: none;  
  user-select: none;  
  cursor: default;  
  }  
  *+html .g-button {  
  min-width: 70px;  
  }  
  button.g-button,  
  input[type=submit].g-button {  
  height: 29px;  
  line-height: 29px;  
  vertical-align: bottom;  
  margin: 0;  
  }  
  *+html button.g-button,  
  *+html input[type=submit].g-button {  
  overflow: visible;  
  }  
  .g-button-submit {  
  border: 1px solid #393939;  
  color: #fff;  
  text-shadow: 0 1px rgba(0,0,0,0.1);  
  background-color: #393939;  
  background-image: -webkit-gradient(linear,left top,left bottom,from(#393939),to(#393939));  
  background-image: -webkit-linear-gradient(top,#393939,#393939);  
  background-image: -moz-linear-gradient(top,#393939,#393939);  
  background-image: -ms-linear-gradient(top,#393939,#393939);  
  background-image: -o-linear-gradient(top,#393939,#393939);  
  background-image: linear-gradient(top,#393939,#393939);  
  }  
  .g-button-submit:hover {  
  border: 1px solid #DC9A37;  
  color: #393939;
  cursor: pointer;
  text-decoration: none;
  text-shadow: 0 1px rgba(0,0,0,0.3);  
  background-color: #DC9A37;  
  background-image: -webkit-gradient(linear,left top,left bottom,from(#dd9a22),to(#dd9a22));  
  background-image: -webkit-linear-gradient(top,#dd9a22,#dd9a22);  
  background-image: -moz-linear-gradient(top,#dd9a22,#dd9a22);  
  background-image: -ms-linear-gradient(top,#dd9a22,#dd9a22);  
  background-image: -o-linear-gradient(top,#dd9a22,#dd9a22);  
  background-image: linear-gradient(top,#dd9a22,#dd9a22);  
  }  
  .g-button-submit:active {  
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);  
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);  
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);  
  }
/* InternetEmpire.Ru */

2. Заходим в ПУ - Управление дизайном - модуль Форум - Общий вид страницы форума

  • Ищем данный код:

Код
<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://s24.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>


  • И заменяем его на этот:

Код
<td align="right"><?if($USER_LOGGED_IN$)?>
<a href="javascript://" rel="nofollow" id="upml" class="g-button g-button-submit" 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://s24.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<a class="g-button g-button-submit" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>-->Новые сообщения<!--</s>--></a>  
<a class="g-button g-button-submit" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>-->Участники<!--</s>--></a>  
<a class="g-button g-button-submit" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>-->Правила форума<!--</s>--></a>  
<a class="g-button g-button-submit" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>-->Поиск<!--</s>--></a>  
<a class="g-button g-button-submit" href="$RSS_LINK$" rel="nofollow">RSS</a><?if($USER_LOGGED_IN$)?>  
<a class="g-button g-button-submit" href="$SUBSCRIPTION_LINK$" rel="nofollow"><!--<s6773>-->Подписки<!--</s>--></a><?endif?>
</td>


Готово!


Демонстрация

Демонстративная страница или сайт материала

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

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


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 675

Теги к материалу: кнопки, для, на, Заменяем, ucoz, форума, ссылки, css

Поделиться в соц. сетях:
Комментариев к материалу: 2
Сделал другой дизайн, с прогибом при наведение, хороший код.
0
Виктор Ягодин 02.02.2016 в 22:14
Да, видел, на твоем сайте)
0
avatar