Custom Board Icon

Custom Board Icon Started by jack001 · January 23, 2018, 01:18:49 pm · Read 13932 times 0 Members and 2 Guests are viewing this topic. previous topic - next topic

Custom Board Icon

January 23, 2018, 01:18:49 pm

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

Re: Custom Board Icon

Reply #1 – January 24, 2018, 02:34:43 pm

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

Re: Custom Board Icon

Reply #2 – February 01, 2018, 12:28:32 pm

CSS is usually more than enough:

Code: [Select]

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

Re: Custom Board Icon

Reply #3 – April 27, 2018, 09:02:33 am

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.

Code: [Select]

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

Re: Custom Board Icon

Reply #4 – April 27, 2018, 10:24:11 am

Quote from: Mrs. Chaos – April 27, 2018, 09:02:33 am1) The code must be inserted in the index.css? (I did it so)

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.

Quote from: Mrs. Chaos – April 27, 2018, 09:02:33 am2) 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)?

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:

Code: [Select]

.admin_menu {
    color: white;
}

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

Code: [Select]

.admin_menu {
    color: red;
}

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

Quote from: Mrs. Chaos – April 27, 2018, 09:02:33 am4) 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.

Try with:

Code: [Select]

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

Re: Custom Board Icon

Reply #5 – April 27, 2018, 11:46:00 am

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

In it is this part:

Code: [Select]

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

Code: [Select]

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

Re: Custom Board Icon

Reply #6 – April 29, 2018, 08:40:09 am

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.