Модификации Путеводитель / 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>

 

[danny]

I translated the Russian text into English for my own sake.

I discovered a small mistake I made, there may be an error with the image links, you may receive an error message in DevTools because the images are not displayed properly.

Refused to load the image because it violates Content Security Policy

To avoid that problem, I change the image links from [COLOR=rgb(226, 80, 65)]<img src="https://cdn-icons-png.flaticon.com/128/389/389514.png" alt="Search">[/COLOR] to [COLOR=rgb(97, 189, 109)]<img src="{{ base_url('styles/default/icons/1.png') }}" alt="Search"> [/COLOR]So that the images are on your own server.

For this to work you need to create a folder in styles/default/ and name it icons, I made it easy for myself and named the pictures 1-8.
I'll post the folder with the images here, copy the images/folder to styles/default/

The new code looks like this:

<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">It will be informative</p>
                <p class="title">Guide</p>
                <p class="subtitle">We invite you to check out our short graphical guide to the forum..</p>
            </div>

            <div class="faq-content-row">
<div>
                    <img src="{{ base_url('styles/default/icons/1.png') }}" alt="Search">
                    <p class="title">How to get likes?</p>
                    <p class="subtitle">Likes are given by other users if they found your post or topic useful.</p>
                </div>

                <div>
                    <img src="{{ base_url('styles/default/icons/2.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 collect 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="{{ base_url('styles/default/icons/3.png') }}" alt="Search">
                    <p class="title">Obtaining verified participant status </p>
                    <p class="subtitle">Verification badges help users find popular and trusted users more easily..</p>
                    <a href="#" class="button faqbtn">Go to the "Verified Members" section</a>
                </div>

                <div>
                    <img src="{{ base_url('styles/default/icons/4.png') }}" alt="Search">
                    <p class="title">Basic terms and concepts</p>
                    <p class="subtitle">The terms of Internet forums — are their own special language, which has been formed over decades.</p>
                    <a href="#" class="button faqbtn">Study</a>
                </div>

                <div>
                    <img src="{{ base_url('styles/default/icons/5.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@demotest.test</p>
                    <a href="#" class="button faqbtn">Question • Answer • Help</a>
                </div>

                <div>
                    <img src="{{ base_url('styles/default/icons/6.png') }}" alt="Search">
                    <p class="title">How to add your 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">Topics</a>
                </div>

                <div>
                    <img src="{{ base_url('styles/default/icons/7.png') }}" alt="Search">
                    <p class="title">Site Rules </p>
                    <p class="subtitle">Knowing and following the rules — 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="{{ base_url('styles/default/icons/8.png') }}" alt="Search">
                    <p class="title">Achievements and medals system</p>
                    <p class="subtitle">A medal system designed to celebrate 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>

I hope you understand what I mean.