News:

Wondering if this will always be free?  See why free is better.

Main Menu

How to add image next to description

Started by elieco, August 17, 2015, 06:31:04 AM

Previous topic - Next topic

elieco

Is it possible to add an image next to the description on a board? (see attached file)
Thanks in advance!

Illori

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.

Antes

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).

elieco


Steve

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?
DO NOT pm me for support!

Illori

that code goes in your index.css file. the location does not really matter.

Steve

I knew which file but thanks for the other info. ;D
DO NOT pm me for support!

Antes

Quote from: Illori on August 17, 2015, 09:46:00 AM
that code goes in your index.css file. the location does not really matter.

Actually last code served fist

.myclass {margin: 3px;}
.myclass {margin: 2px;}


browsers applies 2px on the code.

Steve

Sorry for being dense Antes but I didn't understand that post at all.
DO NOT pm me for support!

Antes

Quote from: Steve on August 17, 2015, 01:52:46 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.

elieco

Hello again
If I add an image next to all boards (about 25) that will be a problem?

Antes

Quote from: elieco 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?

Nope. But be careful of the item size that may slow your site down.

Steve

Quote from: Antes on August 17, 2015, 02:07:25 PMWhat 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. :)
DO NOT pm me for support!

Deprecated

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

Antechinus

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:

#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;
}

Steve

DO NOT pm me for support!

Illori

antes != antechinus, but cant hurt for input from him

Steve

Yea, I know ... I just missed that Bruno mentioned both names. :P
DO NOT pm me for support!

antler

Once you have added thw code, how do you add new images

antler

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).
I don't understand how to use or place the code you supplied.

Advertisement: