Всем привет. Сегодня хотел бы рассказать и показать пару полезных возможностей обычного браузера, на примере Google Chrome. Речь пойдет о такой возможности как инструменты разработчика, которые можно найти в меню браузера ( иногда данная функция спрятаны во вкладке “дополнительные возможности”).
Для чего это нужно?
Инструменты разработчика — это целый блок функций. Попасть в его меню можно кликнув правой кнопкой мыши и нажав “Просмотреть код”. В появившимся окне, можно увидеть код страницы сайта, значения переменных (если вы тестируете какую-нибудь функцию на php) и стили сайта.
Инструмент очень облегчит жизнь тем, кто хочет что-то изменить на сайте. Часто при изменении размера текста, или миниатюры записи может “поехать” вся структура сайта. Что бы не делать слепых изменений в коде, и потом надеется на лучшее.
Можно изменять положение элементов мышкой.
Редактировать цвет зон и размер текста в них непосредственно в браузере.
Изменения, которые вы сделаете никак не отразятся на ваших файлах, на сервере, что очень удобно, а главное безопасно.
Как применять?
Как же применять и пользоваться возможностями этих инструментов. Для примера возьмем наш сайт и постараемся взять некоторые понравившиеся нам стили, чтобы потом применить их на другом сайте. Рассмотрим баннеры счетчиков. При наведении на них курсором они становятся ярче. Именно этот эффект мы и будем копировать.
Шаг №1
Перейдем в просмотр кода элемента и узнаем какой стиль для него используется.
Шаг №2
Вернемся к странице и после правого клика выберем просмотреть код страницы
Шаг №3
В теге <head> найдем строку, отвечающую за подкачку стилей сайта. Обычно она выглядит вот так вот. (пример строки)
<link rel="stylesheet" id='mh-magazine-lite-css' href="https://mylma.ru/wp-content/themes/mh-magazine-lite/style.css?ver=2.5.5" type="text/css" media="all" />Шаг №4
Откроем css файл в новой вкладке. И при помощи поиска по странице (клавиша F3), найдем выбранный нами стиль и скопируем его
Шаг №5
Вставим его в свой файл style.css и сохраним изменения.
Следующие действия зависят исключительно от того на какой CMS системе сделан ваш сайт, и какая тема на нем используется. Для того чтобы новый стиль заработал на вашем сайте, нужно сделать следующее :
- Найти файл шаблона страницы или ее зоны , в котором расположен нужный вам элемент
- Заменить стандартный стиль, на кастомный.
- Сохранить файл, обновить страницу (shift + F5) и редактировать описание стиля, пока результат не придется вам по душе.