Настройка внешнего вида Firefox в userChrome.css

axes · №276

ВОПРОС.

При использовании personas получается скин, который распространяется по всей поверхности верхней панели, включая менюбар, адрессбар, панель поиска и панель вкладок. Так как personas-скин состоит из двух частей - header-а и footer-а, речь пока идет о верхней части. При попытке отобразить этот скин через userChrome.css получается не совсем то, что отображается в personas.
Я не разбираюсь в css, но путем лазанья по многочисленным сайтам накопал это:

#Findbar, toolbar {background: transparent none !important;}
#navigator-toolbox {background-image: url(t-header.png) !important;}
#browser-bottombox {background-image: url(t-footer.png) !important;}

результат:

скин personas

что получилось у меня

если использовать код

menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url("t-header.png") !important;
background-color: none !important; }

то получается следующее:

то есть для тулбара, адрессбара, таббара каждому присваивается это изображение (оно уже не плоское, а повторяется трижды)

Вопрос в том, как сделать то же самое через userChrome.css, не прибегая к использованию personas?
Чтобы все отображалось как в оригинале?

оригинальные картинки темы personas

http://www.multiupload.com/ZDTUBJ9KT3

Буду благодарен, если кто-то поможет разобраться

Отредактировано axes (18-05-2011 19:37:18)

hydrolizer · №277

axes
Да в общем-то всё очень просто. Посмотрите, каков оригинальный размер картинок, которые вы пытаетесь натянуть на браузер
Если не хотите ресайзить картинку - используйте background-size. В вашем случае:

Выделить код

Код:

#navigator-toolbox {
    background-image: url(t-header.png) !important;
    background-size: cover !important;
}

Отредактировано hydrolizer (18-05-2011 20:00:54)

axes · №278

Просто, да не совсем

Использовал ваш код - результат такой же, как в моем первом скрине. Выставление параметров длины и ширины тоже не помогло

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

hydrolizer · №279

axes
А где у вас лежат картинки?

axes · №280

картинки лежат в Firefox\Firefox (Profile)\chrome

сейчас попробовал такое

#navigator-toolbox {
   background-image: url(t-header.png);

   -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
   -o-background-size: 100% 100%; /* Opera 9.5 */
   -webkit-background-size: 100% 100%; /* Safari 3.0 */
   background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

   -moz-border-image: url(t-header.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}

получилось вот что:

Пока далеко от идеала..

hydrolizer · №281

axes
В общем, дело в версии FF - я не заметил, что она у вас 3.6. Эта версия не поддерживает значения content и cover для background-size. Вычисляйте нужное значение в процентах, либо смасштабируйте рисунки графическим редактором. С таббаром у вас не получается всё по той же причине - в 3.6 другая XUL-разметка окна браузера. Должно сработать примерно в таком виде (я проверял на FF 3.6.17):

Выделить код

Код:

#navigator-toolbox,
 .tabbrowser-tabs {
    background-image: url(t-header.jpg) !important;
    background-size: 50% 50% !important;
}

#statusbar-display {
    -moz-appearance: none !important;
    background: transparent none !important;
    background-image: url(t-footer.jpg) !important;
    background-size: 50% 50% !important;
}

Отредактировано hydrolizer (18-05-2011 20:55:23)

axes · №282

hydrolizer, у меня версия 3.6.8. Также скачал и поставил firefox 3.6.17, чтобы проверить.

что-то вроде того получилось, хотя вид тот же - нересайз - серая полоса, тигра не видно
если же подогнать размер изображения к размеру экрана - изображение тигра делится на 2 части. Каждому параметру - #navigator-toolbox и tabbrowser-tabs - присваивается этот backgroung, вот в чем проблема..

в personas много тонкостей - непонятно, только ли с помощью css они натягивают изображение, и наверное точно также воспроизвести не удастся..

hydrolizer · №283

axes пишет

только ли с помощью css они натягивают изображение

Только. Я влез в код расширения personas, вот результат.
Тема в приложении темная - для нее при необходимости надо будет допилить оформление элементов, которые сливаются с фоном темы. А в остальном - всё работает исключительно средствами userChrome.css.

axes · №284

Hydrolizer - ты гений!!!! Спасибо за помощь! :beer:

Остался только один момент - таббар выделен сплошной серой полосой, тогда как в оригинале ее нет:

запарился уже ползать по css, менял и opacity, и все остальное - ничего не помогает..

Tiger.711 · №285

А мне кажется, так даже лучше смотрится...

hydrolizer · №286

axes
Найдите в том userChrome, который по ссылке выше, фрагмент с #main-window .tabbrowser-tabs {...}, и замените вот на это:

Выделить код

Код:

#main-window .tabbrowser-tabs {
  -moz-appearance: none !important;
  background-color: transparent !important;
  background: none !important;
  border-style: none !important;
}

joker_ru · №287

hydrolizer, спасибо. моя задачка решилась

Подскажите пожалуйста, а с помощью userChrone.css можно заменить иконки кнопок интерфейса (внерёд, назад, закладки, откр. новую вкладку и т.д.)? то есть без замены темы, заменить картинки интерфейса.

Отредактировано joker_ru (19-05-2011 14:08:27)

axes · №288

сейчас только до меня дошло - эта темная полоса наследуется из дефолтной темы Firefox
если ставить тему personas и после нее использовать свой userChrome.css - этой полосы не появляется

Спасибо, hydrolizer, с этой правкой кода все встало отлично!

axes · №289

