Advertisement:

Author Topic: Re: How to add image next to description  (Read 382 times)

Offline bharat

  • Jr. Member
  • **
  • Posts: 357
Re: How to add image next to description
« 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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 55,430
  • Gender: Male
    • Kindred-999 on GitHub
Re: How to add image next to description
« Reply #1 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

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;
Code: [Select]
#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
Code: [Select]
#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).
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline bharat

  • Jr. Member
  • **
  • Posts: 357
Re: How to add image next to description
« Reply #2 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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 55,430
  • Gender: Male
    • Kindred-999 on GitHub
Re: How to add image next to description
« Reply #3 on: February 01, 2018, 10:59:59 AM »
So, use before instead of after......
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.