[TRICK] Board icons

May 12, 2014, 09:47:04 am

Waiting for an addon, a quick way to add board icons to be board index and or the message index just via CSS.

#b3:before {
	content: "";
	padding: 25px 0 25px 100px;
	margin-right: 5px;
	background: url(../images/your_image.png) no-repeat;
	background-size: 100%;
	vertical-align: middle;
	display: inline-block;
}

Let me explain it in details line by line.

Code: [Select]

#b3:before {

First of all, where the style is applied.
#b3 identifies the link applied to the board name (e.g. where is says "Feature Discussion" in the BoardIndex here, or "Exterminated Features" when inside the board "Feature Discussion"), in particular, in this example of the board with id equal to 3.
If we pick this site as example, it would be Chit Chat:

Code: [Select]

http://www.elkarte.net/community/index.php?board=3.0

Do you see the 3 at the end of the URL?

Code: [Select]

	content: "";

It is required for the css to work (actually, you could use that if you want to use FontAwesome to add a particular icon to your boards)

Code: [Select]

	padding: 25px 0 25px 100px;

This determines to amount of space the icon will occupy.
In this example is a rectangle of 50px tall (25+25) and 100px wide.

Code: [Select]

	margin-right: 5px;

This is used to gain some space between the image we are going to add and the name of the board.

Code: [Select]

	background: url(../images/your_image.png) no-repeat;

This is the image we want to add, so instead of "your_image.png" you will use the name of the image you prefer.

Code: [Select]

	background-size: 100%;

This will ensure the image is resized to fit into the space we have set above (50 x 100 in that case).

Code: [Select]

	vertical-align: middle;
	display: inline-block;
}

These two lines are used to vertically align the board name and the image in the middle of the space available.

You can add this code, for example to custom.css.
But you can also add it to the variant-specific custom.css (e.g. custom_light.css), "fixing" the paths to the images accordingly.

Re: [TRICK] Board icons

Reply #1 – May 12, 2014, 09:53:16 am

And now some variants on that trick.

For example, you could want to use a default board image/icon, in that case you could use:

Code: [Select]

.board_name>a:before {
	content: "";
	padding: 25px 0 25px 100px;
	margin-right: 5px;
	background: url(../images/default.png) no-repeat;
	background-size: 100%;
	vertical-align: middle;
	display: inline-block;
}
.board_name>a.moderation_link:before {
	background-image: none;
	padding: 0;
}

And if you'd want for any of your boards a custom one, you could override the default by adding something like this after the previous:

Code: [Select]

#b3:before {
	background: url(../images/board_3_img.png) no-repeat;
}

You could even override the size (and so use icons with different sizes by doing:

Code: [Select]

#b3:before {
	background: url(../images/board_3_img.png) no-repeat;
	padding: 50px 0 50px 100px;
}

This last one would be 100px high instead of 50.

Re: [TRICK] Board icons

Reply #2 – May 12, 2014, 10:08:41 am

I mentioned earlier about FontAwesome, and here it is how you may use it.
Let's say we want to add a default custom board icon based on a random glyph from FA:

Code: [Select]

.board_name>a:before {
	content: "\f18d";
	font-family: "FontAwesome";
	padding: 0.4em 0;
	font-size: 2.357em;
	vertical-align: middle;
	display: inline-block;
	margin-right: 5px;
}
.board_name>a.moderation_link:before {
	content: "";
}