Для примера четыре HTML виджета.
О форуме Ключ виджета: aboutus_widget
Заголовок: О форуме
Позиции для отображения: [SVG]Custom Footer: Над списком ссылок нижнего колонтитула 10
Шаблон:
<div class="block aboutus-widget"{{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader">О форуме</h3>
<div class="block-body block-row">
<img class="block-img" src="https://u.to/Y_y1Hw">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat perspiciatis dignissimos totam pariatur accusantium sequi earum deserunt, ipsam, eaque eos optio facere itaque ut rem! Nobis eaque hic deleniti, impedit</p>
</div>
</div>
</div>
Расширенный режим: отметить Ответственность Ключ виджета: disclaimer_widget
Заголовок: Ответственность
Позиции для отображения: [SVG]Custom Footer: Над списком ссылок нижнего колонтитула 20
Шаблон:
<div class="block disclaimer-widget"{{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader">Ответственность</h3>
<div class="block-body block-row">
<p>Администрация не несет ответственности за публикации пользователей. Если Вы считаете, что на форуме содержится информация, запрещённая к распространению, просим сообщить нам на email.</p>
</div>
</div>
</div>
Расширенный режим: отметить Информация Ключ виджета: usermenu_widget
Заголовок: Информация
Позиции для отображения: [SVG]Custom Footer: Над списком ссылок нижнего колонтитула 30
Шаблон:
<div class="block usermenu-widget"{{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader">Информация</h3>
<div class="block-body block-row">
<ul class="list-widget">
<li><a href="{{ link('whats-new') }}">Новости форума</a></li>
<li><a href="#" data-xf-click="overlay">Правила форума</a></li>
<li><a href="#" data-xf-click="overlay">Ответственность</a></li>
<li><a href="#">Реклама на форуме</a></li>
<xf:if is="$xf.visitor.user_id">
<li><a href="{{ link('logout', null, {'t': csrf_token()}) }}">{{ phrase('log_out') }}</a></li>
<xf:else />
<li><a href="{{ link('login') }}" data-xf-click="overlay">{{ phrase('log_in_or_register_now') }}</a></li>
</xf:if>
</ul>
</div>
</div>
</div>
Расширенный режим: отметить Контакты Ключ виджета: contacts_widget
Заголовок:Контакты
Позиции для отображения: [SVG]Custom Footer: Над списком ссылок нижнего колонтитула 40
Шаблон:
<div class="block contacts-widget"{{ widget_data($widget) }}>
<div class="block-container">
<h3 class="block-minorHeader">Контакты</h3>
<div class="block-body block-row">
<ul class="list-widget">
<li>
<a href="mailto:support@forum.ru">support@forum.ru</a>
<span
class="mailto-copy"
data-xf-init="copy-to-clipboard tooltip"
data-copy-text="support@forum.ru"
title="{{ phrase('copy_to_clipboard')}}">
<i class="far fa-copy"></i>
</span>
</li>
<li>
<xf:if is="$xf.visitor.canUseContactForm()">
<xf:if is="$xf.contactUrl">
<a href="{$xf.contactUrl}" data-xf-click="{{ ($xf.options.contactUrl.overlay OR $xf.options.contactUrl.type == 'default') ? 'overlay' : '' }}">{{ phrase('contact_us') }}</a>
</xf:if>
</xf:if>
</li>
</ul>
<div class="logo-img">
<img src="https://u.to/L_61Hw">
</div>
</div>
</div>
</div>
Расширенный режим: отметить В extra.less лучше сделать модификацию .svg-copyright-custom-footer {
.block {
.block-row {
padding: 10px 0;
@media (max-width: @xf-responsiveMedium) {
padding: 10px 10px;
}
.list-widget {
list-style: none;
padding-left: 0;
margin-top: 0;
li {
margin: 0 15px 0 0;
.m-overflowEllipsis();
a:before {
.m-faBase();
.m-faContent(@fa-var-angle-double-right);
padding-right: 5px;
}
}
}
.mailto-copy {
cursor: pointer;
margin-left: 5px;
}
}
&.aboutus-widget {
.block-container {
.block-row {
.block-img {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
max-width: 90px;
margin-right: 8px;
}
p {
margin-top: 0;
}
}
}
}
&.usermenu-widget {
}
&.disclaimer-widget {
}
&.contacts-widget {
}
}
position: relative;
.logo-img {
display: block;
position: absolute;
right: 20px;
bottom: 10px;
img {
max-width: 200px;
@media (max-width: @xf-responsiveNarrow) {
max-width: 130px;
}
}
}
}