Выдвижной мини-профиль

Параметр Значение
Категория Другие скрипты
Добавил uAdministrator
Дата публикации 18.04.2024, 04:18
Размер файла 5.3 Kb
Авторский
Адапт. дизайн
Просмотрен 28

Очередная версия выдвижного мини-профиля для uCoz. На этот раз мини-профиль будет представлен в тёмном цветовом дизайне для вашего сайта.

Установка

  1.  Установите HTML код в нижнюю часть сайта:

Панель управления → Управление дизайном → Глобальные блоки → Нижняя часть сайта

Код
<?if($USER_LOGGED_IN$)?>  
<ul class="uwaid_panel">  
  <li class="close_p">x</li>  
 <li><a href="$PERSONAL_PAGE_LINK$"><i class="fa fa-user" aria-hidden="true"></i> Моя страница</a></li>
  <li><a href="$PM_URL$"><i class="fa fa-envelope" aria-hidden="true"></i> Сообщения ($UNREAD_PM$)</a></li>
  <li><a href="$ADD_ENTRY_LINK$"><i class="fa fa-plus-circle" aria-hidden="true"></i> Опубликовать</a></li>
  <li><a href="/index/11"><i class="fa fa-cog" aria-hidden="true"></i> Настройки</a></li>
  <li><a href="$LOGOUT_LINK$"><i class="fa fa-sign-out" aria-hidden="true"></i> Выход</a></li>
</ul>  
<a href="#" class="site-nav-sub featured my_profile"><i class="fa fa-angle-down site-nav-arrow"></i>$USERNAME$</a>
<script type="text/javascript" src="/js/3983_profile.uwaid.r.js"></script>  
<?endif?>

2. Копируем стили и вставляем в CSS:

Панель управления → Управление дизайном → Таблица стилей (CSS) 

Код
.uwaid_panel {position: fixed; right:10px; bottom:10px; display:none; list-style: none; margin: 0; padding: 0; z-index:9999999999999;} .uwaid_panel a { width: 200px; height: 40px; text-decoration:none; display: block; padding: 9px;text-align: left; font: 16px Tahoma; line-height: 37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; } .uwaid_panel a:hover { text-decoration:none;} .uwaid_panel a img, .uwaid_icon { height: 40px; width: 40px; float: left; margin-right: 9px; } .uwaid_panel a span {border-radius: 46px;float: right;padding: 0 15px;font-size: 13px;} .uwaid_icon {background:url('/img/18148035.png');} .settings {background-position-y: -40px;} .exit {background-position-y: -80px;} .my_profile {padding: 0 23px;z-index:9999999999999; text-align:center; font:16px Tahoma; line-height:37px;transition: all 0.3s 0.09s ease;-moz-transition: all 0.3s 0.09s ease;-webkit-transition: all 0.3s 0.09s ease;-o-transition: background 0.3s 0.09s ease; position:fixed; right:10px; bottom:10px;} .my_profile:hover {cursor:pointer;} .close_p {position: absolute;margin-left: 216px;border-radius: 17px;padding: 4px 8px;margin-top: -14px;} .close_p:hover {cursor:pointer;} /* Цветовые стили */ .uwaid_panel {border:7px solid #33373b;border-bottom:6px solid #33373b;border-left:none; } .uwaid_panel a {background: #272a2d; border-left:7px solid #33373b;color: #fff;} .uwaid_panel a:hover {background:#232629;border-left:7px solid #e05b5b;} .uwaid_panel a span {background: #e05b5b;} .my_profile {border:7px solid #33373b;background: #272a2d;color:#fff;} .my_profile:hover {background:#454B50;} .close_p {background: #e05b5b;color: #fff;} .close_p:hover {background:#F87676;}

3. В самый верх CSS стилей вставляем код:

Панель управления → Управление дизайном → Таблица стилей (CSS) 

Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Теги: Мини-профиль, выдвижной

Комментариев пока нет..

Ты можешь быть первым, кто оставит комментарий к публикации!

Всего комментариев: 0
avatar



Администратор в сети
Администратор не в сети