Модификации Путеводитель / FAQ Для вашего форума

[Optinice]

Optinice разместил(а) новый ресурс:

Путеводитель / FAQ Для вашего форума - Красивый путеводитель по форуму.

Код не мой, но переделанный под мои нужды.
Красивый путеводитель по форуму.
Посмотреть вложение 12257

Заходим: https://вашсайт/admin.php?nodes/
Нажимаем "Добавить узел"
Выбираем "Страница"
В HTML-код шаблона вставляем:

<xf:css>
    img { width: 50px; height: 50px; }
    .p-title {
        display: none;
    }
    .p-sectionLinks {
        display: none;
    }
    .p-breadcrumbs  {
        display: none;
    }...

Посмотреть страницу этого ресурса...

 

Модификации  Красивые баннеры / префиксы с иконками FontAwesome

[martin]

Круто смотрится , для версии 2.2 нет таково ?

 

[danny]

This code is adapted for Xenforo 2.3

<xf:css>
/* ===== General Styles ===== */
img { width: 50px; height: 50px; }
.p-title, .p-sectionLinks, .p-breadcrumbs, .p-body-header, .titleBar { display: none; }

.sectionMain {
    background-color: #27272700;
    padding: 10px;
    margin: 0 auto 0px;
    border-radius: 10px;
}

.faq-content {
    max-width: 1100px;
    margin: -10px auto 0;
}

.faq-content-header {
    width: 100%;
    background: #1d283a;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

.faq-content-header .prefix {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #008cff;
}

.faq-content-header .title {
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #E9E9E9;
    margin-top: 8px;
}

.faq-content-header .subtitle {
    margin-top: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    max-width: 800px;
    color: #A9A9A9;
}

.faq-content-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.faq-content-row > div {
    width: 49%;
    background: #1d283a;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

.faq-content-row .title {
    margin-top: 20px;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #E9E9E9;
}

.faq-content-row .subtitle {
    margin-top: 4px;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: #A9A9A9;
    padding-right: 14px;
}

.button.faqbtn {
    margin-top: 15px;
    display: inline-block;
}

/* ===== Responsive ===== */
@media(max-width: 1089px) {
    .faq-content-row > div { width: 49%; }
}

@media(max-width: 520px) {
    .faq-content-row > div { width: 100%; }
}
</xf:css>

<xf:title>{{ phrase('FAQ') }}</xf:title>

<div class="mainContentBlock section sectionMain">
    <div class="jflex">
        <div class="faq-content">
            <div class="faq-content-header">
                <p class="prefix">Будет познавательно</p>
                <p class="title">Путеводитель</p>
                <p class="subtitle">Предлагаем ознакомиться с нашим кратким графическим путеводителем по форуму.</p>
            </div>

            <div class="faq-content-row">
                <div>
 <img src="https://cdn-icons-png.flaticon.com/128/389/389514.png" alt="Search">
 <p class="title">How to get sympathy?</p>
 <p class="subtitle">Sympathies are posed by other users if they consider your message or topic useful</p>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/18955/18955621.png" alt="Search">
 <p class="title">How to download resources</p>
 <p class="subtitle">To download resources, you need to receive at least 30 messages and gain 10 likes, download at least 5 resources, or purchase a privileged group</p>
 <a href="#" class="button faqbtn">Find out more</a>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/8358/8358886.png" alt="Search">
 <p class="title">Getting status verified participants </p>
 <p class="subtitle">Confirmation icons help users find popular and reliable users more easily.</p>
 <a href="#" class="button faqbtn">Go to section «verified participants»</a>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/5332/5332730.png" alt="Search">
 <p class="title">Basic terms and concepts</p>
 <p class="subtitle">The terms of Internet forums — are their own special language that has been formed over decades.</p>
 <a href="#" class="button faqbtn">Study</a>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/4847/4847805.png" alt="Search">
 <p class="title">Technical Support Department</p>
 <p class="subtitle">Ask it in the thematic section «Question - Answer» or write to us at: support@terahub.ru</p>
 <a href="#" class="button faqbtn">Question • Answer • Help</a>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/5974/5974633.png" alt="Search">
 <p class="title">How to add the first topic - resource.</p>
 <p class="subtitle">It’s better to show than to tell, detailed video instructions with examples and voice acting are waiting for you.</p>
 <a href="#" class="button faqbtn">Resources</a>
 <a href="#" class="button faqbtn">Themes</a>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/4252/4252310.png" alt="Search">
 <p class="title">Site rules </p>
 <p class="subtitle">Know and follow the rules — this is not a formality, but a basic skill of digital hygiene and social interaction on the network.</p>
 <a href="#" class="button faqbtn">Read</a>
 </div>

 <div>
 <img src="https://cdn-icons-png.flaticon.com/128/179/179249.png" alt="Search">
 <p class="title">System of achievements and medals</p>
 <p class="subtitle">A medal system designed to recognize active and useful community members, the medals received are displayed in your profile and below each message. Gather them to showcase your contributions and status in the community!</p>
 <a href="#" class="button faqbtn">List of available medals</a>
 </div>
 </div>
 </div>
 </div>
</div>