Очень часто в данной ветке форума задаются вопросы типа "Как поменять цвет ссылки?", "Как увеличить цвет шрифта?" и т.д., ответом на которые часто является "используйте FireBug и Моzilla".
В данной статье, я постараюсь рассказать всем тем, кто не знает, что такое FireBug и как с им пользоваться.
Для начала качаем Мозилу, устанавливаем ее, а затем качаем FireBug и устанавливаем его.
Теперь в нижним правом углу браузера появилась иконка FireBug в виде оранжевого жучка. Нажмите на нее и раскроется панель FireBuga, о ней позже, а пока давайте введем некоторый термин
Термин "кликнуть Firebug'ом на %что-то%" содержит следующие действия:
1. Кликнуть на жука в нижнем правом углу браузера
2. Кликнуть на пиктограмме с иконкой синего прямоугольника со стерлочкой
3. Кликнуть на %что-то% в браузере. Заметьте, что когда Вы будете водить курсов в браузере, FireBug будет обводить синий рамкой тот элемент, который будет выбран по клику.
После того, как Вы кликнули FireBug'oм по какому либо объекту на странице, панель FireBuga заполнится полезной информацией:
Слева в панели показан код страницы и выделен тот контейнер, на который Вы кликнули. На картинке это <h1 class="siteTitle">. В Вашем случаи класса может не быть.
Справа показан тот стиль и/или те стили, которые применяются к данному контейнеру/тегу, описанные в файле стилей CSS. На картинке к h1 применен класс .siteTitle, который содержит всего одно свойство fonz-size: 1.5em. Обратите внимание, что к <h1 class="siteTitle"> также применяются свойства описанные для всех h1, смотрите ниже на картинке. Для всех h1 прописаны 2 свойства: font-size:1.3em; leter-spacing:-1px; Свойство font-size:1.3em; зачеркнуто, так как оно переопределяется свойством класса .siteTitle.
В самом низу на картинке в области справа видно еще одно правило для #content, содержащие следующее свойство: text-align:left; То есть <h1 class="siteTitle"> так же наследует все правила и свойства описанные для родительских контейнеров.
Таким образом <h1 class="siteTitle"> обрабатывается по крайней мере по 3 свойствами:
fonz-size: 1.5em; - от класса siteTitle
leter-spacing:-1px; - от описания всех тегов <h1>
text-align:left; унаследованное от родительского дива с id="content"
На панели справа перед каждым правилом показан файл и строка в нем, в котором описано данное правило. На картинке это sheet.css.
Также обратите внимание, что кликнув на значение какого-либо свойства Вы можете его динамически поменять и страница будет динамически меняться в соответствии со значением этого свойства, таким образом Вы сможете подобрать нужное значение для данного свойства. Только не подумайте, что меняя значение в FireBugе Вы меняете его в самом файле с правилами CSS. Нет... Вы меняете значения только для браузера и только для себя. Обновите страницу и все встанет на свои места.
И так, что же надо сделать, чтобы поменять например цвет ссылки, увеличить шрифт и т.д:
1. Установить Moziila + FireBug.
2. Кликнуть FireBug'ом по интересующему объекту.
3. Найти стили, которым подчиняется данный объект.
4. Подобрать нужные значения для свойств, динамически меняя их FireBug'ом.
5. Открыть файл который содержит соответствующие стили и скорректировать их, добавить новые или удалить старые.
Вот как-то так. Вроде все просто.
Давайте немного потренируемся??
Сначала мы сделаем из сайта
www.yandex.ru, некоторое подобие сайта
www.ya.ru, убрав все лишнее. Далее продолжим извращения.
Перейдите на сайт
www.yandex.ru, и кликните FireBug'ом по любому объекту на страницы и Вы увидите, что большинство правил описаны прямо в странице в контейнере head. Конечно у нас нет возможности изменять их напрямую и как-то менять сайт, но мы может сделать его таким как мы хотим только для себя.
Для этих целей можно воспользоваться файлом стилей
userContent.css. Что это за файл? Этот файл стилей принадлежит самому браузеру и правила описанные в нем, используя !important, могут переопределить любые правила описанные на любом сайте. Другими словами, чтобы изменить сайт
www.yandex.ru, необходимо переопределить нужные правила в своем userContent.css и
перезагрузить браузер. Перезагружать браузер необходимо только для userContent.css, так как правила из этого файла прочитываются лишь раз, при загрузке браузера. Для других CSS файлов после внесения изменений необходимо лишь обновить страницу, нажав F5.
Итак у меня файл
userContent.css находится по таком пути:
C:\Users\winRoot\Application Data\Mozilla\Firefox\Profiles\390ukap2.default\chrome
В Вашем случаи этот путь будет аналогичен, в крайнем случаи воспользуйтесь поиском ОС и ищите файл userChrome-example.css, он лежит в той же папке, где должен лежать файл userContent.css, просо изначально файла userContent.css не существует.
Приступим к модификации. На сайте Яндекса кликните FireBug'ом по самой нижней части сайта, так называемому футеру, то есть по блоку с текстом "Дизайн — Студия Артемия Лебедева..." и т.д. Вы увидите, что вся это информация, выводимая в нижней части сайта, находится в <div id="foot">. Отлично. Идем в файл в userContent.css записываем в него:
#foot {display:none !important;}
Сохраняем файл. Перезагружаем браузер, идем на Яндекс и ура! Больше на сайте Яндекса нет футера. Но это только для Вас конечно.
Продолжим модификацию. Покликайте FireBug'ом по остальным крупным блокам на Яндексе и найдите их стили. Я уже это сделал за Вас, поэтому дополните userContent.css следующими правилами:
table#body {display:none !important;}
tr.news {display:none !important;}
table#head {display:none !important;}
Сохраните файл и перезапустите браузер.
Яндекс должен выглядеть так:
Теперь надо подвинуть строку поиска ближе к центру страницы. Покликав FireBug'ом по отсвьшемся объектам, Вы увидите, что осталась лишь таблица <table id="neck">, отлично, добавляем в userContent.css правило:
table#neck {margin-top:200px !important;}
Сохраняем перезагружаем.
Получилось?
Продолжим извращения.
Зальем фон какой-нибудь картинкой. Перейдем на сайт Митрича:
http://www.mitrichlab.ru/ Увидим у него такой голубенький фон под всем сайтом. Что мы сейчас сделаем? Мы "заберем" у Митрича это изображение и зальем наш фон на Яндексе, верней, мы просто пропишем путь к картинке на сервер сайта, даже копировать к себе не будем. Это мы делаем для примера, Вы так никогда не делайте. =)))).
Кликните FireBug'ом на любом объекте сайта и в левой части панели FireBug'а пройдите выше до тега body и кликните на него. Вы увидите, что тег body подчиняется правилу body#bd {}, в котором есть свойство background:#E9E9E9 url(../../images/grunge/back3.jpg) repeat;. Нам нужна картинка back3.jpg. Итак вычисляем путь.
Само правило описано в файле grunge.css, который находится по адресу:
http://www.mitrichlab.ru/templates/ja_mica/css/colors/grunge.css (наведите на название файла CSS и вы увидите полный путь до файла), а в правиле background:#E9E9E9 url(../../images/grunge/back3.jpg) repeat; стоят 2 конструкции "../", то есть нам необходимо вернуться на 2 уровня вверх, из папки в которым лежит grunge.css, пройти в папку images, далее в grunge и там будет нужный нам файл back3.jpg.
Итак, адрес для картинки будет такой:
http://www.mitrichlab.ru/templates/ja_mica/images/grunge/back3.jpgДля проверки введите адрес в брузер и Вы увидите картинку.
Теперь добавляем в userContent.css
body {background: url(http://www.mitrichlab.ru/templates/ja_mica/images/grunge/back3.jpg) repeat !important;}
Сохраняем и перезапускаем.
Проблема последнего правила в том, что голубой фон будет абсолютно у всех сайтов. То есть правилам описанные userContent.css подчиняются абсолютно все сайт, не только Яндекс, поэтому, если id совпадут, то и на других сайтах Вы ничего не увидите в этих блоках. Если Вы и вправду хотите использовать userContent.css по назначению, а не в качестве данного примера, то по хорошему, каждое правило в userContent.css необходимо уточнять до нельзя, чтобы исключить возможность совпадения.
Во общем в итоге должно получиться так:
Итак, используя FireBug Вы сможете всегда найти нужные стили, и подправив их добиться нужного Вам результата, а использовав userContent.css можно "убрать" с часто посещаемых сайтов раздражающие элементы, типа рекламы.
Надеюсь было интересно.
П.С: Вопрос, а кто знал про userContent.css?
П.С.С: Как обещал - написал, на мой взгляд полезную статью.