Решено Что нужно копировать что бы скопировать ту или иную вещь

[dddevokay]

Что нужно копировать что бы скопировать ту или иную вещь? По типу меню быстрого доступа или что то такое

 

[NightmareX]

Что нужно копировать что бы скопировать ту или иную вещь? По типу меню быстрого доступа или что то такое

типо arizona rp?

 

[dddevokay]

типо arizona rp?

В целом хочу скопировать что-то с форума, я не понимаю какую часть кода брать. extra_less окей а остальное не понимаю

 

[NightmareX]

В целом хочу скопировать что-то с форума, я не понимаю какую часть кода брать. extra_less окей а остальное не понимаю

Меню быстрого доступа делается в виджетах

 

[dddevokay]

OFFTOP

А где я код возьму я не понимаю какую часть кода

 

[NightmareX]

OFFTOP

А где я код возьму я не понимаю какую часть кода

OFFTOP

<div class="block">
<div class="block-container" data-widget-id="14" data-widget-key="forum_menu_dostup" data-widget-definition="html">

<h3 class="block-minorHeader">Меню быстрого доступа</h3>

<div class="block-body block-row">
<style>
.quick-access-container {
max-height: 500px; /* можно подогнать под свой макет */
overflow-y: auto;
padding-right: 6px; /* чтобы текст не налезал на скролл */
scrollbar-width: thin;
scrollbar-color: #2a5298 #171e29;
}

.quick-access-container::-webkit-scrollbar {
width: 6px;
}

.quick-access-container::-webkit-scrollbar-track {
background: #171e29;
border-radius: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2a5298, #256d85);
border-radius: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #256d85, #2a5298);
}

.quick-access .button {
width: 100%;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #31435d;
white-space: nowrap;
transition: all 0.3s ease;
font-size: 13px;
border-radius: 8px;
padding: 15px 18px 13px;
font-weight: 400;
text-align: center;
letter-spacing: .05em;
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
color: #fff;
background: #171e29;
margin: 0 0 10px;
position: relative;
overflow: hidden;
}

.quick-access .button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #1e3c72, #2a5298, #256d85, #2a5298, #1e3c72);
background-size: 400% 400%;
transition: left 0.4s ease;
z-index: 0;
}

.quick-access .button:hover::before {
left: 0;
animation: gradientMove 4s ease infinite;
}

.quick-access .button:hover {
box-shadow: 15 15 15px rgba(37, 109, 133, 0.8),
25 25 25px rgba(42, 82, 152, 0.7),
35 35 35px rgba(30, 60, 114, 0.6);
}

@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.quick-access .button span {
position: relative;
z-index: 1;
}

</style>

<div class="quick-access-container">
<ol class="listPlain quick-access">
<li><a href="?forums/35/" class="button"><span class="button-text"><span>Правила форума</span></span></a></li>
<li><a href="?forums/30/" class="button"><span class="button-text"><span>Жалобы на администрацию</span></span></a></li>
<li><a href="?forums/21/" class="button"><span class="button-text"><span>Жалобы NAME</span></span></a></li>
<li><a href="?forums/3/" class="button"><span class="button-text"><span>Технический раздел</span></span></a></li>
<li><a href="?forums/37/" class="button"><span class="button-text"><span>Опровержения со слетов</span></span></a></li></ol>
</div>
</div>
</div> </div>

 

[dddevokay]

OFFTOP

<div class="block">
<div class="block-container" data-widget-id="14" data-widget-key="forum_menu_dostup" data-widget-definition="html">

<h3 class="block-minorHeader">Меню быстрого доступа</h3>

<div class="block-body block-row">
<style>
.quick-access-container {
max-height: 500px; /* можно подогнать под свой макет */
overflow-y: auto;
padding-right: 6px; /* чтобы текст не налезал на скролл */
scrollbar-width: thin;
scrollbar-color: #2a5298 #171e29;
}

.quick-access-container::-webkit-scrollbar {
width: 6px;
}

