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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вам так же понравится:

Хранение данных для сайта Исправляете ли баги, в которые ткнули носом? Размышления по развитию на сайте интерактива Регистрация на сайте временно закрыта Поиск и вычистка постороннего кода на сайте Почему на сайте появляются коммерческие статьи?