0 Пользователей и 1 Гость просматривают эту тему.
  • 20 Ответов
  • 26546 Просмотров
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Очень часто в данной ветке форума задаются вопросы типа "Как поменять цвет ссылки?", "Как увеличить цвет шрифта?" и т.д., ответом на которые часто является "используйте 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?
П.С.С: Как обещал - написал, на мой взгляд полезную статью.


« Последнее редактирование: 24.09.2009, 22:40:41 от Antosha »
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

Maax

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Проблема в том, что я не могу скачать FireBug, у них на сайте только онлайн установка, а мне нужен дистрибутив FireBug'а, чтобы установить его на другом компутере, где нет интернета.
*

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Зайдите на страницу расширения:
https://addons.mozilla.org/en-US/firefox/addon/1843

Правый клик по кнопке «Add to Firefox» и из меню выбираете «Сохранить объект как…».
Потом на другом компе перетаскиваете сохраненный файл (xpi) в окно дополнений.
*

b2z

  • Глобальный модератор
  • 7284
  • 778 / 0
  • Разраблю понемногу
*

Maax

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Зайдите на страницу расширения:
https://addons.mozilla.org/en-US/firefox/addon/1843

Правый клик по кнопке «Add to Firefox» и из меню выбираете «Сохранить объект как…».
Потом на другом компе перетаскиваете сохраненный файл (xpi) в окно дополнений.
Большое спасибо! Всё получилось!
*

Maax

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Antosha, я всё сделал как Вы рекомендовали, но, заметил одну непонятную вещь:
Браузер в бэкграунд подставил какие-то левые значения параметров "transparent" и "scroll 0 0" (см. скрин, подчёркнуто красным). Откуда он их взял и почему туда вставил?

[вложение удалено Администратором]
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Дело в том, что есть еще стили CSS, которые у каждого браузера очень похожи (но бывают отличия), которые идут по умолчанию. То есть как бы дефолтные стили. В мозиле они находятся в HTML.css. Попробуйте отчистить этот файл.

Таким образом, если явно не указано, то мозила ставить по умолчанию:
1. transparent - тип наложения bg, правда я никогда не встречал что-то другое в отличии от transparent;
2. scroll  - это свойство привязки bg к элементу, в этом случаи bg движется вместе с прокруткой, а не стоит на месте. За привязку так же отвечает background-attachment:scroll;
3. 0 0 - это позиция БГ, то есть количество, чаще всего пикселей, от левого и верхнего угла контейнера, для которого применяется стиль background; За этот параметр отвечает стиль background-position: 0 0;
4. Так же есть background-repeat:repeat; отвечающий за repeat;

Таким образом имеем набор стилей:
background-image:url ('...');
background-color:#333; цвет БГ, применим когда нет картинки, либо она не полностью закрывает контейнер, либо картинки отключены
background-repeat:repeat;
background-attachment:scroll;
background-position: 0 0;

то что в болде свойства по умолчанию.

Ну а более короткая запись будет примерно такой:

background: url ('...') #333 repeat scroll 0 0;

По идеи, во всех браузерах scroll и 0 0 - значения по умолчанию, и если Вам надо именно так, то можно их не указывать, но из всех правил могут быть исключения.

Вот как-то так

П.С: не владею более точной информацией по transparent, но говорю, что другие значения применяются крайне редко. Если Вы найдете что-то по этому значению свойства и напишите здесь, было бы очень хорошо.
« Последнее редактирование: 07.01.2010, 23:29:19 от Antosha »
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

Maax

  • Осваиваюсь на форуме
  • 16
  • 0 / 0
Ага, понятно. Очень интересно, будем разбираться дальше и глубже ^-^. Большое спасибо за развёрнутый ответ!
*

SV

  • Захожу иногда
  • 99
  • 1 / 0
чет не поняла как установить?У меня есть сохраненый файл (xpi).как его установить?
*

SV

  • Захожу иногда
  • 99
  • 1 / 0
все получилось.
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Тёзка, добавь картинкав! :)
я тоже думал такой материал наклепать в бложике, но со скринами-так лучше воспринимается, имхо.
а вообще-молодез )

зы
про userContent.css не знал.
в принципе, может понадобиться чтобы какой-нить полезный, но недооформленный сайт казать нормально, но, с учётом глобальной трансляции его н стилей на все сайты- чревато :)
но-будем знать :)
*

danik.html

  • Живу я здесь
  • 2650
  • 353 / 4
