Как исправить стили элементов на стороннем сайте?

Прямой ввод CSS

А у вас бывает такие ситуации, когда вот ни в какую не нравится какой-то элемент на сайте, но отказаться от него просто не можете? У меня вот есть один яркий пример, когда уже совсем прикипело – решил углубиться в проблему и придумать её решение. Поэтому и появилась данная статья.

Есть один сайтец, где я иногда присматриваю тексты для некоторых сайтов, ну не суть. Так вот, там поле выбора категорий ОЧЕНЬ маленькое по высоте. Было бы оно побольше на, скажем, ещё столько же, было бы намного удобнее им пользоваться. Да мало ли ещё каких ситуаций? Размеры не устраивают, цвет… Был бы свой сайт – поправили бы CSS-файл стилей и стало бы норм. А как быть, если сайт чужой?

Как быть, если сайт чужой?

Оказывается, есть ряд расширений для браузера, которые позволяют на лету править стиль по какому-либо селектору. Причём эти изменения сохраняются во внутреннее хранилище расширения и не требуется постоянно это делать, достаточно внести правки один раз.

Расширение называется Stylebot. Установить легко, достаточно выполнить поиск по словам “Chrome Stylebot” и попадём в репозиторий расширений, где можно выбрать интересующий нас плагин.

Установка Stylebot в Chrome
Установка Stylebot в Chrome

Начинаем подменять стили

Для того, чтобы начать менять окружающие сайты, нужно просто кликнуть на соответствующую иконку на панели плагинов, либо кликнуть правой кнопкой мыши на соответствующем элементе страницы:

Кликаем на соответствующем элементе веб-страницы
Кликаем на соответствующем элементе веб-страницы

Кстати, ведь правда, высота SELECT-элемента всего 4 строки, а там не один десяток вариантов, с мультиселектом. Конечно, это очень мало, на мой взгляд, поэтому мы его расширим. Кликаем правой кнопкой мыши по этому полю и выберем пункт “Stylebot – Style Element”.

В верхнем поле можно подредактировать селектор, чтобы захватывать то, что нужно, а в нижнем, мне больше нравится прямой ввод CSS, который доступен по нажатию клавиши Advanced.

Простые настройки CSS
Простые настройки CSS

Прямая правка CSS сразу же отображается на странице. И можно смело закрыть это окно. Теперь на всех страницах этого домена будет применяться наше правило.

Прямой ввод CSS
Прямой ввод CSS

Такой размер поля выбора вариантов мне уже больше нравится.

Ну и чтобы было понятно, прикладываю видео процесса:

А можно ли использовать регулярные выражения?

В URL-страницах – да, можно. Есть целый ряд паттернов, взял со страницы. Возможно не всегда можно будет сослаться на конкретный ряд GET-параметров, передаваемых в страницу, но что уж поделать. Более гибкая настройка URL есть у других плагинов, но заставить их работать у меня так и не получилось.

А вы сталкивались с подобной проблемой? Как решали?

 

 

Like this post? Please share to your friends:
Litl-Admin.ru

Comments:

Leave a Reply