Современный облачный хостинг провайдер | Aéza
Контакты ООО "АЕЗА ГРУПП" ИНН 2312304914 ОГРН 1212300056430
Заголовок и картинка в категории

Заголовок и картинка в категории

Обзор FAQ Обсуждение
Данное модификация изготовлена для Дефолтного стиля.
Тема XF 2.1 - Нужно отпустить наименование раздела вниз.

Итак. Для этого нам нужно приготовить
  1. список категорий номера id
  2. фотокартинки высота 200 (там сами смотрите)
  3. открыть Ваш шаблон
  4. ищем extra.less
  5. вставляем код
Код: 
/* Начало изменнения положения наименование категории + картинка */
.blockCategoryBG (@categoryid, @categorybg) {
    &.block--category@{categoryid} {
        .block-header {
            background: url(@categorybg);
        }
    }
}

.block.block--category {
    .block-header {
        height: 200px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        font-size: 250%;
        color: #f53909;
        text-shadow: 1px 1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff, -1px -1px #ffffff, 3px 3px 6px rgba(0, 0, 0, .5);
        display: flex;
        align-items: flex-end;     
    }
/* НАЧАЛО Указываем путь картинкам ДОЛЖНЫ БЫТЬ НА ВАШЕМ СЕРВЕРЕ*/

    /*.blockCategoryBG (ид_категории, 'адрес_картинки');*/

    .blockCategoryBG (ид_категории, 'адрес_картинки');
    .blockCategoryBG (ид_категории, 'адрес_картинки');
    .blockCategoryBG (ид_категории, 'адрес_картинки');
    .blockCategoryBG (ид_категории, 'адрес_картинки');
  
/* КОНЕЦ Указываем путь картинкам ДОЛЖНЫ БЫТЬ НА ВАШЕМ СЕРВЕРЕ*/
}
/* КОНЕЦ изменения положения наименование категории + картинка */

Далее можно сделать чтоб они были все верху

Код: 
/* Начало изменнения положения наименование категории + картинка */
.blockCategoryBG (@categoryid, @categorybg) {
    &.block--category@{categoryid} {
        .block-header {
            background: url(@categorybg);
        }
    }
}

.block.block--category {
    .block-header {
        height: 200px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        font-size: 250%;
        color: #f53909;
        text-shadow: 1px 1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff, -1px -1px #ffffff, 3px 3px 6px rgba(0, 0, 0, .5);
        display: flex; /* удалить */
        align-items: flex-end;    /* удалить */
    }
/* НАЧАЛО Указываем путь картинкам ДОЛЖНЫ БЫТЬ НА ВАШЕМ СЕРВЕРЕ*/

    /*.blockCategoryBG (ид_категории, 'адрес_картинки');*/

    .blockCategoryBG (ид_категории, 'адрес_картинки');
    .blockCategoryBG (ид_категории, 'адрес_картинки');
    .blockCategoryBG (ид_категории, 'адрес_картинки');
    .blockCategoryBG (ид_категории, 'адрес_картинки');
  
/* КОНЕЦ Указываем путь картинкам ДОЛЖНЫ БЫТЬ НА ВАШЕМ СЕРВЕРЕ*/
}
/* КОНЕЦ изменения положения наименование категории + картинка */

Хочу высказать благодарность данному пользователю Skaiman. Упростил код для всех категорий. Спасибо
Назад
Сверху Снизу