Hi
I'm currently looking a way to set every board to have a different icons. I've been tried this mod, but no avail :
https://custom.simplemachines.org/index.php?mod=511
https://custom.simplemachines.org/index.php?mod=3604
and this mod, while successfully installed, still not much different from having me simply replace boardicons.png in the root.
https://custom.simplemachines.org/index.php?mod=4224
I'm too refer this thread to see any related trick, but yet to be successful.
https://www.simplemachines.org/community/index.php?topic=568581.0
https://www.simplemachines.org/community/index.php?topic=577093.0
is there any tricks/tip/a way, to set every single board have a different icon?
thank you
For which SMF version?
For 2.1 this works quite well https://custom.simplemachines.org/index.php?mod=4224
Quote from: iqbalresources on August 29, 2022, 06:52:47 PMand this mod, while successfully installed, still not much different from having me simply replace boardicons.png in the root.
How so? Aren't you supposed to type in on most mods anyways? It's not like you'd leave it at random :o
Quote from: iqbalresources on August 29, 2022, 06:52:47 PMis there any tricks/tip/a way, to set every single board have a different icon?
For which version of SMF? For 2.1 it is trivially easy, even without a mod, providing you can write your own CSS declarations for each board (not hard to do, and no template hacks are required). I have been meaning to do a Tips and Tricks topic for this, but haven't got around to it yet..
Smf 2.1.2 (current version)
Looking at the previous post, looks like it related with boardindex.template in default theme. But I'm still unsure since my search in that file couldn't find the code needed, to do the replacement, maybe because different smf version.
You don't need to edit template nor to use a mod, for 2.1 version you can just add something like this in your css:
(for example for the board with an ID 14:
#board_14 .board_icon a.board_on {
background:url(../images/board-icons/14.png);
background-size:contain
}
#board_14 .board_icon a.board_on2 {
background:url(../images/board-icons/14.png);
background-size:contain
}
#board_14 .board_icon a.board_off {
background:url(../images/board-icons/14-off.png);
background-size:contain
}
Upload appropriate icons at mentioned path and that's all! ;)
Essentially, yes. Although that can be cleaned up a bit.
For a start, there is no need to declare tag and class on the anchor, and there should be no need to include .board_icon in the descendants. This should work just as well:
.board_icon a {
background-size: contain;
}
#board_14 .board_on {
background: url(../images/board-icons/14.png);
}
#board_14 .board_on2 {
background: url(../images/board-icons/14.png);
}
#board_14 .board_off {
background: url(../images/board-icons/14-off.png);
}
if you are using custom icons for all boards then you should only need to declare background-size once. But then that only applies if you are not using sprites anywhere. If you are using your own sprites (and someone might make sprites for each board) then you may want to rely on the default background-size CSS, and not declare it in your custom CSS.
Quote from: Dzonny on August 30, 2022, 02:31:50 AMYou don't need to edit template nor to use a mod, for 2.1 version you can just add something like this in your css:
(for example for the board with an ID 14:
#board_14 .board_icon a.board_on {
background:url(../images/board-icons/14.png);
background-size:contain
}
#board_14 .board_icon a.board_on2 {
background:url(../images/board-icons/14.png);
background-size:contain
}
#board_14 .board_icon a.board_off {
background:url(../images/board-icons/14-off.png);
background-size:contain
}
Upload appropriate icons at mentioned path and that's all! ;)
so i need to add these code into index.css? looks like that. thanks! :D
Quote from: Antechinus on August 30, 2022, 02:59:31 AMEssentially, yes. Although that can be cleaned up a bit.
For a start, there is no need to declare tag and class on the anchor, and there should be no need to include .board_icon in the descendants. This should work just as well:
.board_icon a {
background-size: contain;
}
#board_14 .board_on {
background: url(../images/board-icons/14.png);
}
#board_14 .board_on2 {
background: url(../images/board-icons/14.png);
}
#board_14 .board_off {
background: url(../images/board-icons/14-off.png);
}
if you are using custom icons for all boards then you should only need to declare background-size once. But then that only applies if you are not using sprites anywhere. If you are using your own sprites (and someone might make sprites for each board) then you may want to rely on the default background-size CSS, and not declare it in your custom CSS.
noted. will take your advise as well. really appreciate that. :)
done implement both code. It's work!. since i'm using customize theme, so i'm put the code in css file in customize theme. thank you guyss ;)
Glad to see that the solutions provided above worked to your satisfaction. I am marking this as solved.
Quote from: iqbalresources on August 30, 2022, 11:26:23 AMdone implement both code.
Why both? They are basically doing the same thing. :P
I gave the second option to save code, not to make people use more code than necessary.