Как исправить небольшие неприятности в Интернете с помощью стильных [Firefox & Chrome]

У веб-дизайнеров почти невозможная работа. Им нужно придумать один дизайн, который понравился бы всем. Говоря о таком сервисе, как Gmail, которым пользуются бесчисленные миллионы людей во всем мире, вы действительно можете отказаться от «почти» — это просто невозможно. Даже если большинству людей нравится редизайн, всегда найдутся пользователи, которым действительно не понравится новый внешний вид.

Иногда таких пользователей достаточно, чтобы заставить компанию отказаться, как это недавно сделал Google с помощью кнопок со значком Gmail. Но что, если есть что-то, что вы действительно ненавидите, и компания не меняет это обратно? Вы застряли с этим навсегда? Благодаря пользовательским стилям вы можете решить такие проблемы самостоятельно.

Представляем Стильный

Stylish — это бесплатное дополнение, доступное как для Firefox, так и для Chrome, которое позволяет вам делать что-то довольно волшебное — применять свои собственные стили к элементам веб-страницы. Даже если вы не являетесь веб-разработчиком и никогда не писали немного CSS в своей жизни, это гораздо проще, чем кажется. Вы можете использовать Stylish для полного преобразования веб-сайтов (как я покажу вам в следующем разделе), но что еще более важно, вы можете использовать Stylish, чтобы исправить мелкие неприятности за считанные минуты.

Например, у меня была проблема с размером шрифта по умолчанию в Gmail. Интерфейс был в порядке — я не хотел увеличивать (Ctrl +) с моим браузером, потому что это увеличило бы размер всех элементов интерфейса и было бы действительно ужасно. Я просто хотел, чтобы шрифт сообщения был немного больше.

Со Стилом это было действительно просто, и я покажу вам, как. Но прежде чем мы рассмотрим создание собственных пользовательских стилей, давайте поговорим об использовании работы других людей.

UserStyles.org

Если что-то действует вам на нервы, вполне возможно, что вы не одиноки. UserStyles.org — это веб-сайт, который позволяет пользователям делиться созданными ими стилями. Выше вы можете увидеть стиль (Добавление меток к значкам панели инструментов), рекомендованный комментатором MakeUseOf RandyN в ответ на нашу историю о кнопках значков Gmail. Этот стиль позволяет вам сохранять значки, но добавлять текстовые метки — то, что Google не позволит вам сделать.

UserStyles.org великолепен, но не идеален. Некоторые дизайны пытаются сделать слишком много (полностью изменить внешний вид веб-сайта), а некоторые предназначены для старых версий веб-сайтов и теперь не работают. Если вы пытаетесь исправить что-то маленькое и не можете найти его на UserStyles.org, возможно, вам лучше всего сделать это самостоятельно.

Создание вашего собственного простого пользовательского стиля

Чтобы создать свой собственный стиль пользователя, сначала нужно знать, какой элемент страницы вы пытаетесь изменить, а затем какие изменения вы хотите внести. Итак, для начала щелкните правой кнопкой мыши все, что вы хотите изменить, и выберите Inspect Element. Вы должны увидеть что-то вроде этого:

Firefox затемняет остальную часть страницы и рисует очень четкую рамку вокруг выбранного элемента. Над этим элементом текст, который говорит div # 2d6.ii.gt.adP.adO, представляет собой набор классов CSS вместе с одним идентификатором (часть, начинающаяся с #). Это селектор, который влияет на стиль этого элемента. Внизу экрана есть панель навигации, которая позволяет вам «перемещаться по дереву DOM» или, проще говоря, перемещаться вверх и вниз по иерархии элементов, ведущей к выбранному вами элементу.

Название игры здесь — выбрать элемент, который вы хотите стилизовать, и сделать выбор не настолько узким, чтобы он затрагивал все, на что вы хотите повлиять, или настолько широким, что это могло бы испортить другие вещи.

Я щелкнул на один элемент выше, div.gs, просто потому, что мне нравится его имя (кажется, что-то, что не изменится слишком скоро, но это мое полное предположение). Это влияет на всю область сообщений. Выбрав область, которую вы хотите стилизовать, нажмите кнопку «Стиль» в правом нижнем углу, чтобы открыть панель «Правила»:

Я знаю, сначала это страшно. Но здесь вы видите различные правила CSS, которые влияют на выбранный элемент, и здесь вы можете вносить свои собственные временные изменения и видеть их влияние на страницу в режиме реального времени, не перезагружая его. Но что вы должны изменить? Нажмите кнопку «Свойства» и снимите флажок «Только пользовательские стили»:

Здесь вы можете увидеть полный список всех правил CSS. Вы можете прокручивать список вниз, пока не найдете правило, которое имеет смысл для того, что вам нужно (размер шрифта в нашем случае), и даже щелкнуть знак вопроса рядом с ним, чтобы открыть страницу объяснения. Итак, теперь мы знаем, что хотим настроить свойство font-size для всех элементов div, которые имеют класс «gs» (сокращенно записывается как div.gs).

Единственный вопрос, который остается, — это то, что мы хотим, чтобы его ценность была. Для этого мы вернемся к панели правил и начнем играть:

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

Сохранение вашего нового стиля

Как только вы получите ту часть сайта, которая будет выглядеть так, как вы хотите, пришло время ее сохранить. Щелкните значок «Стильный» на панели надстроек и выберите «Создать новый стиль». Стильный тогда захочет узнать, на каких страницах следует применять новый стиль — в нашем случае выберите второй вариант, «mail.google.com». Далее вы увидите этот диалог:

Я уже заполнил его. Очевидно, я выбрал имя и несколько тегов для стиля. Но в коде происходят реальные вещи: строка 3 уже была там — «Стил» поставил ее на место, чтобы она знала, к каким страницам применяется стиль. Но строки 5-7 мои. Давайте проанализируем их:

Строка 5: div.gs {- эту часть вы должны узнать. Это элемент, который мы решили стилизовать. Открывающая скобка означает, что теперь мы собираемся написать некоторые правила CSS.

Строка 6: размер шрифта: 20 пикселей! Важно; — это правило, которое мы хотим изменить (размер шрифта), за которым следует его новое определение (20 пикселей), а затем объявление «! Important», что означает, что Firefox будет подчиняться этому правилу, даже если элемент «ближе» к text пытается установить размер шрифта на что-то другое.

Строка 7:} — закрытие определения стиля.

Далее нажмите «Просмотр» и поразитесь своей работе:

И наконец, когда вы увидите, что это работает, нажмите Сохранить.

Это не полное руководство

Мне хорошо известно, что для того, чтобы этот краткий учебник не выходил за рамки одного поста, мне пришлось совершить ряд прыжков и прыжков. Если вы были сбиты с толку в пути, примите мои извинения. Сначала CSS сложен, но не так сложен, как только вы его освоите — и локальная настройка сайтов остается одним из лучших способов обучения.

Если вас что-то смутило, пожалуйста, спросите меня ниже, и я сделаю все возможное, чтобы помочь.