ElkArte Community

A mod like this would be great!
Custom board icons..
https://custom.simplemachines.org/mods/index.php?mod=3604

image of smf
https://custom.simplemachines.org/mods/index.php?action-download;mod=3604;id=214971

Yes, that would be great to quickly add icons with links to other sites or to subdomains or to a wordpress blog as a substitute
for a portal...

CSS is usually more than enough:

#board_1 .board_icon:before {
    content: "";
    width: 3em;
    height: 3em;
    display: block;
    background-image: url(https://www.elkarte.net/community/avatars/Oxygen/rocket.png);
    background-size: 100%;
}

Then only thing you have to change is the "1" at the end of "#board_1" with the id of each board (that you can look up with any "inspect tool" of your browser). ;)

I have a few questions about the CSS code.
In my case, it affects the EA version 1.1.3 and the besocial theme.

1) The code must be inserted in the index.css? (I did it so)

2) After that, do I have to change, comment out or delete something in the index.css, icons_svg.css or index_besocial.css (custom_besocial.css)?

3) How can users notice with the new icons, if there are new unread posts in the boards? The color/look of the icons will always be the same. Or not?

4) How must I write it, if several boards shall have the same icon? I tried it that way, but it's obviously wrong. In the forum the boards then slip into each other.

#board_2, #board_3, #board_4 .board_icon:before {

Do not use index.css, use a custom file

• /themes/default/css/_besocial/custom_besocial.css (for BeSocial version)
• /themes/default/css/_light/custom_light.css (for Light version)

Do a research on the forum, there are several discussions about custom css.

There is no need to edit the inedex.css, icons_svg.css o index_besocial. Do all the edits in custom_besocial.css file

Eg: let's say you have in index.css this piece of css:

.admin_menu {
    color: white;
}

and instead of white you want it red, in custom_besocial.css you will have to add:

.admin_menu {
    color: red;
}

As you can see there is no need to edit the original files. ;)



Try with:

#board_1 .board_icon:before, #board_2 .board_icon:before, #board_3 .board_icon:before {

I already have a custom.css -> custom_besocial.css

In it is this part:

	.board_icon {
		width: 25px;
		height: 25px;
		position: relative;
		top: -5px;
	}

	.on_board, .on2_board {
		background-position: -300px -14px;
	}

	.off_board {
		background-position: -372px -14px;
	}

	.redirect_board {
		background-position: -444px -14px;
	}

May the part remain there or shall I replace it with that new code?:

#board_1 .board_icon:before {
    content: "";
    width: 3em;
    height: 3em;
    display: block;
    background-image: url(https://www.elkarte.net/community/avatars/Oxygen/rocket.png);
    background-size: 100%;
}

Everything worked, thanks!
I would need for the index page 30 icons, 20 of it should be different, but I can't find so many that fit well with the topics (also not from Fontawesome).
I think, for now I will try to exchange just the six standard icons for six new ones. To this I have a few questions, too, but I'll open a new topic for these.