Новые кнопки редактирования от uCoz, (смена стилей для темных дизайнов by webo4ka.ru)


Новые кнопки редактирования от uCoz, (смена стилей для темных диз...

732
10 из 10
Проголосовало: 8






Гуляя по просторам webo4ki, я случайно увидел новые кнопки редактирования комментариев, материалов, профиля... Сразу и не понял что это за новые кнопки, даже немного завис, т.к. я не помнил, что я такое делал, но сразу опомнился и побежал на блог uCoz, где в первой же новости на ткнулся на данную статью о новой модер панель.

Лично мне данная модер панель и понравилась и нет, ну во-первых понравилась т.к. она выглядит солидно, красиво, функционально, так же выскакивает красивый title при наведении... А во-вторых не понравилась т.к. произвели обновление, но не предусмотрели данную модер панель для темных дизайнов. Согласитесь, что эта белая модер панель на темных дизайнах будет смотреться как белая ворона среди черных)) Ну ещё у кого-то из-за этой модер панели мог полететь вид материалов или полностью шаблон, т.к. люди уже давно рассчитали как должен смотреться дизайн со старой модер панелью, ну да ладно это не моё уже дело, у меня слава богу панель нормально вписалась))

Ну а теперь перейдем к самому материалу, я решил не ждать пока дизайнеры uCoz сделают черный вид модер панели, а сделал его сам и делюсь им с вами, надеюсь кому-то пригодится... Теперь перейдем к установке.

Установка:

1) В ваш css код вставляете это:

Код

