Simple Machines Community Forum

Hello,

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


Themes / default / BoardIndex.template.php

search
<div class="board_icon">

change

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


Themes / default / css / index.css

search

.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



.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://ibb.co/F0zfcjC)

(https://ibb.co/hKJhsQL) (https://ibb.co/YBDvdvs)


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

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

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

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

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

#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:

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

Then your icon calls only need:

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

Zitat von: Antechinus in Februar 28, 2021, 06:31:57 NACHMITTAGS
That's just bloat, and teaching newbies bad habits.

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

Lol. Cargo cult coding FTW.