[Free] How to set board icons invidually from each board

Started by iqbalresources, August 29, 2022, 06:52:47 PM

Previous topic - Next topic

iqbalresources

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

Diego Andrés

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

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

iqbalresources

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.


Dzonny

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!  ;)

Antechinus

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.




iqbalresources

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

iqbalresources

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

Doug Heffernan

Glad to see that the solutions provided above worked to your satisfaction. I am marking this as solved.

Antechinus

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.

Advertisement: