Категории в списке типов контента как кнопки

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО InstantCMS 2.X

Как реализовать?

#1 22 октября 2021 в 13:43

Всех приветствую!

Подскажите пожалуйста, как категории в списке типа контента реализовать как кнопки?

На подобии как в примере на скриншоте.

Друг друга тяготы носите, и тако исполните закон Христов. Гал.6:2

#2 22 октября 2021 в 15:25

Узнать какой class у категории через ПКМ — «Посмотреть код» в браузере. Пример для шаблона default: добавить в \templates\default\css файл my.css. В файле \templates\default\main.tpl.php добавить после строки «theme-modal.css» это: <?php $this->addMainTplCSSName('my'); ?>. В my.css прописать

.«class категории» {

background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;

}

Любые изменения добавлять в my.css, после обновления cms можно быстро добавить изменения в шаблоне. Код кнопок по вкусу

#3 22 октября 2021 в 21:03

Для модерн. Идем в папку templates/modern/controllers/сontent и ищем там файл category_view.tpl.php

Делаем его копию и называем, например для типа контента articles, как category_view_articles.tpl.php

Затем идем в документацию по bootstrap getbootstrap.com/docs/4.6/components/button-group/ и находим там код вывода группы кнопок

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

С помощью этого кода будем править в category_view_articles.tpl.php блок вывода категорий.

Заменим код

<?php if ($subcats){ ?>
    <?php if($ctype['options']['cover_preset']){ ?>
        <div class="row mb-n3">
            <?php foreach($subcats as $c){ ?>
                <div class="col-md-4 col-sm-6 mb-3 mb-md-4 <?php echo $c['list_params']['class']; ?>">
                    <div class="card border-0 bg-light">
                        <?php if($c['list_params']['cover_img']){ ?>
                            <a class="d-block overflow-hidden rounded-lg" href="<?php echo $c['list_params']['href']; ?>">
                                <img class="d-block w-100" src="<?php echo $c['list_params']['cover_img']; ?>" alt="<?php html($c['title']); ?>">
                            </a>
                        <?php } ?>
                        <div class="card-body">
                            <h2 class="h5 m-0">
                                <a href="<?php echo $c['list_params']['href']; ?>">
                                    <?php echo $c['title']; ?>
                                </a>
                            </h2>
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    <?php } else { ?>
        <ul class="list-inline icms-content-subcats">
            <?php foreach($subcats as $c){ ?>
                <li class="list-inline-item h4 text-warning mr-3 <?php echo $c['list_params']['class']; ?>">
                    <?php html_svg_icon('solid', 'folder'); ?>
                    <a href="<?php echo $c['list_params']['href']; ?>">
                        <?php echo $c['title']; ?>
                    </a>
                </li>
            <?php } ?>
        </ul>
    <?php } ?>
<?php } ?>

на

<?php if ($subcats) { ?>
    <div class="text-right">
        <div class="btn-group" role="group" aria-label="Категории">
 
            <?php foreach ($subcats as $c) { ?>
 
                <a class="btn btn-secondary" href="<?php echo $c['list_params']['href']; ?>">
                    <?php echo $c['title']; ?>
                </a>
 
            <?php } ?>
 
        </div>
    </div>
<?php } ?>

Получим

Стили добавить «по вкусу». И в документацию поглядывать getbootstrap.com/docs/4.6/getting-started/introduction/

Разработка виджетов, полей и компонентов, сайты под ключ. site: www.zau4man.ru telegram: @zau4man консультации: 300р./час

Сегодня в 05:49

#4 22 октября 2021 в 22:06

Zau4man, огромное спасибо, все получилось!

noname, вам тоже спасибо!

Друг друга тяготы носите, и тако исполните закон Христов. Гал.6:2

Есть сайт, нужно переработать

Как в Moderne зафиксировать гл

Категории в списке типов контента как кнопки

Похожие темы

Modern иконки шаблонов списка типов контента

Некорректная фильтрация в фильтре при нахождении в категории

Автоподключение записей связанных типов контента

[ЗАКРЫТО] Авто связи типов контента

Пусто при просмотре списка если выбран стиль списка - Таблица

[ЕСТЬ РЕШЕНИЕ] Наборы типов контента как кнопки

InstantCMS Team

О проекте

Поддержка

Дополнения