Робота зі стилями

Робота зі стилями за допомогою Firebug. Як користуватися і де скачати Firebug для Firefox, Chrome і Opera

Розширення Firebug, як будь-яке розширення служить для збільшення можливостей браузера. У даній статті я розповім: де скачати Firebug для популярних браузерів Mozilla Firefox, Google Chrome і Opera, як його встановити, а також постараюся докладно описати, як користуватися Firebug.

Спочатку, плагін або розширення Firebug було створено групою розробником для Mozilla Firefox, тому в даному браузері розширення має найпотужніший функціонал.

Для інших популярних інтернет браузерів, таких як: Google Chrome, Opera і Internet Explorer, була розроблена спрощена версія - Firebug Lite, яка істотно поступається оригіналу, але тим не менш є цілком працездатною.

З використанням доповнення, відпадає необхідність копатися в файлах шаблону, намагаючись визначити який class або id заданий для певної ділянки сторінки.

Загалом, робота з зовнішнім виглядом сайту стає набагато легше, швидше і приємніше. Поїхали!

Де скачати і як встановити розширення Firebug

Щоб завантажити розширення Firebug для Mozilla Firefox, необхідно відкрити даний браузер і перейти за цим посиланням. Потрапляємо ми на сторінку, де треба натиснути на кнопку - «Додати в Firefox»:

Потім відкриється таке віконце:

Натискаємо на кнопку - «Встановити зараз» і почнеться недовгий процес установки. Якщо після перезавантаження браузера у верхньому правому кутку з'явиться значок із зображенням жука, то значить Firebug успішно встановився.

Установка на Chrome і Opera дуже схожа і я думаю Ви розберетеся. Ось ссилочку на сторінки для скачування

Завантажити Firebug для Chrome

Завантажити Firebug для Opera

Вище я вже писав, що в браузерах Google Chrome і Opera, розширення представлено в скороченому вигляді і щоб більш повно описати функціонал Firebug, я запущу його в браузері Mozilla Firefox.

Робота зі стилями. Як користуватися Firebug

Почнемо з самого простого прикладу. Припустимо, нам треба поправити форму підписки від feedburner. У новачків дуже часто з цим бувають великі складності.

Нещодавно мені прийшов лист від одного мого постійного Новомосковсктеля, в якому він попросив мене допомогти впорається з «неслухняною» формою підписки. Ну ось у мене тепер є прекрасна можливість продемонструвати роботу Firebug і заодно допомогти людині.

Просто людина захотіла розмістити форму підписки безпосередньо в статті і вона розтяглася у нього на ширину всієї сторінки. Тепер я спробую виправити ситуацію засобами «чарівного» доповнення Firebug.

У браузері я натискаю на значок жука і внизу сторінки відкриється «робоча зона» розширення:

Далі, на панелі управління вибираю іконку із зображенням стрілочки (на скріншоті я її обвів червоним). C допомогою цієї функції можна виділити будь-який об'єкт на сторінці і його код відобразиться у вкладці - «HTML».

Після натискання на іконку, що відповідає за виділення, пересуваю курсор на край форми підписки і межі зони окреслюється рамкою:

Ну ось і код форми підписки, з яким мені доведеться попрацювати. Щоб закріпити виділену область, треба клацнути, по рамці, лівою клавішею миші і тоді код форми повинен подсветится синім фоном:

Тепер я буду правити форму підписки, так би мовити, в реальному часі.

Отже, в будь-якому шаблоні є файл style.css і як правило всі стилі прописуються саме в цьому файлі, але бувають і виключення. У формі передплати від feedburner стилі закладені в сам код і мені треба знайти слово style (з англ - стиль), після якого прописані селектори і їх значення, що відповідають за різні параметри:

Давайте розберемо, що за селектори задані для даної форми.

Селектор border (з англ. - межа) виводить рамку навколо форми, товщиною в 2px (два пікселя).

Значення solid (можна перевести, як суцільна лінія) задає вид рамки, тобто якщо задати інше значення, наприклад: dashed (пунктирна лінія), то рамка стане пунктирною.

І останнє значення # 00B344 - це колір рамки.

Селектор padding (з англ. - набивка) відповідає за внутрішні відступи, тобто в даному випадки селектор задає відстані в пікселях від самої форми до рамки.

Селектор text-align (з англ. - вирівнювання тексту) вирівнює текст, щодо сторінки. Значення center (з англ. - центр) дає команду браузеру вирівнювати дані елемент по центру сторінки.

Отже, із заданими стилями ми розібралися, тепер я буду приводити форму підписки в належний вигляд.

Для цього я застосую ще один селектор margin (з англ. - край), який відповідає за зовнішні відступи, тобто відстані від рамки до країв розташованих поруч елементів.

Видно, що форма розтягнута і за допомогою зовнішніх відступів можна зробити її трохи компактнішою.

Роблю подвійний клік лівою клавішею миші по потрібній ділянці коду і тепер, прямо в робочій зоні розширення Firebug, можна вносити зміни до вже існуючих параметри або ставити нові:

У самий кінець коду форми підписки я додаю селектор margin і задам для нього наступні значення:

Трохи поясню, що за цифри я тут написав. Цифри - це відстані зовнішніх відступів в пікселях, починаючи з верхнього і далі за годинниковою стрілкою. Тобто для верхнього і нижнього відступів - значення нуль, а для лівого і правого, задано відстань в 180 пікселів.

