Выше я привёл букмарклет, который позволяет «раскрашивать» форум, основываясь на уже имеющемся стиле. Сам стиль хранится в
http://fforum.koch.ru/forumcss.cssЛюди, которые попробовали уже использовать «раскрашиватель», наверняка встретились с двумя досадными мелочами:
1. необходимо всё время нажимать кнопочку букмарклета;
2. пересчёт занимает время, в течении которого
Firefox «подвисает».
Естественно, чем не пожертвуешь ради такой развлекухи. Но я вот чего-то подумал-подумал, и решил кое-что усовершенствовать.
Предположим, Вам понравился какой-то стиль. Или Вы хотите что-то подрихтовать в получающейся цветовой гамме. Естественным тогда будет не «перевычисление» цветов каждый раз, а применение уже готового стиля. То есть, мы должны «подставить» вместо оригинального файла – свой.
Как всегда, существует несколько способов решения. Я сейчас приведу тот, который:
1. не наносит вреда безопасности
Firefox;
2. не требует установки дополнительных расширений;
3. позволяет встраивать его в
Firefox с минимальными затратами времени;
4. не использует ничего «недокументированного».
Речь пойдёт об использовании файла
userContent.css, который специально [ха-ха] предназначен для решения подобных задач. Всё «новьё» и «know-how», которое я предложу – небольшая автоматизация процесса.
*Минимум теории*Каждый элемент HTML-документа может иметь определённые свойства, в том числе и цвет. Элементы – это абзацы, ссылки, заголовки, разметка и тому подобное. Описывать в HTLM-файле свойства
каждого элемента – смерти подобно. Поэтому делают по-другому: описывают некие общие правила, например «весь текст – зелёный; все ссылки - красные». Такие вот правила и хранятся в том CSS-файле, который мы хотим «подменить». На самом деле всё гораздо сложнее, просто я утрирую для простоты.
Принцип действия
userContent.css (тоже очень коротенько) следующий: когда браузер открывает любой документ, он применяет кучу правил (CSS по ссылкам из заголовка HTML, CSS из секции <styles>, CSS из тегов, есть ещё всякие-разные «классы» :] и тому подобное). Если браузер видит, что пользователь создал
userContent.css, то применяются правила и из него, до кучи :]
Здесь есть маленький ньюанс. Поскольку
наши правила из
userContent.css применяется «поверх» такого многообразия, мы должны явным образом указать некоторое «преимущество» наших описаний перед оригинальными. Для этого мы будем использовать «! important» (т.е. «важно!») после переопределения нужных нам свойств HTML-элементов. А особо важными для нас является «цветовые» свойства.
Браузер
Firefox поддерживает работу с правилами стилей через язык программирования
javascript. То есть, написав мини-программку (букмарклет) мы можем «опросить» текущий открытый документ относительно всех правил, применённых к его содержимому. Что мы делаем дальше? Выписываем результаты этого «опроса» в отдельный файл (наш
userContent.css), добавляем где нужно указания «! important», а потом... Потом мы можем сколько угодно забавлятся с цветами, редактируя их вручную.
*Практика*A. Итак, для начала
создадим файл
userContent.css, потому что по умолчанию его не существует. Открываем блокнотом пример
userContent-example.css (этот файл расположен в Вашем профиле, где-то по адресу
C:\Documents and Settings\пользователь\Application Data\Mozilla\Firefox\Profiles\буковкицифирки.default\chrome), стираем всё его содержимое (
Ctrl+A, Del) и сохраняем в ту же папку под именем
userContent.css (не спешите закрывать
notepad, пусть висит).
B. Если Вы сейчас читаете данный пост не из-под
Firefox, то запустите её и откройте данный пост :]. Выделите мышкой весь текст из абзаца ниже, затем перетащите выделение на панель закладок (обычный приём создания букмарклета, подробно пишу только для не знающих этого).
Букмарклет выше предназначен для вывода в отдельное окно всех правил таблицы стилей, которые влияют на цветовую гамму. Дополнительно, он вставляет несколько нужных мелочей вроде упомянутого «! important» и определения «области действия» переопределённого стиля (Вы же не хотите, чтобы весь Internet стал Fallout’ом? :]).
C. Теперь запустите букмарклет (кликните по получившейся на панели закладке); откроется окошко, в которое будут выведен текст правил. Этот текст - уже готовый документ, он содержит готовую таблицу стилей. Весь текст (Ctrl+A, Ctrl+C) нужно скопировать в
userContent.css, открытый сейчас в
notepad, т.е.
(Ctrl+P) и сохранить
(Ctrl+S).
D. Всё. Теперь перезапускаем
Firefox и заново открываем форум – его отображение теперь определяется нашими правилами, а не тем, что сделал
Voron.
Минуточку!
Но ведь ничего не изменилось?!?
Конечно! Мы же не поменяли цвета :]
Это Вы должны сделать вручную.
Все цвета записаны в формате rgb(r,g,
. Буковка r – это составляющая красного цвета (red), g – зелёного (green), b – синего (blue). Составляющие изменяются в диапазоне 0-255, создавая всевозможные цвета. Комбинация «(0,0,0)» - чёрный цвет, «(255,255,255)» - белый, «(255,0,0)» - чисто красный, «(213, 189, 139)» - наш «золотой». Опять же, объясняю только для тех, кто не знал.
Может показаться, что цветов для изменения - очень много. Тогда, для начала, сохраните тот стиль, который получается после применения вышеописанного "разукрашивателя".
И помните: после каждого изменения
userContent.css Вы должны закрывать-отрывать браузер, иначе не увидите изменений.
Небольшое замечание
Существуют несколько способов изменения стилей прямо во время просмотра документа. Это могут быть специальные расширения, букмарклеты и тому подобное. Для нас главное другое – мы можем теперь получать стили документа и сохранять их в файл.
Если кто-то заинтересуется, я продолжу и опишу «процесс редактирования стилей на ходу». Пока же мне не ясно, сколько пользователей Mozilla Firefox вообще у нас тут, сколько захотят попробовать перекрасить форум, и сколько из них осилят данную технологию).
Что интересно
Интересно было бы создать «стиль», который бы красиво отображал наиболее используемые пользователями сайты, типа mail.ru или там google :]
Трудности
Наиболее неприятная – CSS не действует на классы :]Удачи :]
в Опере надо сделать следющее - View > Style > Manage modes > Тут указываешь адрес к скачаенной css и в Default Mode ставишь "User Mode" > Обратно в Style переключаешся на User Mode.
