Is it possible to add an image next to the description on a board? (see attached file)
Thanks in advance!
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.
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).
Thank you very much :)
I'll try it!
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?
that code goes in your index.css file. the location does not really matter.
I knew which file but thanks for the other info. ;D
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.
Sorry for being dense Antes but I didn't understand that post at all.
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.
Hello again
If I add an image next to all boards (about 25) that will be a problem?
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.
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. :)
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
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;
}
Hey Antechinus ... Bruno thought we should ask if you'd look at this thread:
http://www.simplemachines.org/community/index.php?topic=539423.0
antes != antechinus, but cant hurt for input from him
Yea, I know ... I just missed that Bruno mentioned both names. :P
Once you have added thw code, how do you add new images
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.