Как украсить браузер?

Raf-9600 · №1

Покопавшись в скинах для Лисицы, нашел несколько, с фишками достойными внимания. Собстно меня интересует, есть ли какие-нибудь отдельные их реализации (в стилях, к примеру)?

Собстно что понравилось в Bloomind FT SilverGlow:
1. Все меню имеют слегка прозрачный, светло серый фон, и что самое главное, они все заокруглены!

2. "Искривлённая" кнопка с ярлыком сайта

3. Цвет всех прогресс-баров

4. То каким цветом он выделяет ссылки

5. "Типа 3D" нижняя панелька. С красивым "выделением" кнопок, когда на них наводишь курсор

6. Когда нажимаешь на кнопку, она становиться голубого цвета.

Что понравилось в теме TwentyTen2
1. Когда нажимаешь на кнопку Firefox, возникает симпатичная "панелька".

2. Кнопки

Что понравилось в теме Silvermel
1. Очень крутые галочки

Что понравилось в теме Office Black
1. Выделение желтым цветом

Ну и меня оочень давно интересует, если что-нибудь, делающее так, чтобы кнопка Firefox, заголовок окна, и кнопки свернуть\закрыть, были на одном уровне?

P.S.
На данный момент установил тему Australis, которая реализует фишку с вкладками из мокапов.

Отредактировано Raf-9600 (04-08-2011 01:40:43)

Tiger.711 · №2

Raf-9600
Вам надо взять в руки текстовый редактор для css (Хотя бы notepad++) и понравившиеся стили отсюда просто туда скопировать. Как вариант, оттуда-же поставить Stylish.

Raf-9600 · №3

Tiger.711 пишет

понравившиеся стили отсюда просто туда скопировать.

Не понял. Куда скопировать? В одну из этих тем? Там откуда вы мне рекомендуете их скопировать, я даже перекрашивателя прогресс-баров не смог найти =\

Кстати, нашел решение последнего своего вопроса

Raf-9600 пишет

меня оочень давно интересует, если что-нибудь, делающее так, чтобы кнопка Firefox, заголовок окна, и кнопки свернуть\закрыть, были на одном уровне?

https://addons.mozilla.org/ru/firefox/addon/aero-window-title/ делает это, только с Fx7 он не очень хорошо дружит.

hydrolizer · №4

Raf-9600 пишет

Не понял. Куда скопировать? В одну из этих тем?

В свою тему
Если серьезно - берете наиболее понравившуюся тему, заводите тестовый профиль, устанавливаете туда тему в распакованном виде (надо прописать <em:unpack>true</em:unpack> в install.rdf), и начинаете потихоньку подпиливать эту тему по своему вкусу. По мере подпиливания - запаковываете в xpi, и переносите в рабочий профиль. Я так уже давно попиливаю Bloomid GraphiteGlow.

Tiger.711 · №5

Raf-9600 пишет

Tiger.711 пишет
понравившиеся стили отсюда просто туда скопировать.
Не понял. Куда скопировать? В одну из этих тем? Там откуда вы мне рекомендуете их скопировать, я даже перекрашивателя прогресс-баров не смог найти =\

Raf-9600
Простой пример:
1. Установите/включите дефолтную тему;
2. Скачайте файл;
3. Засуньте этот файл в %папка профиля%/Chrome/
^{Если её нет - создайте. Файл должен называться userChrome.css}
4. Перезапустите браузер.

Kamui · №6

Raf-9600 пишет

1. Все меню имеют слегка прозрачный, светло серый фон, и что самое главное, они все заокруглены!

прозрачность меню

Выделить код

Код:

menupopup {opacity: .8 !important;}

Raf-9600 · №7

hydrolizer пишет

и начинаете потихоньку подпиливать эту тему по своему вкусу.

Эм... с учетом что я нуб, это возможно? Я видь не шарю, что именно, откуда копировать, и куда вставлять.
И вообще, ИМХО хотелось бы чтоб эти фенечки были реализованы через Stylish

Tiger.711 пишет

Простой пример