Якщо є однакові значення, то їх можна «склеїти», тим самим трохи скоротивши код:

Ось що в результаті маємо отримати:

І ось воно чудо! Форма підписки моментально прийняла інший вид.

Всі зміни зовнішнього вигляду сайту, зроблені за допомогою розширення Firebug, для користувачів будуть непомітні, і після оновлення сторінки зникнуть.

Якщо навести курсор на синій фон коду, то на сторінці підсвітяться: зовнішні відступи - жовтим кольором, внутрішні - фіолетовим.

Але тепер, для наочності, я піду іншим шляхом і скористаюся вкладкою «Редагувати», де задам наступні відступи для кнопки:

У мене вийшли однакові значення для правого і лівого відступу і треба «склеїти» нулі:

Дивимося на результат:

Як я вже писав вище, після перезавантаження сторінки все зміни зникнуть і щоб вони по-справжньому вступили в силу, доведеться правити файл шаблону.

Firebug не тільки з легкістю знаходити коди, що відповідають за ту чи іншу ділянку веб-сторінки, але і надає можливість попереднього перегляду майбутніх змін.

Але що ж робити, якщо стилі прописані в окремому файлі? Давайте розберемо і цю ситуацію.

Тепер для прикладу я вибрав блок з хлібними крихтами зі свого блогу. Виділяю його, і в правому вікні робочої зони відобразяться стилі, які прописані у файлі style.css:

Отже, що ми бачимо. Мені відкрилися всі стилі, прописані у файлі style.css, для ідентифікатора breadcrumbs.

Припустимо, я хочу змінити колір тексту, і розмір шрифту. Для цього мені знадобитися внести зміни в значення для селекторів: color (з англ. - колір) і font-size (з англ. - розмір шрифту).

Роблю подвійний клік по значенню селектора і з'являється поле для редагування:

Хочу, щоб текст, який не є посиланням став червоним, а розмір шрифту трохи побільше. вуаля:

Тепер мені не подобатися тіні шрифту, треба їх прибрати. За тіні відповідає селектор text-shadow (з англ. - тінь тексту). Наводжу курсор на селектор і зліва від нього з'являється червоний значок:

Якщо клікнути на цей значок, то селектор зникне і скасовуватися все його значення. дивимося:

Тіні, наче й не було! Слідуючи своїм раптовим капризам, я вирішив зробити текст трохи жирніше. Ага, а такого селектора тут немає. Ну що ж, доведеться додати.

За «жирність» тексту в CSS відповідає селектор font-weight (з англ. - накреслення шрифту).

Роблю подвійний по символу ";" (можна клікати по будь-рядку), який знаходиться в кінці кожного рядка або по символу «>» і з'явиться поле для введення нового селектора і його значень:

Спочатку, в полі, що з'явилося, я прописую сам селектор, потім натискаю клавішу Tab і вписую значення bold (з англ. - виразний):

Напевно Ви помітили, що Firebug показує порядковий номер рядка, починаючи з якої в файлі style.css прописані стилі для виділеного ідентифікатора або класу:

І якщо клікнути по номеру, то в правому вікні робочої зони, відкриється файл style.css і стилі для ідентифікатора, з якими я працював, підсвітяться блакитним фоном.

Також для редагування стилів можна користуватися вкладкою CSS, де буде відображатися файл style.css цілком:

Якщо виділити об'єкт і скористатися вкладкою «Маркет», розташованої в правому вікні робочої зони, то ми побачимо наступну картину:

Як Ви вже здогадалися, в цій вкладці наочно демонструється розміри самого виділеного елемента (690х41 пікселів), а також: внутрішні відступи (padding). рамка (border) і зовнішні відступи (margin).

P.S. Як бачите, якщо трохи знати англійську мову, то зміна стилів виявиться не таким вже й складним заняттям.

З повагою, Віталій Кирилов

Олена, файл style.css відповідає за стилі, а не виводить слова на сторінку. Я так вважаю, що потрібна Вам рядок коду знаходитися в файлі single.php прямо під заголовком h1, але в залежності від шаблону, код може також знаходиться в прикріпленому, до single.php, файлі.

Ось-ось, я про те й кажу, що в style цього бути не може.
Мій питання полягало в іншому. Як за допомогою розширення Firebug можна знайти в якому файлі прописана функція? Ви мені говорили, що це розширення дозволяє знаходити, я не можу зрозуміти як саме.

Олена, я не міг такого казати. Розширення Firebug працює з вихідним кодом сторінки, а шляхів до php файлів у вихідному коді немає.

Дякую за чудове доповнення. Але найголовніший вопрос..Вот я відредагував наприклад рамку картинки на сторінці сайту. А де мені знайти цей файл в шаблоні? Тут так все просто. поставив 2 розміру, і картинка стала більше. Але я ніяк не можу знайти цей файл в шаблоні, щоб відредагувати, може підкажете як це зробити? Дякуємо

Андрій, свій шаблон треба знати як 5 своїх пальців. Я не можу сказати Вам який файл відповідає за ту чи іншу функцію, не бачачи шаблон зсередини.

Віталій, у мене ніяк не виходить змінити колір рубрик, або дату на сторінці «всі статті». Роблю зміни в файлі, вони там зберігаються, а на сторінках колір залишається ісходний.Что може бути не так?