Просмотр кода элемента для новичков

1xbet Melbet
Сообщения
7
Реакции
15
Впрочем, это подойдет и для 1 ветки, но так как она уже неактуальна, будем работать со второй. Если вы даже не знали о такой штуке, как просмотр кода элемента, то открывается она при нажатии на F12, в некоторых случаях функциональная клавиша (fn) и F12. Также можно навести курсор на элемент, который мы собираемся поправить и нажать "просмотр кода элемента", "исследовать элемент", "просмотреть код элемента" и т. д. Фраза зависит от браузера. Но я, все же, надеюсь, что людей не знающих о просмотре кода тут нет.
Это универсальный гайд, который раз и навсегда ответит на бесконечные вопросы о убирании различных элементов, изменении цвета и т. д. Не спорю, я и сам задавал такие вопросы. Но когда я увидел, сколько людей все еще задают вопросы о разных мелочах, которые за секунду решаются через код элемента, я решил написать этот туториал.
Итак. Вот наш просмотр кода.
https://i.chitachok.lol/iIhbWa2.png

Может показаться, что здесь все ой как сложно, но на самом деле это не так. В левой части html код, а в правой и происходит все самое "интересное".

1. Убираем ненужные элементы
Скажем, вам вдруг срочно понадобилось убрать футер. Хз зачем, но вдруг понадобилось! Нажимаем правой кнопкой на футер и выбираем "исследовать элемент", ну или что там у вас будет.
http://blob:https//chitachok.lol/e5a8496c-8c41-4b4b-b71f-3de4847334b4

Вот открылась наша рабочая область. Выбираем в левой части тот html код, при котором подсвечивается весь футер.
https://i.chitachok.lol/hN0fJZu.png

Дальше идем сюда (в правую часть)
https://i.chitachok.lol/689hCiD.png

И добавляем:
https://i.chitachok.lol/V4lDwZr.png

Готово! Футер исчез! Теперь этот код выделяем, копируем, вставляем в extra.less (.css в первой ветке) и сохраняем!
https://i.chitachok.lol/N1N1eDk.png


2. Меняем цвета
Продолжаем издеваться над любимым форумом и его футером учить css на базовом уровне! Мы хотим, чтобы наш футер стал желтым (для примера, так-то это в настройках стиля можно сделать). Как же его "покрасить"? Снова нажимаем правой кнопкой на футер и выбираем "исследовать элемент". Открывается уже знакомое нам окошко. Снова выбираем в левой части тот html код, при котором подсвечивается весь футер. Смотрим сюда.
https://i.chitachok.lol/hNhRk3Z.png

В этот раз мы ничего не будем добавлять. Работаем с background. Открываем любую таблицу hex цветов, либо просто палитру с hex цветами. Без разницы как, нам надо просто знать hex того цвета, какой мы хотим видеть в футере. Можно также работать с rgb, но мне больше hex нравится. Для примера, я буду брать hex цвета с этого сайта.
Так, я хочу, чтобы футер был таким.


Копируем цифры с хэштегом в вставляем сюда
https://i.chitachok.lol/rhhPcin.png

Готово!
https://i.chitachok.lol/H0egqxi.png

Но вам не кажется, что текст стал немного нечитабельным?
Хмм, что же делать? Есть ли еще какие-то цвета в .p-footer? Да. Вот он:
https://i.chitachok.lol/AJKyHLq.png

Попробуем его заменить на другой, более читабельный. В конце концов, если этот цвет отвечает не за то, что мы хотим изменить, а за что-то другое, или просто изменяет не все, что надо, мы всегда можем поискать еще цвета в правой менюшке. Кстати, отменить последнее сделанное действие можно комбинацией ctrl + z.
https://i.chitachok.lol/aUeWYqi.png

https://i.chitachok.lol/hxQ5bf8.png

Вот, о чем я и говорил. Он изменил не все, что нам надо. Что ж, копируем этот код в extra.less
https://i.chitachok.lol/R2ETEUB.png

И сохраняем. Теперь идем изменять ссылки. Снова нажимаем на одну из ссылок правой кнопкой (далее ПКМ) и ищем в левой менюшке (далее ЛМ) тот код, при выборе которого вся ссылка будет выделена. Ну а дальше ищем что-то похожее на цвета в правой меюшке (далее ПМ).
https://i.chitachok.lol/geRdJwc.png

https://i.chitachok.lol/m4lWwxJ.png

https://i.chitachok.lol/3nYe3eC.png

Меняем цвет и получаем:
https://i.chitachok.lol/MEunUaz.png

https://i.chitachok.lol/978piH0.png


Вопрос: А если я хочу, чтобы цвет футера или чего-либо поменялся только на главной, или еще какой-то странице?
Ответ: Тогда приводим код
Код:
.p-footer { font-size: 13px; color: #000000; background: #FFD700;
}
К такому виду:
Код:
[data-template="forum_list"] { .p-footer { font-size: 13px; color: #000000; background: #FFD700; }
}
Там, где [data-template="forum_list"] - название нужного шаблона.
, выбираем понравившуюся иконку, нажимаем на нее и смотри чуть ниже:
https://i.chitachok.lol/a4hZlXP.png

И указывать надо так: content: "\f119"

У кого будут вопросы, задавайте в теме
 
kaspersky keys
Верх