Симпатично. Но снова вопрос, что нужно скопировать, к примеру из темы TwentyTen2, чтоб получить её кнопки, и "объемность" как в скриншоте?

Отредактировано Raf-9600 (04-08-2011 12:37:24)

hydrolizer · №8

Raf-9600 пишет

Эм... с учетом что я нуб, это возможно?

Не-нубом никто не рождался, и все когда-то ничего не знали, и не понимали. Берите документацию по CSS, DOM inspector - и если есть желание, то всё получится.

Raf-9600 · №9

hydrolizer пишет

Берите документацию по CSS, DOM inspector - и если есть желание, то всё получится.

Изучать целый язык только для того чтоб сделать пару изменений в интерфейсе Лисицы, эт слишком.

Tiger.711 · №10

Raf-9600
Запросов у Вас не пара, а на целую самостоятельную тему.

Raf-9600 · №11

Tiger.711
Главное что мне от из первого поста нужно, это прогресс-бар, и меню, серое, закругленное, с небольшой прозрачностью.
Ну а целую тему создал, потому что на форуме не существует отдельной темы по изменению интерфейса, есть только по Stylish и userChrome, а по чем мне знать, через что это можно реализовать?

Крошка Ру · №12

Raf-9600 Мне кажется Tiger.711 имел в виду тему оформления - шкурку для браузера :angel:

Tiger.711 · №13

Крошка Ру
Exactly!

Raf-9600 · №14

hydrolizer пишет

берете наиболее понравившуюся тему, заводите тестовый профиль, устанавливаете туда тему в распакованном виде (надо прописать <em:unpack>true</em:unpack> в install.rdf), и начинаете потихоньку подпиливать эту тему по своему вкусу.

Пришлось так и поступить. Реализовал прогресс-бар (Bloomind FT SilverGlow), галочки (Silvermel), и кнопки (TwentyTen2).
Собстно теперь главный вопрос: какой блокнотик из темы Bloomind FT SilverGlow нужно скопировать, чтоб получить столь офигительное меню?

Ну и пару второстепенных:
1. Ктонить знает как заставить двигаться этот троббер, Firefox 5 Loading Progress Throbber on Tab Icon в скине Australis? Добавил его код в Tabs.css, но успеха не принесло.
2. Ктонить может сделать так, чтоб при нажатии кнопки, она светилась синим, как на скрине? Вот код самой кнопки из TwentyTen2, и код кнопки с синим из Bloomind FT SilverGlow. Собстно как я не извращался с копипастом частей кода, ничего не проканало :(
3. Где\что\откуда нужно скопировать (хотяб примерно), чтоб получить выделение ссылок вот такого цвета?

Отредактировано Raf-9600 (05-08-2011 00:54:30)

hydrolizer · №15

Raf-9600 пишет

какой блокнотик из темы Bloomind FT SilverGlow нужно скопировать, чтоб получить столь офигительное меню?

chrome://global/skin/menu.css - не всё, разумеется, только то, что нужно

Raf-9600 пишет

Ктонить знает как заставить двигаться этот троббер

А он вообще двигается? Для анимации изображений в FF обычно используется APNG; с ним работает достаточно небольшое количество утилит. Самый простой способ проверить - открыть рисунок в FF (стандартно, через Файл -> Открыть).

Raf-9600 пишет

Ктонить может сделать так, чтоб при нажатии кнопки, она светилась синим

См. кусок кода в chrome://global/skin/button.css - там, где button:focus. Синий цвет добавляется инструкцией

Выделить код

Код:

background: #339edf url("chrome://global/skin/buttons/button_active_bg.png") repeat-x;

(в Bloomind FT SilverGlow)

Raf-9600 пишет

Где\что\откуда нужно скопировать (хотяб примерно), чтоб получить выделение ссылок

См. chrome://browser/skin/browser.css - это задается кодом

Выделить код

Код:

.ac-url-text,
.ac-action-text {
  color: -moz-nativehyperlinktext;
}

.ac-url-text:-moz-system-metric(windows-default-theme),
.ac-action-text:-moz-system-metric(windows-default-theme) {
  color: #00adee;
}

Raf-9600 · №16

hydrolizer пишет

chrome://global/skin/menu.css - не всё, разумеется, только то, что нужно

Даже скопировав все, получил лишь выделение фокуса серым, и более четкие разделители. На округлость или прозрачность, нет и намека

hydrolizer пишет

А он вообще двигается? Для анимации изображений в FF обычно используется APNG;

Да, это не APNG, но если использовать стандартную тему, то он почему-то двигается %)

