Advertisement:

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

Offline elieco

  • Newbie
  • *
  • Posts: 3
How to add image next to description
« on: August 17, 2015, 06:31:04 AM »
Is it possible to add an image next to the description on a board? (see attached file)
Thanks in advance!

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 48,084
Re: How to add image next to description
« Reply #1 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.

Online Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,649
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: How to add image next to description
« Reply #2 on: August 17, 2015, 07:01:12 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;
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).
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline elieco

  • Newbie
  • *
  • Posts: 3
Re: How to add image next to description
« Reply #3 on: August 17, 2015, 07:08:39 AM »
Thank you very much  :)
I'll try it!

Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,938
  • Gender: Male
  • I have not yet begun to procrastinate.
Re: How to add image next to description
« Reply #4 on: August 17, 2015, 09:42:37 AM »
Well, I'll be dipped ... that's awesome! So does it matter where we put that code? At the end (which I know works because I tried it)? In the board title title section? Or does it matter?
Please do not PM me for support.

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 48,084
Re: How to add image next to description
« Reply #5 on: August 17, 2015, 09:46:00 AM »
that code goes in your index.css file. the location does not really matter.

Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,938
  • Gender: Male
  • I have not yet begun to procrastinate.
Re: How to add image next to description
« Reply #6 on: August 17, 2015, 09:48:17 AM »
I knew which file but thanks for the other info. ;D
Please do not PM me for support.

Online Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,649
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: How to add image next to description
« Reply #7 on: August 17, 2015, 11:51:34 AM »
that code goes in your index.css file. the location does not really matter.

Actually last code served fist

Code: [Select]
.myclass {margin: 3px;}
.myclass {margin: 2px;}

browsers applies 2px on the code.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,938
  • Gender: Male
  • I have not yet begun to procrastinate.
Re: How to add image next to description
« Reply #8 on: August 17, 2015, 01:52:46 PM »
Sorry for being dense Antes but I didn't understand that post at all.
Please do not PM me for support.

Online Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,649
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: How to add image next to description
« Reply #9 on: August 17, 2015, 02:07:25 PM »
Sorry for being dense Antes but I didn't understand that post at all.

What I want to tell is location of code inside the CSS matters actually if you put the code before the very same class it loads latest code in the file. So its recommended to add CSS code to end of the file.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline elieco

  • Newbie
  • *
  • Posts: 3
Re: How to add image next to description
« Reply #10 on: August 18, 2015, 05:29:49 AM »
Hello again
If I add an image next to all boards (about 25) that will be a problem?

Online Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,649
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: How to add image next to description
« Reply #11 on: August 18, 2015, 05:32:44 AM »
Hello again
If I add an image next to all boards (about 25) that will be a problem?

Nope. But be careful of the item size that may slow your site down.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,938
  • Gender: Male
  • I have not yet begun to procrastinate.
Re: How to add image next to description
« Reply #12 on: August 18, 2015, 10:06:59 AM »
What I want to tell is location of code inside the CSS matters actually if you put the code before the very same class it loads latest code in the file. So its recommended to add CSS code to end of the file.

Ah, excellent. Now I understand. Thanks. :)
Please do not PM me for support.

Offline Deprecated

  • SMF Hero
  • ******
  • Posts: 3,499
Re: How to add image next to description
« Reply #13 on: September 02, 2015, 12:52:20 PM »
The way CSS works is that any CSS statement overrides statements above it, so the last word is literally the last word. That's what the "cascade" in CSS means. Anything that follows modifies what's above it.

However, anything unique can appear anywhere in your CSS file, embedded CSS or inline CSS.

Well there is the !important keyword but like seasoning it's better to not use it very often. Almost like using "goto" in your PHP code. :D

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,136
  • Master of BBC Abuse
Re: How to add image next to description
« Reply #14 on: September 02, 2015, 03:55:46 PM »
Yeah I find it funny when I see CSS that has !important after everything, including purely optional stuff like colours. ::)

Anyway, about the :after pseudos. AFAICT there's no need to declare them as position: absolute; since by default they're just inline elements that will naturally sit after the text. In fact, unless the parent element is set to position: relative; setting the :after to absolute will attach it to the top of the page. :)

The other thing with absolute is that it will overlap other content if you're running short of space.

So just using this should be equally good:

Code: [Select]
#board_1 > .info > a::after {
   content: "";
   height: 16px;
   width: 21px;
   display: inline-block;
   background: url(http://localhost/lunar/Themes/Lunarfall/images/animal-penguin.png) 5px 0 no-repeat;
}

Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,938
  • Gender: Male
  • I have not yet begun to procrastinate.
Re: How to add image next to description
« Reply #15 on: September 04, 2015, 01:47:57 PM »
Hey Antechinus ... Bruno thought we should ask if you'd look at this thread:

http://www.simplemachines.org/community/index.php?topic=539423.0
Please do not PM me for support.

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 48,084
Re: How to add image next to description
« Reply #16 on: September 04, 2015, 02:00:25 PM »
antes != antechinus, but cant hurt for input from him

Offline Steve

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 3,938
  • Gender: Male
  • I have not yet begun to procrastinate.
Re: How to add image next to description
« Reply #17 on: September 04, 2015, 09:06:29 PM »
Yea, I know ... I just missed that Bruno mentioned both names. :P
Please do not PM me for support.

Offline antler

  • Charter Member
  • Jr. Member
  • *
  • Posts: 157
Re: How to add image next to description
« Reply #18 on: December 27, 2015, 11:08:12 PM »
Once you have added thw code, how do you add new images

Offline antler

  • Charter Member
  • Jr. Member
  • *
  • Posts: 157
Re: How to add image next to description
« Reply #19 on: December 30, 2015, 07:57:39 PM »
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).
I don't understand how to use or place the code you supplied.