Оформление блока дополнительных полей DLE

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

Ничего сложного здесь нету, нам понадобится создать несколько блоков (DIV) обернутого в основной блок. Выглядеть это будет примерно так

Потом создать дополнительные поля для информационного блока, сколько их создавать ,решать Вам, зависит от того , какую информацию Вы хотите выводить на своем сайте. Давайте приступим ...

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

<div class="cont">

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/razrabotchik.webp" >Разработчик</div>
<div class="inside_div_right">WEB-MAXS</div></div>

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/tekuschaja-versija.webp">Текущая версия</div>
<div class="inside_div_right"> V 102.254</div></div>

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/zagruzheno.webp">Загружено</div>
<div class="inside_div_right">2157</div></div>

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/obnovleno.webp">Обновление</div>
<div class="inside_div_right">10.12.2022</div></div>

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/rasprostranenie.webp">Распространение</div>
<div class="inside_div_right">Бесплатно</div></div>

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/kategorija.webp">Категория</div>
<div class="inside_div_right">Антивирусы</div></div>

<div class="main_div">
<div class="inside_div_left">
<img src="/uploads/icon/operacionnaja-sistema.webp">Система (ОС)</div>
<div class="inside_div_right">Windows 10</div></div>

</div>

Здесь мы видим пока просто каркас  без вывода данных с доп полей. Для наглядности я написал пример выводимых данных. Потом мы их заменим на сами доп поля ,пример такой:

[xfgiven_x] [xfvalue_x] [/xfgiven_x] Где х название доп поля например  (os) :

<div class="inside_div_right">[xfgiven_os] [xfvalue_os] [/xfgiven_os]
</div>

Но данная конструкция подойдет если у Вас все поля будут заполнены. Для полей которые можно не заполнять нужно прописывать чуть по другому.

[xfgiven_os]
<div class="inside_div_right"> [xfvalue_os] 
</div>[/xfgiven_os]
Это делается для того,чтобы в статье не стоял пропуск или пустой блок...
То есть если поле не заполнено, блок не будет отображен.

Стили для блока доп полей DLE

Теперь нам надо прописать стили для блока дополнительных полей, выглядит это примерно так. (Со стилями Вы сможете поиграться сами, так как захочется)

.cont {padding:10px;background: rgb(0 0 0 / 2%);
    -webkit-box-shadow: 0px 1px 5px rgb(0 0 0 / 15%);
    box-shadow: 0px 1px 5px rgb(0 0 0 / 15%);
    border-radius: 2px;}
    
.main_div {padding: 10px;background: #fff;
    font-size:20px;
    margin:2px;
    -webkit-box-shadow: 0px 1px 5px rgb(0 0 0 / 15%);
    box-shadow: 0px 1px 5px rgb(0 0 0 / 15%);
    border-radius: 2px;
    width: 100%;
        display: flex;
        justify-content: space-between;
        display: -webkit-flex; /* for Safari */
        -webkit-justify-content: space-between; /* for Safari 6.1+ */ 
     align-items: center;
    }

 .main_div img {height:30px;width:30px;margin-right:15px}

Давайте немного опишу кто за что отвечает,  для тех кто не сильно понимает в стилях

.cont - Главный блок-каркас где располагаются остальные блоки DIV

.main_div - Сам блок с информацией

.main_div img - Отвечает за оформление картинки в блоке

Я надеюсь создавать дополнительные поля Вы умеете сами, а если нет ,то напишите в комментариях, и я подробно опишу создание полей. Откройте спойлер с информацией о создании доп поля!

 Показать / Скрыть текст

Блок и стили ,а также набор иконок к данному блоку можете скачать нажав на кнопку ниже