Форум русской поддержки Joomla!® CMS
09.12.2016, 11:48:20 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Работа с FireBug+Mozilla на примере userContent.css

 (Прочитано 22904 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Antosha
Завсегдатай
*****

Репутация: +52/-0
Offline Offline

Сообщений: 411


Плохо спорить плохо


« : 24.09.2009, 22:37:21 »

Очень часто в данной ветке форума задаются вопросы типа "Как поменять цвет ссылки?", "Как увеличить цвет шрифта?" и т.д., ответом на которые часто является "используйте 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 » Записан
Maax
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 16


« Ответ #1 : 30.09.2009, 16:52:39 »

Проблема в том, что я не могу скачать FireBug, у них на сайте только онлайн установка, а мне нужен дистрибутив FireBug'а, чтобы установить его на другом компутере, где нет интернета.
Записан
gdX
Support Team
*****

Репутация: +128/-0
Offline Offline

Пол: Мужской
Сообщений: 1147


Открыт к заказам по дизайну


« Ответ #2 : 30.09.2009, 18:45:41 »

Зайдите на страницу расширения:
https://addons.mozilla.org/en-US/firefox/addon/1843

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

Репутация: +710/-0
Offline Offline

Пол: Мужской
Сообщений: 7538


Разраблю понемногу


« Ответ #3 : 30.09.2009, 18:57:10 »

Статью заметил только сейчас и ставлю плюс. За полезность.
Записан
Maax
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 16


« Ответ #4 : 07.10.2009, 21:02:59 »

Зайдите на страницу расширения:
https://addons.mozilla.org/en-US/firefox/addon/1843

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

Репутация: +0/-0
Offline Offline

Сообщений: 16


« Ответ #5 : 07.01.2010, 23:16:32 »

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

[вложение удалено Администратором]
Записан
Antosha
Завсегдатай
*****

Репутация: +52/-0
Offline Offline

Сообщений: 411


Плохо спорить плохо


« Ответ #6 : 08.01.2010, 00:26:13 »

Дело в том, что есть еще стили 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, но говорю, что другие значения применяются крайне редко. Если Вы найдете что-то по этому значению свойства и напишите здесь, было бы очень хорошо.
« Последнее редактирование: 08.01.2010, 00:29:19 от Antosha » Записан
Maax
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Сообщений: 16


« Ответ #7 : 08.01.2010, 22:26:16 »

Ага, понятно. Очень интересно, будем разбираться дальше и глубже Smiley. Большое спасибо за развёрнутый ответ!
Записан
SV
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 99


« Ответ #8 : 20.09.2010, 07:12:20 »

чет не поняла как установить?У меня есть сохраненый файл (xpi).как его установить?
Записан
SV
Осваиваюсь на форуме
***

Репутация: +1/-0
Offline Offline

Сообщений: 99


« Ответ #9 : 20.09.2010, 07:42:11 »

все получилось.
Записан
effrit
Группа развития
*****

Репутация: +732/-7
Online Online

Пол: Мужской
Сообщений: 6816


effrit.com


« Ответ #10 : 20.09.2010, 08:15:23 »

Тёзка, добавь картинкав! Azn
я тоже думал такой материал наклепать в бложике, но со скринами-так лучше воспринимается, имхо.
а вообще-молодез )

зы
про userContent.css не знал.
в принципе, может понадобиться чтобы какой-нить полезный, но недооформленный сайт казать нормально, но, с учётом глобальной трансляции его н стилей на все сайты- чревато Azn
но-будем знать Azn
« Последнее редактирование: 20.09.2010, 08:25:04 от effrit » Записан
danik.html
Практически профи
*******

Репутация: +351/-4
Offline Offline

Пол: Мужской
Сообщений: 2723



« Ответ #11 : 20.09.2010, 08:19:05 »

effrit, поддерживаю!
сам хотел только што попросить немного пикчуров, но чета поленился ))
Записан
andreyvw
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #12 : 11.10.2010, 04:20:33 »

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

Репутация: +52/-0
Offline Offline

Сообщений: 411


Плохо спорить плохо


« Ответ #13 : 11.10.2010, 06:13:09 »

Это вообще разные вещи.. .FireBug дает возможность только просмотреть исходный код, а менять надое его самостоятельно в файла движка..
Записан
effrit
Группа развития
*****

Репутация: +732/-7
Online Online

Пол: Мужской
Сообщений: 6816


effrit.com


« Ответ #14 : 11.10.2010, 07:28:31 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 4


« Ответ #15 : 11.10.2010, 15:29:29 »

спасибо ))))
похоже нашёл то что надо
Записан
Mike
Гость
« Ответ #16 : 20.12.2010, 15:51:56 »

Спасибо,
полезная статья для первого знакомства с 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
Захожу иногда
**

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 15


« Ответ #17 : 19.06.2011, 19:01:38 »

Здравствуйте,
у меня проблема с шаблоном, нужно поменять расположение Названия категорий.
http://i066.radikal.ru/1106/77/658d3fb5138f.jpg
чтобы подвинуть "Контакты" я так понимаю нужно изменить что то тут, но не знаю что=\

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


http://s42.radikal.ru/i097/1106/66/98329c28f9eft.jpg
а как подвинуть это вообще не знаю подскажите пожалуйста.

Записан
b2z
Support Team
*****

Репутация: +710/-0
Offline Offline

Пол: Мужской
Сообщений: 7538


Разраблю понемногу


« Ответ #18 : 20.06.2011, 10:19:19 »

adikjke - задвайте вопрос здесь, а то он не относится к этой теме.
Записан
Андрей Нестеров
Осваиваюсь на форуме
***

Репутация: +5/-0
Offline Offline

Пол: Мужской
Сообщений: 120



« Ответ #19 : 20.07.2013, 15:56:10 »

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

Репутация: +0/-0
Offline Offline

Сообщений: 1


« Ответ #20 : 13.03.2016, 01:50:46 »

Здравствуйте! Я мало разбираюсь в HTML кодах. У меня есть сайт .сам создал, сам продвигал . И вот неосторожно в коде что-то изменил и после этого шапка сайта съехала на меню. Если, кто сможет, подскажите пожалуйста, как можно исправить. Вот адрес сайта http://otdelkavctavropole.ru/
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet