Print Page - Smf 2.1 Board icons

Title: Smf 2.1 Board icons
Post by: gevv on February 16, 2021, 10:25:10 AM

Hello,

I made a simple edit. (new message icon not available for now)

Themes / default / BoardIndex.template.php

search

Code Select

<div class="board_icon">

change

Code Select

<div class="board_icon w', $board['id'], '">

Themes / default / css / index.css

search

Code Select

.board_icon a {
	background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
	display: inline-block;
	width: 45px;
	height: 45px;
}
.board_icon a.board_on2 {
	background-position: -45px 0;
}
.board_icon a.board_off {
	background-position: 0 -45px;
}
.board_icon a.board_redirect {
	background-position: -45px -45px;
}
.board_icon {
	text-align: center;
	padding: 8px 0 0 0;
	width: 60px;
	flex-shrink: 0;
}

change

Code Select



.board_icon a {
	background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
	display: inline-block;
	width: 45px;
	height: 45px;
}

.w1 a {background: url(../images/board-icons/1.png) no-repeat 0 0 / 60px;display: inline-block;width: 60px;height: 60px;}

.w7 a {background: url(../images/board-icons/7.png) no-repeat 0 0 / 60px;display: inline-block;width: 60px;height: 60px;}

.w28 a {background: url(../images/board-icons/28.png) no-repeat 0 0 / 60px;display: inline-block;width: 60px;height: 60px;}

.w29 a {background: url(../images/board-icons/29.png) no-repeat 0 0 / 60px;display: inline-block;width: 60px;height: 60px;}


.board_icon a.board_on2 {
	
}
.board_icon a.board_off {
  
}
.board_icon a.board_redirect {
	background: url(../images/board-icons/14.png) no-repeat 0 0 / 60px;
	display: inline-block;
	width: 60px;
	height: 60px;
}
.board_icon {
	text-align: center;
	padding: 8px 0 0 0;
	width: 80px;
	flex-shrink: 0;
	margin: 4px 14px 0px 8px;
}

(https://i.ibb.co/KLWQB3S/smf-board-icon.png) (https://ibb.co/F0zfcjC)

(https://i.ibb.co/hKJhsQL/css-change.png) (https://ibb.co/hKJhsQL) (https://i.ibb.co/YBDvdvs/css-change2.png) (https://ibb.co/YBDvdvs)

Name your icons according to category ID numbers. board-icons folder in Themes / default / images /

Title: Re: Smf 2.1 Board icons
Post by: Antechinus on February 28, 2021, 06:31:57 PM

There's no need for the template edit. The markup already adds the $board_id to the main div for each board:

Code Select

<div id="category_1_boards">
				<div id="board_1" class="up_contain ">
					<div class="board_icon">

So the ability to target icons according to board is already built in. All you need is the appropriate images and CSS:

Code Select

#board_1 .board_icon a {background: whatever you like;}

And of course you can target by read or unread state as well:

Code Select

#board_1 .board_icon a.board_off {background: whatever you like;}
#board_1 .board_icon a.board_on {background: whatever else you want for this;}

Also, if you are already defining .board_icon a separately before the individual icons, there is no need to put the sizing and position in the code for every icon. That's just bloat, and teaching newbies bad habits. Just use this instead:

Code Select

.board_icon a {
	display: block;
	width: 60px;
	height: 60px;
}

Then your icon calls only need:

Code Select

#board_1 .board_icon a {background: url(../images/board-icons/1.png)}

Title: Re: Smf 2.1 Board icons
Post by: Diego Andrés on March 01, 2021, 01:48:31 PM

Quote from: Antechinus on February 28, 2021, 06:31:57 PM
That's just bloat, and teaching newbies bad habits.

It's not teaching if a newbie isn't actually trying to learn :P

Title: Re: Smf 2.1 Board icons
Post by: Antechinus on March 01, 2021, 04:45:32 PM

Lol. Cargo cult coding FTW.

Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: gevv on February 16, 2021, 10:25:10 AM