effrit, поддерживаю!
сам хотел только што попросить немного пикчуров, но чета поленился ))
【Мегапак Virtuemart:
 • метатеги (description,keywords)
 • заголовки (title)
 • красивые алиасы (чпу) без тормозов и дублей!
*

andreyvw

  • Новичок
  • 4
  • 0 / 0
а я вообще не въеду как этим тараканом или ещё чем то сменить например название поля при регистрации нового пользователя: например с "ИМЯ" на "НИК"
подскажите господа......я только пытаюсь научиться))))))))
*

Antosha

  • Захожу иногда
  • 420
  • 52 / 0
  • Плохо спорить плохо
Это вообще разные вещи.. .FireBug дает возможность только просмотреть исходный код, а менять надое его самостоятельно в файла движка..
<a href="http://joomlablog.ru/">JoomlaBlog</a>
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
andreyvw, вот пример использования FireBug + total commander для поиска и последующего исправления кода.
(сверху пропускай абзац)
http://democatalog.ru/katalog/stati/item/19-neochevidnye-metody-nastrojki-shablonov-flexicontent
в твоём случае имеет смысл прошерстить языковые файлы (в папке language)
*

andreyvw

  • Новичок
  • 4
  • 0 / 0
спасибо ))))
похоже нашёл то что надо

Спасибо,
полезная статья для первого знакомства с FireBug.

btw Не сразу было понятно в какой директории создавать userContent.css. Оказалось, что userChrome-example.css лежат в ветке C:\Program Files\Mozilla Firefox\defaults\profile\chrome и ветках C:\Documents and Settings\ACCOUNT_NAME\Application Data\Mozilla\Firefox\Profiles\tolgrit6.default\chrome - эти и нужны.
*

adikjke

  • Осваиваюсь на форуме
  • 15
  • 0 / 0
Здравствуйте,
у меня проблема с шаблоном, нужно поменять расположение Названия категорий.

чтобы подвинуть "Контакты" я так понимаю нужно изменить что то тут, но не знаю что=\

body {
  background-attachment:scroll;
  background-color:#435645;
  background-image:url(http://localhost/bazasobolek/templates/tema52_greenforest/images/page_t.jpg);
  background-position:0 0;
  background-repeat:repeat repeat;
  color:#FFFFFF;
  margin-bottom:0;
  margin-left:auto;
  margin-right:auto;
  margin-top:0;
  padding-bottom:0;
  padding-left:0;
  padding-right:0;
  padding-top:0;
}
template.css
body, p {
  font-family:'Century Gothic', Arial, Helvetica, sans-serif;
  font-size:14px;
  margin-bottom:0.5em;
  margin-left:0;
  margin-right:0;
  margin-top:0.5em;
}



а как подвинуть это вообще не знаю подскажите пожалуйста.

*

b2z

  • Глобальный модератор
  • 7284
  • 778 / 0
  • Разраблю понемногу
*

Андрей Нестеров

  • Захожу иногда
  • 207
  • 6 / 0
Здравствуйте! Не пойму, что случилось с FireBug...позволяет редактировать стили CSS лишь до первого обновления текущей страницы, т.е., только при первом запуске, дальше ни в какую...в чем может быть дело?
*

kar-bag

  • Новичок
  • 1
  • 0 / 0
Здравствуйте! Я мало разбираюсь в HTML кодах. У меня есть сайт .сам создал, сам продвигал . И вот неосторожно в коде что-то изменил и после этого шапка сайта съехала на меню. Если, кто сможет, подскажите пожалуйста, как можно исправить. Вот адрес сайта http://otdelkavctavropole.ru/
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Mozilla некорректное отображение сайта!

Автор Анна_pupu

Ответов: 2
Просмотров: 2121
Последний ответ 22.03.2016, 13:41:40
от Анна_pupu
/Решено/ FireBug выдаёт адрес несуществующего документа CSS

Автор novice1

Ответов: 3
Просмотров: 1201
Последний ответ 18.12.2014, 23:09:10
от novice1
Mozilla и IE меняют шрифт на Times New Roman

Автор Sinn

Ответов: 5
Просмотров: 1843
Последний ответ 18.10.2014, 16:51:03
от Shustry
Как найти путь к файлу через FireBug?

Автор artyxa

Ответов: 34
Просмотров: 13659
Последний ответ 05.02.2014, 13:10:24
от Germanius
Корректная работа меню Iphone 4

Автор germiha

Ответов: 0
Просмотров: 1104
Последний ответ 29.01.2014, 18:51:04
от germiha