.u-mpanel,
.u-mpanel * {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

  .u-mpanel.hidden {
  display: none;
  }

  .u-mpanel a {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
   
  .u-mpanel-l {
padding: 0 0 0 3px;
margin: 0 15px 0 0 !important;
list-style: none;
line-height: 0;
font-size: 0;
visibility: hidden;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
border-radius: 13px 0 0 13px;
border: 1px solid #222;
position: absolute;
right: -10px;
opacity: 0;
background-color: #555;
white-space: nowrap;
top: 0;
  }
   
.u-mpanel.open .u-mpanel-l {
visibility: visible;
opacity: 1;
right: 0;
padding-right: 10px;
  }

.u-mpanel {
  height: 25px;
  width: 25px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  border-radius: 13px;
  z-index: 0;
  margin-left: 10px;
}
   
  .u-mpanel-toggle {
  height: 25px;
  width: 25px;
  border: 1px solid #222;
  position: relative;
  border-radius: 100%;
  background: #777 url('http://webo4ka.ru/Ucoz8/moder_black_webo4ka.ru.png') no-repeat -20px -20px;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  }
  .u-mpanel-l li {
  position: relative;
  width: 25px;
  height: 23px;
  display: inline-block;
  cursor: pointer;
  background-image: inherit;
  margin: 0;
  }

  .u-mpanel-l .u-mpanel-nspam {width: 57px;}
  .u-mpanel-l .u-mpanel-spam {width: 36px;}
   
  .u-mpanel-ico {
  background: url('http://webo4ka.ru/Ucoz8/moder_black_webo4ka.ru.png') no-repeat;
  width: 11px;
  height: 11px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5px;
  margin-left: -6px;
  }

  .u-mpanel.open .u-mpanel-toggle {background-position: -41px -20px;}
   
.u-mpanel-ip .u-mpanel-ico {background-position: -5px -109px;}
  .u-mpanel-ip:hover .u-mpanel-ico {background-position: -26px -109px;}

.u-mpanel-pending .u-mpanel-ico {background-position: -47px -110px;}
  .u-mpanel-pending:hover .u-mpanel-ico {background-position: -68px -110px;}
   
   
.u-mpanel-nspam .u-mpanel-ico {width: 45px;margin-left: -23px;background-position: -5px -68px;}
.u-mpanel-nspam:hover .u-mpanel-ico, .u-mpanel-nspam.hover .u-mpanel-ico{background-position: -5px -89px;}

.u-mpanel-spam .u-mpanel-ico {width: 24px;margin-left: -12px;background-position: -57px -68px;}
.u-mpanel-spam:hover .u-mpanel-ico {background-position: -57px -89px;}
   
  .u-mpanel-publ .u-mpanel-ico {background-position: -5px -5px;}
  .u-mpanel-publ:hover .u-mpanel-ico {background-position: -26px -5px;}
   
  .u-mpanel-tags .u-mpanel-ico {background-position: -68px -26px;}
  .u-mpanel-tags:hover .u-mpanel-ico {background-position: -68px -47px;}
   
  .u-mpanel-rating .u-mpanel-ico {background-position: -5px -47px;}
  .u-mpanel-rating:hover .u-mpanel-ico {background-position: -26px -47px;}
   
  .u-mpanel-edit .u-mpanel-ico {background-position: -47px -47px;}
  .u-mpanel-edit:hover .u-mpanel-ico {background-position: -68px -5px;}
   
  .u-mpanel-del .u-mpanel-ico {background-position: -47px -5px;}
  .u-mpanel-del:hover .u-mpanel-ico {background-position: -5px -26px;}
   
  .u-mpanel-mark .u-mpanel-ico {background-position: -5px -131px;}
  .u-mpanel-mark:hover .u-mpanel-ico {background-position: -26px -131px;}

  .u-mpanel-left .u-mpanel-ico {background-position: -47px -131px;}
  .u-mpanel-left:hover .u-mpanel-ico {background-position: -68px -131px;}
   
  .u-mpanel-right .u-mpanel-ico {background-position: -47px -152px;}
  .u-mpanel-right:hover .u-mpanel-ico {background-position: -68px -152px;}
   
  .u-mpanel-bw .u-mpanel-ico {background-position: -5px -152px;}
  .u-mpanel-bw:hover .u-mpanel-ico {background-position: -26px -152px;}

.u-mpanel-hide .u-mpanel-ico {width: 14px; height: 9px; margin-top: -4px; margin-left: -7px; background-position: -3px -174px;}
.u-mpanel-hide:hover .u-mpanel-ico, .u-mpanel-hidden .u-mpanel-ico {background-position: -24px -174px;}

.u-mpanel-stock .u-mpanel-ico {width: 14px; height: 9px; margin-top: -4px; margin-left: -7px; background-position: -47px -174px;}
.u-mpanel-stock:hover .u-mpanel-ico {background-position: -67px -174px;}

.u-mpanel-wait .u-mpanel-ico { width: 16px; height: 16px; margin:-8px 0 0 -8px; background: url('http://s39.ucoz.net/.s/img/icon/ajsml.gif') no-repeat 0 0!important }

.u-mpanel-spam.hidden{ display:none }

.u-mpanel-tooltip {
  margin-bottom: 15px;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  right: -16px;
  margin-left: -100px;
  text-align: right;
  padding: 5px 12px;
  border-radius: 4px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font: 400 11px 'PT Sans', Arial, sans-serif;
  line-height: 1.5;
  white-space: nowrap;
  transition: all .2s ease-out;
}
.u-mpanel-tooltip:before {
  position: absolute;
  display: block;
  content: "";
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
}
.u-mpanel-tooltip:after {
  position: absolute;
  display: block;
  content: "";
  top: 100%;
  right: 21px;
  margin: 0 0 0 -6px;
  border: 6px solid rgba(0, 0, 0, 0);
  border-top-color: #000;
  border-top-color: rgba(0, 0, 0, 0.7);
}
.u-mpanel-l li:hover .u-mpanel-tooltip {
  visibility: visible;
  opacity: 1;
  margin-bottom: 10px;
}
   
   
  /*--------- Reverse ---------*/
   
  .u-mpanel.right .u-mpanel-l {
  padding: 0 3px 0 0;
  margin: 0 0 0 15px !important;
  right: inherit;
  left: -10px;
  border-radius: 0 13px 13px 0;
}
   
.u-mpanel.open.right .u-mpanel-l {
  padding: 0 3px 0 10px;
  left: 0;
}
.u-mpanel.right {
  margin: 0 10px 0 0;
}  
.u-mpanel.right .u-mpanel-tooltip {
  left: -16px;
  right: inherit;
  margin-right: -100px;
  margin-left: 0;
  text-align: left;
}
.u-mpanel.right .u-mpanel-tooltip:before {
  right: 0;
  left: inherit;  
}
.u-mpanel.right .u-mpanel-tooltip:after {
  top: 100%;
  left: 21px;
  right: inherit;
  margin: 0 -6px 0 0;
}  
   

.u-mpanel.right.photo-view,.u-mpanel.video-view {
  margin-top: -5px;
}
   
.u-mpanel-ud .u-mpanel-ico {background-position: -5px -197px;}
.u-mpanel-ud:hover .u-mpanel-ico {background-position: -26px -197px;}

.u-mpanel-rank .u-mpanel-ico {background-position: -47px -196px;}
.u-mpanel-rank:hover .u-mpanel-ico {background-position: -68px -196px;}


2) На всех страницах перед </body> (можете воспользоваться быстрой заменой) вставляете:

Код
<script language="jscript">$(document).ready(function(){$("link[href$='/src/moder_panel_new.css']").attr('href','');});</script>


готово!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 1

Бармен
+7
Бармен написал: Написано 07 мая 2015 в 12:37
Комментарий №1
Спасибо.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 5
    Гостей: 5
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: