XF 2.1 Logo in Node Category?

[MediaSVI]

I thought I would update this post to solved and thanks again for all the help.

Here is the code that I used to put the image just on one forum category node. Everything in red is what you change. If you go through this thread you will find info the info to find the ID you need for the code.

.block--categoryID .block-header a {
background: url(image URL here);
display: block;
width: 100%;
height: 25px;
background-repeat: no-repeat;
opacity: 1;
color: transparent;
}

 

[kick]

.block--categoryID {
    .block-header {
        background: url(image.png);
    }
}

 

[MediaSVI]

Thank you, you can see what I have done but it does not work, can you help? I left the image link out of the pic.

 

[kick]

no, you should insert it in extra.less

 

[MediaSVI]

no, you should insert it in extra.less

I do not understand?

 

[kick]

Appearance -> Styles -> Templates. Find extra.less

 

[MediaSVI]

Ok I found it thank you but it does not work.

I put in this code :

.block--categoryID {
.block-header {
background: url(image.png);
}
}

I am using a theme other than the default theme.

 

[kick]

You must specify a category, I showed in the screenshots an example with an identifier of 1 in this forum. And also the path to your category

 

[MediaSVI]

I can not find the category number for the category I want to put the image on, where do you find this? Where do you find the path to the category?

 

[kick]

you can easily do this using the developer tools in the browser.

ctrl+shift+c - called code elements
Or bring to the element and use the right mouse button to call the code of the element and you will immediately receive an index of your category

 

[MediaSVI]

I found this.



I put this in but it does not work?

 

[kick]

.block--category43 {
    .block-header {
        background: url(image.png);
    }
}

background - CSS: Cascading Style Sheets | MDN

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

developer.mozilla.org

 

[MediaSVI]

I do appetite your help but you must know I do not know how to code.


.block--category43{
.block-header {
background: url(http://www.learnreason.com/images/forumpics/pmf_cat_logo.png);
}
}


That code got me this.

 

[kick]

.block--category43 {
    .block-header {
        &:before {
            content: "";
            display: block;
            background: url("http://www.learnreason.com/images/forumpics/pmf_cat_logo.png") no-repeat;
            background-size: contain;
            height: 25px;
        }

        a {
            display: none;
        }
    }
}

 

[MediaSVI]

Thanks for all your help!

 

[kick]

I rewrite code, and make clickable image link.

.block--category1 {
    .block-header {
        background: rgb(117, 117, 117);
        a {
            font-size:0;
            &:before {
                content: "";
                display: inline-block;
                background: url("http://www.learnreason.com/images/forumpics/pmf_cat_logo.png") no-repeat;
                background-size: contain;
                width: 298px;
                height: 25px;
                vertical-align: sub;
            }
        }
    }
}

if you do not need to set the background

.block--category43 {
    .block-header {
        a {
            font-size:0;
            &:before {
                content: "";
                display: inline-block;
                background: url("http://www.learnreason.com/images/forumpics/pmf_cat_logo.png") no-repeat;
                background-size: contain;
                width: 298px;
                height: 25px;
                vertical-align: sub;
            }
        }
    }
}

 

[MediaSVI]

Thanks again!