XF 2.1 Logo in Node Category?

MediaSVI

Active member
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;
}


Screen Shot 2020-05-03 at 8.55.55 AM.png

pmfpic.png
 
Last edited:
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.
 
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
 
you can easily do this using the developer tools in the browser.
1588516560081.png
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
 
Less:
.block--category43 {
    .block-header {
        background: url(image.png);
    }
}
 
1588522715269.webp
Less:
.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;
        }
    }
}
 
I rewrite code, and make clickable image link.
1588523600359.webp
Less:
.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
Less:
.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;
            }
        }
    }
}
1588523735566.webp
 
Top Bottom