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

Будьте в курсе последних изменений в мире Mozilla, следя за нашим микроблогом в Twitter.

№27618-05-2011 19:32:19

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

ВОПРОС.

При использовании 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

2dj8o6t.jpg

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

rsvker.jpg

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

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

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

9kwk0j.jpg

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

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

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

http://www.multiupload.com/ZDTUBJ9KT3


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

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

Отсутствует

 

№27718-05-2011 19:53:10

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

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

Выделить код

Код:

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

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

Отсутствует

 

№27818-05-2011 20:14:21

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

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

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

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

Отсутствует

 

№27918-05-2011 20:17:34

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

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

Отсутствует

 

№28018-05-2011 20:35:07

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

картинки лежат в 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) */
}

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

instfk.jpg

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

Отсутствует

 

№28118-05-2011 20:54:36

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

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)

Отсутствует

 

№28218-05-2011 21:51:47

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

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

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

1z4iwq1.jpg

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

Отсутствует

 

№28319-05-2011 07:03:29

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

axes пишет

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

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

Отсутствует

 

№28419-05-2011 13:31:53

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

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

33xy3cy.jpg

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

2dj8o6t.jpg

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

Отсутствует

 

№28519-05-2011 13:43:55

Tiger.711
‌
 
Группа: Extensions
Откуда: из Лесу
Зарегистрирован: 30-07-2010
Сообщений: 7975
UA: Nightly 6.0

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

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


Большой кот... Пуфыстый... Полосатый... Зубастый (:

Отсутствует

 

№28619-05-2011 13:58:39

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

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;
}

Отсутствует

 

№28719-05-2011 14:01:56

joker_ru
Участник
 
Группа: Members
Зарегистрирован: 17-05-2011
Сообщений: 9
UA: Firefox 4.0

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

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

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

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

Отсутствует

 

№28819-05-2011 14:14:26

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

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

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

Отсутствует

 

№28919-05-2011 16:18:29

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

отлаженный и оптимизированный вариант 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)

Отсутствует

 

№29019-05-2011 16:23:11

Tiger.711
‌
 
Группа: Extensions
Откуда: из Лесу
Зарегистрирован: 30-07-2010
Сообщений: 7975
UA: Firefox 4.0

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

axes пишет

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

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


Большой кот... Пуфыстый... Полосатый... Зубастый (:

Отсутствует

 

№29119-05-2011 16:27:06

axes
Участник
 
Группа: Members
Зарегистрирован: 05-01-2010
Сообщений: 20
UA: Firefox 3.6

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

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

Отсутствует

 

№29219-05-2011 16:40:12

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

Tiger.711 пишет

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

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

Отсутствует

 

№29319-05-2011 19:13:17

Yeesha
Участник
 
Группа: Members
Зарегистрирован: 23-08-2008
Сообщений: 356
UA: Firefox 4.0

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

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

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:

fx1.png

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

fx2m.th.png

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

fx3c.th.png

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

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

Отсутствует

 

№29419-05-2011 20:28:25

Tiger.711
‌
 
Группа: Extensions
Откуда: из Лесу
Зарегистрирован: 30-07-2010
Сообщений: 7975
UA: Nightly 6.0

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

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


Большой кот... Пуфыстый... Полосатый... Зубастый (:

Отсутствует

 

№29519-05-2011 22:26:43

mserv
Участник
 
Группа: Members
Зарегистрирован: 15-11-2008
Сообщений: 1025
UA: Firefox 4.0

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

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

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

Отсутствует

 

№29620-05-2011 05:12:57

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

mserv

Выделить код

Код:

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

Отсутствует

 

№29720-05-2011 11:13:11

mserv
Участник
 
Группа: Members
Зарегистрирован: 15-11-2008
Сообщений: 1025
UA: Firefox 4.0

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

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

Отсутствует

 

№29820-05-2011 12:23:52

Porhun
Участник
 
Группа: Members
Зарегистрирован: 20-05-2011
Сообщений: 2
UA: Firefox 3.6

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

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

Отсутствует

 

№29920-05-2011 12:42:53

hydrolizer
Участник
 
Группа: Extensions
Зарегистрирован: 22-07-2009
Сообщений: 1945
UA: Firefox 4.0

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

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

Отсутствует

 

№30020-05-2011 15:36:12

kpripper
Участник
 
Группа: Members
Зарегистрирован: 18-12-2009
Сообщений: 26
UA: Firefox 4.0
Веб-сайт

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

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

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]