.quick-access-container::-webkit-scrollbar-track {
background: #171e29;
border-radius: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #2a5298, #256d85);
border-radius: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #256d85, #2a5298);
}

.quick-access .button {
width: 100%;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
border: 1px solid #31435d;
white-space: nowrap;
transition: all 0.3s ease;
font-size: 13px;
border-radius: 8px;
padding: 15px 18px 13px;
font-weight: 400;
text-align: center;
letter-spacing: .05em;
box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
color: #fff;
background: #171e29;
margin: 0 0 10px;
position: relative;
overflow: hidden;
}

.quick-access .button::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(270deg, #1e3c72, #2a5298, #256d85, #2a5298, #1e3c72);
background-size: 400% 400%;
transition: left 0.4s ease;
z-index: 0;
}

.quick-access .button:hover::before {
left: 0;
animation: gradientMove 4s ease infinite;
}

.quick-access .button:hover {
box-shadow: 15 15 15px rgba(37, 109, 133, 0.8),
25 25 25px rgba(42, 82, 152, 0.7),
35 35 35px rgba(30, 60, 114, 0.6);
}

@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

.quick-access .button span {
position: relative;
z-index: 1;
}

</style>

<div class="quick-access-container">
<ol class="listPlain quick-access">
<li><a href="?forums/35/" class="button"><span class="button-text"><span>Правила форума</span></span></a></li>
<li><a href="?forums/30/" class="button"><span class="button-text"><span>Жалобы на администрацию</span></span></a></li>
<li><a href="?forums/21/" class="button"><span class="button-text"><span>Жалобы NAME</span></span></a></li>
<li><a href="?forums/3/" class="button"><span class="button-text"><span>Технический раздел</span></span></a></li>
<li><a href="?forums/37/" class="button"><span class="button-text"><span>Опровержения со слетов</span></span></a></li></ol>
</div>
</div>
</div> </div>

Мне код не нужен, я хочу понять как его взять с форума

 

[NightmareX]

Мне код не нужен, я хочу понять как его взять с форума

Через Dev Tools

 

[KeoFox]

F12 с ПК
на телефонах подобным мазохизмом не занимаюсь по этому не подскажу

 

[dddevokay]

F12 с ПК
на телефонах подобным мазохизмом не занимаюсь по этому не подскажу

Я знаю как, я не знаю какую часть кода откуда

 

[KeoFox]

Я знаю как, я не знаю какую часть кода откуда

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

 

[IntelCore]

Я знаю как, я не знаю какую часть кода откуда

Во-первых учимся смотреть интернет. Мы живем не в 1 веке чтобы не было гайдов по инструментам разработчика.
Во-вторых код взять легче легкого.
Нажимаем ctrl + shift + c и выбираем элемент который необходимо скопировать.
Далее уже идут куча вкладок которые почти никто не видит как оказалось.
В нашем случае тебе будет достаточно html кода и css стилей.
После того, как ты выбрал нужный блок или его часть, но тебе нужно взять его полностью - мышкой ведешь вверх html кода пока не будет выделен полноценный блок, понять это можно, если выше определенного тега ты наведешься на тег, отвечающий за другие функции.
Здесь мы выделяем html код меню быстрого доступа.

Чтобы его скопировать, нажимаем ПКМ по нему, в открывшемся окне выбираем copy => copy element. Готово, мы скопировали полноценный код нужного блока.
Теперь нужно скопировать стили.
Чтобы в панели css стилей появился нужный нам, мы должны выбрать подходящий класс. В html тегах присутствуют аттрибуты class, они отвечают за обращение к css стилям. Например, нажмем на <div class="block">, и у нас в панели css откроется этот стиль.



Дальше уже в html коде, где у тебя меню быстрого доступа у тебя есть 2 варианта.
1. Вставить стиль в html код. Все css стили для блока вставляешь в тег <style></style>.
2. Делаешь обращение к стилю в другом файле через link. В случае виджета, легче сделать по 1 варианту.

Дальше думаю уже можно разобраться.