отлаженный и оптимизированный вариант userChrome.css для использования изображения personas без самого дополнения personas (может, кому-то пригодится):

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
#main-window {
-moz-appearance: none !important;
}
#main-window #navigator-toolbox {
-moz-appearance: none !important;
background-color: transparent !important;
border-top: 0 !important;
}
#main-window #navigator-toolbox toolbar {
-moz-appearance: none !important;
background-color: transparent !important;
border-top-width: 0px !important;
border-top-color: transparent !important;
border-bottom: none !important;
}

#main-window .tabbrowser-tabs {
-moz-appearance: none !important;
background-color: transparent !important;
background: none !important;
border-style: none !important;
}
#main-window .tabbrowser-tab {
background-color: -moz-dialog !important;
opacity: 0.6 !important;
}
#main-window .tabbrowser-tab[selected="true"] {
opacity: 0.8 !important;
}
#main-window #urlbar,
#main-window #searchbar {
opacity: 0.8 !important;
}
#browser-bottombox #status-bar {
border-left: none !important;
border-bottom: none !important;
border-right: none !important;
}
#browser-bottombox #FindToolbar {
border-top-width: 0px !important;
border-top-color: transparent !important;
-moz-border-top-colors: transparent !important;
}
#main-window {
background-image: url(header.png) !important;
background-repeat: no-repeat !important;
background-position: top right !important;
}
#main-menubar > menu {
color: black !important;
}
#browser-bottombox {
background-image: url(footer.png) !important;
background-repeat: no-repeat !important;
background-position: bottom left !important;
background-color: transparent !important;
}
#browser-bottombox * {
-moz-appearance: none !important;
background-color: transparent !important;
background-image: none !important;
}

personas можно взять в папке профиля (тема сохраняется в виде файлов lightweighttheme-header и lightweighttheme-footer)

Отредактировано axes (19-05-2011 16:19:05)

Tiger.711 · №290

axes пишет

отлаженный и оптимизированный вариант userChrome.css для использования изображения personas без самого дополнения personas

Таки не удержусь и спрошу: а нафига?

axes · №291

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

hydrolizer · №292

Tiger.711 пишет

Таки не удержусь и спрошу: а нафига?

Например, обоины-персоны не вешаются на скины FF. Если будет желание все-таки их повесить, то вышеизложенный трюк поможет.
Только надо упомянуть, что приведенный выше код - для FF 3.6. Для 4.0 он будет другим.

Yeesha · №293

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

userChrome.css

Выделить код

Код:

/* set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Красим кнопку меню в синий */
#appmenu-button {
    background: -moz-linear-gradient(#0B9BED, #0071CD 51%, #006DCA 49%, #0063BB) !important;
}
#appmenu-button:hover:not(:active):not([open]) {
    background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(107,178,239,.5) 10%, rgba(87,170,242,0) 70%),
        -moz-radial-gradient(center bottom, farthest-side, rgb(120,184,240), rgba(0,119,218,255)),
        -moz-linear-gradient(rgb(31,147,236), rgb(0,101,182) 95%) !important;
}

/* Сужаем кнопку меню и заменяем надпись */
#appmenu-button {
    padding: 2px 5px 2px 0 !important;
    min-width: 0 !important;
}
#appmenu-button .button-text {
    display: none !important;
}
#appmenu-button dropmarker:before {
    content: "Fx " !important;
}

/* Поднимаем панель вкладок */
#main-window[sizemode=normal][chromemargin="0,-1,-1,-1"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    margin: -15px 105px -1px 52px !important;    /* Для стандартных тем Windows 7 */
/*    margin: -12px 92px -1px 50px !important;     Для темы с тонким обрамлением окон (0px) и уменьшенными заголовками (18px) */
}

/* Уточняем позицию меню, появляющегося при нажатии клавиши Alt */
#main-window[sizemode=normal] #navigator-toolbox[tabsontop="true"] #toolbar-menubar[autohide="true"] {
    margin: -15px 0 15px 56px !important;    /* Для стандартных тем Windows 7 */
/*    margin: -12px 0 12px 54px !important;     Для темы с тонким обрамлением окон (0px) и уменьшенными заголовками (18px) */
}

/* Минимальная ширина вкладок */
.tabbrowser-tab {
    min-width: 60px !important;
}

Вид в стандартных темах Windows 7:

Вид в теме Windows 7 с тонким обрамлением окон (0px) и уменьшенными заголовками (18px):

Развёрнутое окно:

Перетаскивание окна, когда панель вкладок заполнена, — за промежуток между кнопкой меню и вкладками.

Отредактировано Yeesha (19-05-2011 20:46:16)

Tiger.711 · №294

Кто-нибудь пользуется New Tab King и знает как убрать панель с поиском?

mserv · №295

Помогите скрыть надпись «Найти» в findbar. Плиз.

Отредактировано mserv (20-05-2011 01:50:21)

hydrolizer · №296

mserv

Выделить код

Код:

label.findbar-find-fast {
    display: none;
}

mserv · №297

hydrolizer, спасибо. Ещё один вопрос возник. Как теперь сюда интервал заделать?

Porhun · №298

Подскажите, плз, каким образом можно запретить выход из полноэкранно режима?

hydrolizer · №299

Porhun
Средствами CSS - никак.

kpripper · №300

Помогите все таки убрать надписи у папок в панели закладок.

Полезная информация

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Код:

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Re: Настройка внешнего вида Firefox в userChrome.css

Board footer