Как исправить небольшие неудобства в Интернете с помощью стильного [Firefox и Chrome]

Как исправить небольшие неудобства в Интернете с помощью стильного [Firefox и Chrome]

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





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



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

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





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

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



UserStyles.org

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

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



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

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

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



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

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

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

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

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

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

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

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

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

Строка 5: div.gs { - эту часть вы должны признать. Это элемент, который мы решили стилизовать. Открывающая скобка означает, что мы собираемся написать несколько правил CSS. Строка 6: размер шрифта: 20 пикселей! важно; - это правило, которое мы хотим изменить (размер шрифта), за которым следует его новое определение (20 пикселей), а затем объявление! Important, что означает, что Firefox будет подчиняться этому правилу, даже если элемент, более близкий к тексту, пытается установить размер шрифта на другой. Строка 7:} - закрытие определения стиля.

Затем нажмите Preview и полюбуйтесь своей работой:

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

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

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

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

как мне записать телефонный звонок на мой iphone
Делиться Делиться Твитнуть Эл. адрес 5 советов, как зарядить ваши машины VirtualBox Linux

Устали от низкой производительности виртуальных машин? Вот что вам нужно сделать, чтобы повысить производительность VirtualBox.

Читать далее Похожие темы
  • Браузеры
  • Веб-разработка
  • Инструменты для веб-мастеров
  • Mozilla Firefox
  • Гугл Хром
  • Веб-дизайн
Об авторе Эрез Цукерман(Опубликовано 288 статей) Ещё от Erez Zukerman

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться