Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: bharat on January 31, 2018, 01:01:52 PM

Title: Re: How to add image next to description
Post by: bharat on January 31, 2018, 01:01:52 PM
Can someone help me with the code, I need to add image the same way as you can see on the attached image.
Title: Re: How to add image next to description
Post by: Kindred on January 31, 2018, 03:08:36 PM
bharat, you should  know better by now....

that other topic was someone else's topic., it was very old and it was already marked as solved.

Start your own topic.

that being said -- I believe you have already been told how to do this...  with a quote form that exact same topic you just posted in

Quote from: Antes on August 17, 2015, 07:01:12 AM
Quote from: Illori on August 17, 2015, 06:34:46 AM
it is possible, is it recommended? no. the only way currently is with html that has its own risks and does not work in 2.1.

True, we are not recommending direct input (HTML) into the board-name/description but we have CSS :)

so if you want to show the icon next to board name use following code;
#board_1 > .info > a::after {
   content: "";
   height: 16px;
   width: 16px;
   position: absolute;
   margin-left: 5px;
   background: url(http://localhost/lunar/Themes/Lunarfall/images/animal-penguin.png) no-repeat;
}


If you want to show after the description use the following code
#board_1 > .info > p::after {
   content: "";
   height: 16px;
   width: 16px;
   position: absolute;
   margin-left: 5px;
   background: url(http://localhost/lunar/Themes/Lunarfall/images/animal-penguin.png) no-repeat;
}


I just added dummy info inside the places you need to fix them. You need to find the board ID, and change background url image to your image and ofc change the height/width if needed (if your image is bigger or smaller).
Title: Re: How to add image next to description
Post by: bharat on February 01, 2018, 03:53:15 AM
Sorry for writing my question in the wrong place. I saw this code but the picture will appear next to board name or next to the discription. As you can see on the attachment it should be like this.
Title: Re: How to add image next to description
Post by: Kindred on February 01, 2018, 10:59:59 AM
So, use before instead of after......