hydrolizer пишет

См. кусок кода в chrome://global/skin/button.css - там, где button:focus. Синий цвет добавляется инструкцией

До этого я додумался, вот только даже если скопировать весь этот кусок кода, то это не заставляет использовать button_active_bg.png

Выделить код

Код:

/* .......... focused state .......... */

button:focus {
  background: #339edf url("chrome://global/skin/buttons/button_active_bg.png") repeat-x;
  color: #ffffff;
  text-shadow: 0px -1px #3091d1;
  border: 2px solid;
  -moz-border-top-colors: #3399dd #33bbee;
  -moz-border-right-colors: #3399dd #33bbee;
  -moz-border-bottom-colors: #3399dd #33bbee;
  -moz-border-left-colors: #3399dd #33bbee;
}

hydrolizer пишет

См. chrome://browser/skin/browser.css - это задается кодом

А вот за это сенки, сработало

Raf-9600 · №17

Raf-9600 пишет

Да, это не APNG, но если использовать стандартную тему, то он почему-то двигается %)

Ура! Нашел версию этого троббера в APNG http://hg.mozilla-hispano.org/tuentifox/issue/104/mostrar-feedback-al-usuario-al-actualizar
Кстати, хочу поделиться ещё одним мега красавцем Его нужно ложить в \chrome\browser\tabbrowser\connecting.png

mserv · №18

Raf-9600 пишет

Ура! Нашел версию этого троббера в APNG http://hg.mozilla-hispano.org/tuentifox/issue/104/mostrar-feedback-al-usuario-al-actualizar
Кстати, хочу поделиться ещё одним мега красавцем http://i18.fastpic.ru/big/2011/0805/34/2d12bf64d5af553aa97ee31183819634.png Его нужно ложить в \chrome\browser\tabbrowser\connecting.png

Полюбуйся своими "мега красавцами", когда одновременно грузятся хотя бы 20 вкладок. А потом сделай так:

скрытый текст

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-throbber  {
list-style-image: none !important;
}

Raf-9600 · №19

mserv пишет

Полюбуйся своими "мега красавцами", когда одновременно грузятся хотя бы 20 вкладок.

У меня такого никогда не бывает. К тому же, по-дефолту он стоит не на загрузку станицы, а на конект с ней, который весьма непродолжителен.

Raf-9600 пишет

5. Объемная нижняя панелька. С красивым "выделением" кнопок, когда на них наводишь курсор

Ктонить подскажет, какой файлик отвечает за эту панельку?

Отредактировано Raf-9600 (05-08-2011 16:49:33)

Tiger.711 · №20

Raf-9600 пишет

Ктонить подскажет, какой файлик отвечает за эту панельку?

Никакой. Прописывается ксс-кой.

Raf-9600 · №21

Tiger.711 пишет

Прописывается ксс-кой.

Подозреваю что эта "ксс-ка" должна где-то находиться

Tiger.711 · №22

Raf-9600
Или в стилишь, или в юзерхром (:
У меня в юзерхроме ксс-кой даже автоскрытие аддон-бара прописано. И градиент там тоже есть.

Raf-9600 · №23

Tiger.711 пишет

Или в стилишь, или в юзерхром

Не нашел ни того ни другого. В какой папке скина они находятся?

Tiger.711 пишет

У меня в юзерхроме ксс-кой даже автоскрытие аддон-бара прописано. И градиент там тоже есть.

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

Tiger.711 · №24

Raf-9600
А что мешает цвета поменять? (:

Raf-9600 · №25

Tiger.711 пишет

А что мешает цвета поменять? (:

Как можно догадаться - отсутствие знаний, какую именно строчку нужно редактировать.

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