1. Stylebot
2. Web Override
3. Styler
4. Stylish
5. Live CSS Editor

31 Марта, 2015 15:00

23916

Ні для кого не секрет, що сьогодні веб-сайти використовують каскадні таблиці стилів (CSS), що містять параметри всіх елементів сторінки. В CSS вказуються шрифти, розміри об'єктів, рамочок, картинок, блоки і таблиці. Ми вирішили зібрати для вас добірку доповнень Google Chrome, які дозволять відредагувати стиль будь-якої сторінки в інтернеті. Бонусом ми покажемо, як поміняти фон сторінки.

У кожної людини є свої переваги і інтереси, особливо, коли справа стосується веб-дизайну. Згадайте хоча б вічні холівари після кожного оновлення YouTube. Та й у вас, напевно, є кілька зауважень до відображення інформації на улюбленому сайті: десь шрифт негарний або невеликий, десь взагалі непотрібний блок повідомлень висить. А ось тут було б непогано додати фонову картинку!

Сьогоднішні браузери дозволяють редагувати сайти буквально в кілька кліків. Користувач може налаштувати все що завгодно, аж до розташування і порядку елементів на сторінці. Для цього були написані спеціальні розширення і доповнення, які ми розберемо, перш ніж приступити до зміни головної сторінки Google.

Stylebot

Мабуть, найпопулярніше розширення з відкритим вихідним кодом. Дозволяє на льоту редагувати шрифти, кольори, розміри і багато іншого. Має простий режим редагування: при відкритому вікні Stylebot ви можете вибрати потрібний елемент, просто навівши на нього курсор миші. Зміни зберігаються моментально, призначеними для користувача стилями можна ділитися з друзями.

Web Override

Додаток для підключення JavaScript'ов скриптів до зовнішніх веб-сайтів. Уже містить в собі jQuery, async.js, moment.js і Lodash, так що функції цих бібліотек можна вільно використовувати. Підходить для просунутих користувачів, які вміють користуватися Javascript, проте новачки можуть використовувати розширення для впровадження вже написаних кимось скриптів.

Styler

Принцип той же, що і у Stylebot: швидко редагуємо стиль сторінки, зміни зберігаються моментально. Інтерфейс і послідовність дій трохи інші, трохи менше можливостей. Так що вибір залишається за вами: що більше до душі доведеться.

Stylish

Найпотужніший інструмент для кастомізації веб-сайтів, за можливостями близький до Stylebot. Дозволяє приховувати непотрібні елементи, редагувати стилі, ділитися результатом з друзями. Веб-сайт доповнення містить більше 10 000 призначених для користувача стилів для зміни зовнішнього вигляду Facebook, YouTube, App Store і багатьох інших популярних ресурсів.

Live CSS Editor

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

Розповімо, як і обіцяли, як відредагувати фон будь-якої сторінки на прикладі Stylebot.

Важливо! Цей метод красиво виглядає на "легких" сторінках, не переобтяжених блоками і меню і представлений тільки для ознайомлення з можливостями доповнень. Радимо пробувати його на сайті Google.com.

• заходимо на необхідну сторінку
• натискаємо на іконку Stylebot в правому верхньому куті Chrome
• натискаємо Open Stylebot
• внизу вибираємо опцію Edit Css
• Вводимо наступний код:

body {
background: url (https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg);
background-size: 100% 100%;
! Important;
}

• закриваємо Stylebot

Готово! Замість картинки, наведеної в якості прикладу, можна використовувати будь-яку іншу (потрібно просто замінити посилання в коді вище). Для більш складної кастомізації сайтів доведеться почитати мануали по CSS, але повірте: в цьому немає нічого складного.

Читайте також: 5 красивих доповнень Google Chrome.

Помітили помилку? Виділіть її та натисніть Ctrl + Enter, щоб повідомити нам.

Також підібрали для вас