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

Эта инструкция по просмотру кода элемента страницы предназначена для всех пупсиков, которые постоянно задают одни и те же вопросы:

• «Как стыбзить префикс с сайта?»
• «Как сделать такую кнопочку как у вас, или на сайте Васи Пупкина?»

Этому никогда не будет конца, поэтому каждый раз, пупсики будут отправлены на эту страницу.

Обращение к пупсикам:​

Вы должны внимательно прочесть эту статью, я постарался подробно расписать каждый «сантиметр» того, что буду объясняю.

Начало инструкции, и что для этого надо?​

Начнём с того, что в каждом браузере есть эта опция. Однако, она может называться по-разному в разных браузерах.

Вот несколько примеров названий опции:​

• Google Chrome — Просмотреть код
• Яндекс браузере — Исследовать элемент
• Mozilla Firefox — Просмотреть код элемента
• Microsoft Edge — Инспектировать элемент

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

​

Нажав ПКМ (Правую Кнопку Мыши) на нужном вам префиксе или элементе страницы, вы увидите меню. В конце списка (или предпоследним) вы увидите нужную нам опцию «Просмотреть код».
Нажав на него, будет вот такое меню

​

Спойлер: Что это такое?

Когда вы выбираете опцию "Просмотреть код" в меню, открывается инструмент разработчика браузера с выделенным кодом выбранного элемента страницы. В этом инструменте вы сможете увидеть HTML-структуру элемента, его атрибуты и CSS-свойства.

В верхней части инструмента разработчика вы обнаружите вкладки, представляющие различные аспекты элемента и его стилей. Например, вкладка "Elements" (или "Элементы") позволяет вам просмотреть HTML-код элемента и его дочерние элементы. Вы также можете редактировать HTML-код прямо в этом окне для проверки изменений.

Кроме того, вкладка "Styles" (или "Стили") позволяет вам просмотреть и изменить CSS-свойства, применяемые к выбранному элементу. Здесь вы можете видеть список свойств и их значения, а также применять изменения в реальном времени для визуальной настройки стиля элемента.

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

На скриншоте видно, что у префикса: инструкция, есть класс pref_r1 под номером 1 с его помощью мы поймём, какие стили у класса pref_r1.
На скриншоте под номером видно, какие стили использует данный класс pref_r1.
В данном случае, как и видно на скриншоте, он использует незамысловатые свойства.

​

Вот он код:​

.pref_r1 {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    padding: 2px 8px;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}

Спойлер: Почему на скриншоте указано много классов у одного стиля

У нас на сайте используется несколько классов, разделенных запятыми, такие как .pref_r1, .pref_r2, .pref_r3, .pref_r4, это означает, что определенный набор стилей будет применяться ко всем элементам, имеющим любой из этих классов. Это позволяет использовать один и тот же набор стилей для различных префиксов на сайте, и экономит место.
Таким образом, все элементы, которые имеют один из классов .pref_r1, .pref_r2, .pref_r3, .pref_r4, будут иметь одну и ту же стилизацию, включая отступы, размер шрифта, цвет фона и другие аспекты, указанные в CSS-правилах.

Приступаем к копипасту​

Как узнать что использует сайт в своих классах и свойствах стиля мы разобрались
Теперь вам осталось только скопировать данные свойства к себе на сайт.

Первым делом​

Первым делом переходим в панель управления Xenforo 2.x.x и переходим в: Внешний вид » Шаблоны.
Ищем в поиске extra.less

​

Открываете его. И вставляете туда код: который скопировали на странице.
.pref_r1 (можете переименовать).
Важно знать что названия не должны содержать в себе пробелов, а так же он чувствителен к регистру.
То есть если вы называете класс Prefix, то и когда используете его в дальнейшем, тоже используйте его с большой буквы.

.pref_r1 {
    margin: 0px 3px;
    white-space: nowrap;
    border-radius: 6px;
    font-size: 74%;
    padding: 2px 8px;
    text-shadow: 2px 2px 1px #000;
    background-color: #3f3f3f;
    border: 1px solid;
}

Теперь можете сохранить это и приступить к следующему этапу.

Создание префикса​

Создаём префикс префикс который будет использован. в ваших темах или ресурсах

• Адрес для создания префиксов тем: вашГОВНОСАЙТ/admin.php?thread-prefixes/
• Адрес для создания префиксов ресурсов: вашГОВНОСАЙТ/admin.php?resource-manager/prefixes/

Буду показывать на примере форума, поэтому переходим по адресу /admin.php?thread-prefixes/, добавляете или изменяете свой префикс.
И в «Стиле отображения» указываете: название стиля, БЕЗ ТОЧКИ!!!

​

Сохраняете. Всё, гуд.

 

Первая инструкции в рунете, где админ сообщает как правильно у него утаскивать верстку.

p.s. создавайте свое, творите! Пробуйте сделать красивее, сейчас возможности верстки впечатляющие.