XF 2.2 Node block header image

Версия XenForo
2.2

alexkondr007

Проверенные
Сообщения
24
Реакции
2
Баллы
30
Привет, может кто подсказать код как сделать чтобы эти фоновые картинки у каждого узла были разные?

1785758349408.png
 
Решение
Сперва идёшь в настройки - Node/Forum list и там отключаешь галочку в пункте "Enable category blok header image". И далее делаешь модификацию шаблона

Шаблон: xtr_nodes.less
Ключ модификации: придумаешь
Тип поиска: Простая замена
Найти:
Less:
.block
{
    .block-box.wrapper
    {
        min-height: {{ property('xtr_category_block_header_height')}}px;
        max-width: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        <xf:if is="property('xtr_block_header_image_enable')">
        background-color: @xf-xtr_block_header_image_background;
        background-image: url(@xf-xtr_block_header_image);
        background-size: cover;
        background-position: 50% 50%;
        color...
Сперва идёшь в настройки - Node/Forum list и там отключаешь галочку в пункте "Enable category blok header image". И далее делаешь модификацию шаблона

Шаблон: xtr_nodes.less
Ключ модификации: придумаешь
Тип поиска: Простая замена
Найти:
Less:
.block
{
    .block-box.wrapper
    {
        min-height: {{ property('xtr_category_block_header_height')}}px;
        max-width: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        <xf:if is="property('xtr_block_header_image_enable')">
        background-color: @xf-xtr_block_header_image_background;
        background-image: url(@xf-xtr_block_header_image);
        background-size: cover;
        background-position: 50% 50%;
        color: @xf-xtr_categoryBlockHeaderColor;
    
        <xf:else />
        .xf-blockHeader();
        border-bottom: none;
    
        </xf:if>
        // Block header
        .block-header
        {
            a {
                color: inherit;
                text-decoration: none;
            }
            // Block header description
            .block-desc {
                color: inherit;
            }   
        }
    }

    // Block body wrapper
    .block-content.wrapper
    {
        position: relative;
        z-index: 1;
        border-radius: @xf-borderRadiusLarge;
        margin: 0 auto;
        <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
        width: 100%;
        <xf:else />
        width: ~"calc(100% - 10px)";
        </xf:if>
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .block-content.wrapper.is-active
    {
        display: flex;
        margin: -(@xf-paddingLarge * 7 - 5px) auto 0 auto;
    }   


    // Block body node
    .block-content
    {
        display: flex;
        flex-flow: wrap;
        
        .node
        {
            background: @xf-xtr_node_rowBg;
            float: left;
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            width: ~"calc(50% - 10px)";
            <xf:else />
            width: 100%;
            </xf:if>
            margin: 0 auto @xf-paddingMedium;
            padding: @xf-paddingMedium;
            border-radius: @xf-borderRadiusLarge;
            border: @xf-borderSize solid @xf-borderColorFaint;
            -webkit-box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
            box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
            
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            @media (max-width: @_nodeList-statsCellBreakpoint)
            {
                width: ~"calc(100% - 10px)";
            }
            </xf:if>
            
            <xf:if is="property('xtr_nodes_hover_effect')">
            // Hover transform
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            
            // Hover transform
            &:hover {
                z-index: 10;
                -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                -webkit-transform: scale(01);
                -moz-transform: scale(1.01);
                -o-transform: scale(1.01);
                transform: scale(1.01);       
            }
            </xf:if>
            
            .node-body
            {
                @media (min-width: (@xf-responsiveMedium + 1))
                {
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                }
                
                .node-main
                {
                    flex: 1;
                }
                
                .node-extra .node-extra-title
                {
                    color: @xf-xtr_secondary_color;
                }
                
                .node-stats,
                .node-statsMeta
                {
                    <xf:if is="property('xtr_node_stats_hover')">
                    display: none;
                    </xf:if>
                }
                
                .node_rss,
                .node_more
                {
                    width: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .node_rss
                {
                    a {
                        color: @xf-textColorMuted;
                        &:hover {
                            color: #FF9800;
                        }
                    }
                }
                
                .node_more
                {
                    button
                    {
                        background: none;
                        border: none;
                        color: @xf-textColorMuted;
                        transform: none;
                        
                        &:active
                        {
                            background: none;
                            border: none;
                            color: @xf-linkColor;
                            transform: none;
                        }
                    }
                    
                    .menuTrigger
                    {
                        &:after
                        {
                            content: "\f142";
                            position: relative;
                            transform: none;
                            background: none;
                        }
                        
                        &:hover
                        {
                            &:after {
                                opacity: 1;
                                transform: none;
                            }
                        }
                    }
                    
                    .button
                    {
                        &:not(.button--splitTrigger) {
                            &:hover {
                                background: none;
                                color: @xf-linkHoverColor;
                            }
                        }
                    }
                }

                @media (max-width: (@xf-responsiveMedium + 1))
                {
                    .node_rss,
                    .node_more
                    {
                        display: none;
                    }
                    .forum-node-icon
                    {
                        width: 46px;
                    }
                }
            }
            
            &:nth-child(2n+1)
            {
                clear: left;
            }
            
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            &:last-child {
                &:nth-child(2n+1)
                {
                    width: ~"calc(100% - 10px)";
                }
            }
            
            .node-extra
            {
                display: block;
                width: 100%;
                background-color: @xf-contentAltBg;
                border-radius: 4px;
            }
            </xf:if>
        }
    }
}
Заменить:
Less:
.block
{
    .block-box.wrapper
    {
        min-height: {{ property('xtr_category_block_header_height')}}px;
        max-width: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        <xf:if is="property('xtr_block_header_image_enable')">
        background-color: @xf-xtr_block_header_image_background;
        background-image: url(@xf-xtr_block_header_image);
        background-size: cover;
        background-position: 50% 50%;
        color: @xf-xtr_categoryBlockHeaderColor;
    
        <xf:else />
        .xf-blockHeader();
        border-bottom: none;
    
        </xf:if>
        // Block header
        .block-header
        {
            a {
                color: inherit;
                text-decoration: none;
            }
            // Block header description
            .block-desc {
                color: inherit;
            }   
        }
    }

    // Block body wrapper
    .block-content.wrapper
    {
        position: relative;
        z-index: 1;
        border-radius: @xf-borderRadiusLarge;
        margin: 0 auto;
        <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
        width: 100%;
        <xf:else />
        width: ~"calc(100% - 10px)";
        </xf:if>
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .block-content.wrapper.is-active
    {
        display: flex;
        margin: -(@xf-paddingLarge * 7 - 5px) auto 0 auto;
    }   


    // Block body node
    .block-content
    {
        display: flex;
        flex-flow: wrap;
        
        .node
        {
            background: @xf-xtr_node_rowBg;
            float: left;
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            width: ~"calc(50% - 10px)";
            <xf:else />
            width: 100%;
            </xf:if>
            margin: 0 auto @xf-paddingMedium;
            padding: @xf-paddingMedium;
            border-radius: @xf-borderRadiusLarge;
            border: @xf-borderSize solid @xf-borderColorFaint;
            -webkit-box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
            box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
            
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            @media (max-width: @_nodeList-statsCellBreakpoint)
            {
                width: ~"calc(100% - 10px)";
            }
            </xf:if>
            
            <xf:if is="property('xtr_nodes_hover_effect')">
            // Hover transform
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            
            // Hover transform
            &:hover {
                z-index: 10;
                -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                -webkit-transform: scale(01);
                -moz-transform: scale(1.01);
                -o-transform: scale(1.01);
                transform: scale(1.01);       
            }
            </xf:if>
            
            .node-body
            {
                @media (min-width: (@xf-responsiveMedium + 1))
                {
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                }
                
                .node-main
                {
                    flex: 1;
                }
                
                .node-extra .node-extra-title
                {
                    color: @xf-xtr_secondary_color;
                }
                
                .node-stats,
                .node-statsMeta
                {
                    <xf:if is="property('xtr_node_stats_hover')">
                    display: none;
                    </xf:if>
                }
                
                .node_rss,
                .node_more
                {
                    width: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .node_rss
                {
                    a {
                        color: @xf-textColorMuted;
                        &:hover {
                            color: #FF9800;
                        }
                    }
                }
                
                .node_more
                {
                    button
                    {
                        background: none;
                        border: none;
                        color: @xf-textColorMuted;
                        transform: none;
                        
                        &:active
                        {
                            background: none;
                            border: none;
                            color: @xf-linkColor;
                            transform: none;
                        }
                    }
                    
                    .menuTrigger
                    {
                        &:after
                        {
                            content: "\f142";
                            position: relative;
                            transform: none;
                            background: none;
                        }
                        
                        &:hover
                        {
                            &:after {
                                opacity: 1;
                                transform: none;
                            }
                        }
                    }
                    
                    .button
                    {
                        &:not(.button--splitTrigger) {
                            &:hover {
                                background: none;
                                color: @xf-linkHoverColor;
                            }
                        }
                    }
                }

                @media (max-width: (@xf-responsiveMedium + 1))
                {
                    .node_rss,
                    .node_more
                    {
                        display: none;
                    }
                    .forum-node-icon
                    {
                        width: 46px;
                    }
                }
            }
            
            &:nth-child(2n+1)
            {
                clear: left;
            }
            
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            &:last-child {
                &:nth-child(2n+1)
                {
                    width: ~"calc(100% - 10px)";
                }
            }
            
            .node-extra
            {
                display: block;
                width: 100%;
                background-color: @xf-contentAltBg;
                border-radius: 4px;
            }
            </xf:if>
        }
    }
}

.block--category1 .block-box.wrapper {
    background-image: url('путь') !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}

.block--category2 .block-box.wrapper {
    background-image: url('путь') !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}
Где в блоке "Заменить" в самом низу кода в свойствах .block--category1 .block-box.wrapper:
число - твой id категории;
в url нужно будет указать твой путь к изображению;
и если нужно будет изменить положение фотки, то меняй значения в свойстве background-position.

А также в зависимости от твоего количества категорий добавляй их и устанавливай все значения по образцу
 
Сперва идёшь в настройки - Node/Forum list и там отключаешь галочку в пункте "Enable category blok header image". И далее делаешь модификацию шаблона

Шаблон: xtr_nodes.less
Ключ модификации: придумаешь
Тип поиска: Простая замена
Найти:
Less:
.block
{
    .block-box.wrapper
    {
        min-height: {{ property('xtr_category_block_header_height')}}px;
        max-width: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        <xf:if is="property('xtr_block_header_image_enable')">
        background-color: @xf-xtr_block_header_image_background;
        background-image: url(@xf-xtr_block_header_image);
        background-size: cover;
        background-position: 50% 50%;
        color: @xf-xtr_categoryBlockHeaderColor;
   
        <xf:else />
        .xf-blockHeader();
        border-bottom: none;
   
        </xf:if>
        // Block header
        .block-header
        {
            a {
                color: inherit;
                text-decoration: none;
            }
            // Block header description
            .block-desc {
                color: inherit;
            }  
        }
    }

    // Block body wrapper
    .block-content.wrapper
    {
        position: relative;
        z-index: 1;
        border-radius: @xf-borderRadiusLarge;
        margin: 0 auto;
        <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
        width: 100%;
        <xf:else />
        width: ~"calc(100% - 10px)";
        </xf:if>
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .block-content.wrapper.is-active
    {
        display: flex;
        margin: -(@xf-paddingLarge * 7 - 5px) auto 0 auto;
    }  


    // Block body node
    .block-content
    {
        display: flex;
        flex-flow: wrap;
       
        .node
        {
            background: @xf-xtr_node_rowBg;
            float: left;
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            width: ~"calc(50% - 10px)";
            <xf:else />
            width: 100%;
            </xf:if>
            margin: 0 auto @xf-paddingMedium;
            padding: @xf-paddingMedium;
            border-radius: @xf-borderRadiusLarge;
            border: @xf-borderSize solid @xf-borderColorFaint;
            -webkit-box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
            box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
           
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            @media (max-width: @_nodeList-statsCellBreakpoint)
            {
                width: ~"calc(100% - 10px)";
            }
            </xf:if>
           
            <xf:if is="property('xtr_nodes_hover_effect')">
            // Hover transform
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
           
            // Hover transform
            &:hover {
                z-index: 10;
                -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                -webkit-transform: scale(01);
                -moz-transform: scale(1.01);
                -o-transform: scale(1.01);
                transform: scale(1.01);      
            }
            </xf:if>
           
            .node-body
            {
                @media (min-width: (@xf-responsiveMedium + 1))
                {
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                }
               
                .node-main
                {
                    flex: 1;
                }
               
                .node-extra .node-extra-title
                {
                    color: @xf-xtr_secondary_color;
                }
               
                .node-stats,
                .node-statsMeta
                {
                    <xf:if is="property('xtr_node_stats_hover')">
                    display: none;
                    </xf:if>
                }
               
                .node_rss,
                .node_more
                {
                    width: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
               
                .node_rss
                {
                    a {
                        color: @xf-textColorMuted;
                        &:hover {
                            color: #FF9800;
                        }
                    }
                }
               
                .node_more
                {
                    button
                    {
                        background: none;
                        border: none;
                        color: @xf-textColorMuted;
                        transform: none;
                       
                        &:active
                        {
                            background: none;
                            border: none;
                            color: @xf-linkColor;
                            transform: none;
                        }
                    }
                   
                    .menuTrigger
                    {
                        &:after
                        {
                            content: "\f142";
                            position: relative;
                            transform: none;
                            background: none;
                        }
                       
                        &:hover
                        {
                            &:after {
                                opacity: 1;
                                transform: none;
                            }
                        }
                    }
                   
                    .button
                    {
                        &:not(.button--splitTrigger) {
                            &:hover {
                                background: none;
                                color: @xf-linkHoverColor;
                            }
                        }
                    }
                }

                @media (max-width: (@xf-responsiveMedium + 1))
                {
                    .node_rss,
                    .node_more
                    {
                        display: none;
                    }
                    .forum-node-icon
                    {
                        width: 46px;
                    }
                }
            }
           
            &:nth-child(2n+1)
            {
                clear: left;
            }
           
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            &:last-child {
                &:nth-child(2n+1)
                {
                    width: ~"calc(100% - 10px)";
                }
            }
           
            .node-extra
            {
                display: block;
                width: 100%;
                background-color: @xf-contentAltBg;
                border-radius: 4px;
            }
            </xf:if>
        }
    }
}
Заменить:
Less:
.block
{
    .block-box.wrapper
    {
        min-height: {{ property('xtr_category_block_header_height')}}px;
        max-width: 100%;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        <xf:if is="property('xtr_block_header_image_enable')">
        background-color: @xf-xtr_block_header_image_background;
        background-image: url(@xf-xtr_block_header_image);
        background-size: cover;
        background-position: 50% 50%;
        color: @xf-xtr_categoryBlockHeaderColor;
   
        <xf:else />
        .xf-blockHeader();
        border-bottom: none;
   
        </xf:if>
        // Block header
        .block-header
        {
            a {
                color: inherit;
                text-decoration: none;
            }
            // Block header description
            .block-desc {
                color: inherit;
            }  
        }
    }

    // Block body wrapper
    .block-content.wrapper
    {
        position: relative;
        z-index: 1;
        border-radius: @xf-borderRadiusLarge;
        margin: 0 auto;
        <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
        width: 100%;
        <xf:else />
        width: ~"calc(100% - 10px)";
        </xf:if>
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .block-content.wrapper.is-active
    {
        display: flex;
        margin: -(@xf-paddingLarge * 7 - 5px) auto 0 auto;
    }  


    // Block body node
    .block-content
    {
        display: flex;
        flex-flow: wrap;
       
        .node
        {
            background: @xf-xtr_node_rowBg;
            float: left;
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            width: ~"calc(50% - 10px)";
            <xf:else />
            width: 100%;
            </xf:if>
            margin: 0 auto @xf-paddingMedium;
            padding: @xf-paddingMedium;
            border-radius: @xf-borderRadiusLarge;
            border: @xf-borderSize solid @xf-borderColorFaint;
            -webkit-box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
            box-shadow: 0 1px 20px 0 rgba(0,0,0,0.06);
           
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            @media (max-width: @_nodeList-statsCellBreakpoint)
            {
                width: ~"calc(100% - 10px)";
            }
            </xf:if>
           
            <xf:if is="property('xtr_nodes_hover_effect')">
            // Hover transform
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
           
            // Hover transform
            &:hover {
                z-index: 10;
                -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
                -webkit-transform: scale(01);
                -moz-transform: scale(1.01);
                -o-transform: scale(1.01);
                transform: scale(1.01);      
            }
            </xf:if>
           
            .node-body
            {
                @media (min-width: (@xf-responsiveMedium + 1))
                {
                    display: flex;
                    align-items: center;
                    justify-content: space-evenly;
                }
               
                .node-main
                {
                    flex: 1;
                }
               
                .node-extra .node-extra-title
                {
                    color: @xf-xtr_secondary_color;
                }
               
                .node-stats,
                .node-statsMeta
                {
                    <xf:if is="property('xtr_node_stats_hover')">
                    display: none;
                    </xf:if>
                }
               
                .node_rss,
                .node_more
                {
                    width: 38px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
               
                .node_rss
                {
                    a {
                        color: @xf-textColorMuted;
                        &:hover {
                            color: #FF9800;
                        }
                    }
                }
               
                .node_more
                {
                    button
                    {
                        background: none;
                        border: none;
                        color: @xf-textColorMuted;
                        transform: none;
                       
                        &:active
                        {
                            background: none;
                            border: none;
                            color: @xf-linkColor;
                            transform: none;
                        }
                    }
                   
                    .menuTrigger
                    {
                        &:after
                        {
                            content: "\f142";
                            position: relative;
                            transform: none;
                            background: none;
                        }
                       
                        &:hover
                        {
                            &:after {
                                opacity: 1;
                                transform: none;
                            }
                        }
                    }
                   
                    .button
                    {
                        &:not(.button--splitTrigger) {
                            &:hover {
                                background: none;
                                color: @xf-linkHoverColor;
                            }
                        }
                    }
                }

                @media (max-width: (@xf-responsiveMedium + 1))
                {
                    .node_rss,
                    .node_more
                    {
                        display: none;
                    }
                    .forum-node-icon
                    {
                        width: 46px;
                    }
                }
            }
           
            &:nth-child(2n+1)
            {
                clear: left;
            }
           
            <xf:if is="{{ property('xmNodeLayout') }} == 'dual'">
            &:last-child {
                &:nth-child(2n+1)
                {
                    width: ~"calc(100% - 10px)";
                }
            }
           
            .node-extra
            {
                display: block;
                width: 100%;
                background-color: @xf-contentAltBg;
                border-radius: 4px;
            }
            </xf:if>
        }
    }
}

.block--category1 .block-box.wrapper {
    background-image: url('путь') !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}

.block--category2 .block-box.wrapper {
    background-image: url('путь') !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
}
Где в блоке "Заменить" в самом низу кода в свойствах .block--category1 .block-box.wrapper:
число - твой id категории;
в url нужно будет указать твой путь к изображению;
и если нужно будет изменить положение фотки, то меняй значения в свойстве background-position.

А также в зависимости от твоего количества категорий добавляй их и устанавливай все значения по образцу
От души, спасибо)
 
Современный облачный хостинг провайдер | Aéza
Назад
Сверху Снизу