Новый админ-бар


Новый админ-бар

1692
6.6 из 10
Проголосовало: 10




  • Скачать с сервера
  • Скачать
  • Смотреть демо


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

Описание

Итак. Я попытался создать новый админ-бар. Он полностью изменен, добавлена красивая (на мой взгляд) градиентная заливка. Изменены кнопки, они стали лучше и удобнее (как мне кажется =). Красивый эффект наведения. Убрана надоедливая фигня справа: "Использовано n мегабайт и n". А так же поставлена тень.

Установка

Перейдем к установке. Для начала вам необходимо в админ-баре поставить стандартным цветом "серый (gray)" [Общее - цвет админ-бара - серый]. Теперь скачиваем архив и заливаем два файла в папку "img". А сейчас самое простое: вставляем в свой ксс этот код:

Код
/*=======================Новый админ-бар==============================*/

#uzadmp {
background: rgb(201,201,201);
background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#ffffff',GradientType=0 ); /* Делаем градиентную заливку */
-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4); /*Создаем тень*/
-moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.4)}  

.pbarContainer {display:none}/* Отключение "Всего использовано: ... MB*/

.admBarCenter {color:gray /*Цвет текста на кнопках в админ баре*/
  ;background:none!important/*Убирает кое-какой "баг"*/}
.admBarCenter:hover {background:url(/img/tb-btn-sprite.png)!important;border-radius:3px}/*Заменяем цвет кнопок админ-бара при наведении*/
.admBarLeft {background:none!important}/*Убираем стандартные цвета админ бара*/
.admBarLeft:hover {background:none!important}/*Заменяем цвет кнопок админ-бара при наведении*/
.admBarRight {background:none!important}/*Убираем стандартные цвета админ бара*/
.admBarRight:hover {background:none!important}/*Заменяем цвет кнопок админ-бара при наведении*/

.u-menucont {background: rgb(201,201,201);
background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(201,201,201,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(201,201,201,1) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#ffffff',GradientType=0 )}/*Задний фон выпадающего меню*/
.u-menuvsep {display:none}/*Скрываем разделитель внутри выпадающего меню*/

.u-menubody {border:none!important;background:red} /*Убираем "границы" выпадающего меню. Похожая штучка будет ниже. Но они не одинаковые, так что не убирать!*/

.u-menuvitem {backround:url(/img/menubg.png)!important;color:gray!important;font-size:9pt}
.u-menuvitem:hover {background:#C9C9C9!important;background-size:100%}

.u-menu {border-radius:0px 0px 5px 5px!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-ml {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-bl {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-bc {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-footer {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню, как я парился, когда это находил*/
.xw-br {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-mc {background:#B7B7B7!important;border:none!important}/* Настраиваем "рамки" выпадающего меню и убираем "границы"*/
.xw-mr {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-tl {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню, а здесь у меня голова взорвалась*/
.xw-tr {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню*/
.xw-tc {background:#B7B7B7!important}/* Настраиваем "рамки" выпадающего меню, наконец-то!*/

/*=============================================*/


Постарался все прокомментировать. (Учусь же)

Ошибки

Так же есть один минус. Если у вас стоят другие Ajax-окна, а не стандартные, то админ-бар будет отображаться некорректно. Так как в Ajax-окнах есть стили, которые есть и в моем коде( Такая вот печаль...
Автор публикации: Загрузка
Загрузка
SacSvipe, это его n материал
Источник: http://Придумал SacSvipe на Webo4ka.ru
  • Всего комментариев: 5

Kulac
0
Kulac написал: Написано 11 Ноября 2013 в 18:12
Комментарий №5
Если учишься, то уже хорошо. То, что ты сделал - единичный случай, а значит, нужно больше вариаций в одном скрипте. Продолжай работу.

Muşatinu
0
Muşatinu написал: Написано 01 Октября 2013 в 10:13
Комментарий №1
Неаккуратно ты это сделал, он меня не только админ бар но и ajax окно.

SacSvipe
0
SacSvipe написал: Написано 01 Октября 2013 в 14:59
Комментарий №2
Ну это ведь пока что пробная версия. и кстати, я посмотрел, да вроде и Ajax окна норм смотрятся))

BLAzER
0
BLAzER написал: Написано 01 Октября 2013 в 18:29
Комментарий №3
uWnd окна ужасные

SacSvipe
0
SacSvipe написал: Написано 02 Октября 2013 в 12:46
Комментарий №4
я делал только лишь админ-бар! На Ajax/uWnd окна вообще не обращал внимания! А если быть честным, то и не думал даже что они тоже изменятся biggrin

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