Всем привет!
Наверно каждого из нас часто не устраивает внешнее оформление сайта, которым мы часто пользуемся. Это могут быть как и Яндекс, Гос услуги и так далее.
Сегодня я расскажу вам как можно легко и быстро переделать внешний вид сайта под свой вкус и цвет. Для этого не понадобиться практиковаться в программировании. Нам достаточно знать лишь несколько команд из одного из самых легких языков: CSS.
Для начала нам нужно выбрать сайт который мы будем переделывать. Я буду объяснять вам на примере сайта ЭЖД.
Шаг 1.
Вам необходимо установить расширение для вашего браузера на компьютере под названием Stylish.
https://userstyles.org/ Вот ссылка на скачивание.
Далее мы устанавливаем его, регистрируемся.
Шаг 2.
После чего нам необходимо найти кнопку Create style и нажать на нее.
Выбираем Web style. Тут все настройки на ваш вкус и цвет. Вы можете добавить к вашему стилю картинку, описание и так далее.
Нас интересует конкретно вот это окно:
Шаг 3.
В данном шаге мы приступим к самому изменению стиля сайта.
Первым делом мы должны указать ссылку на сайт, который мы хотим изменить. Делается это вот такой вот командой:
И не забываем про фигурные скобочки.
После этого для дальнейшего удобства мы сделаем список цветов, которые мы будем использовать при изменении сайта. Найти их мы можем в интернете по запросу: "Цвета дляHTML и CSS".
И начнем вписывать их в скрипт:
Все команды прописываются в таком же формате как и на изображении.
Шаг 4.
Давайте начнем изменять наш сайт. Для этого перейдем на сам сайт и кликнем на элемент который хотим изменить и выберем посмотреть код элемента.
В результате получим примерно вот такую картину:
В скрипте синим цветом будет выделен тот объект, который вы хотите изменить. В его командах или самых близких к нему ищем class. Название этого класса нам нужно скопировать.
После этого идем в наш скрипт и пишем данные команды:
Команда !important помогает избежать конфликтов стилей и делает наш стиль главным.
И готово! Таким способом вы можете изменить цвет любого элемента на сайте. К слову искать классы для объектов можно намного легче. Для этого достаточно водить курсором по скрипту и объект на сайте, который привязан к команде на которую вы указываете будет выделяться.
Шаг 5.
Далее нам осталось всего лишь загрузить наш стиль в сайт. Для этого публикуем наш скрипт и устанавливаем его. Далее бежим проверять, что мы только что сделали).
Заключение.
На этом все. Конечно я рассказать в этой статье не все, что можно сделать с сайтом. Но если вы начнете изучать CSS, то сможете сделать намного больше. Поверьте мне это не так сложно!