News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Smf 2.1 Board icons

Started by gevv, February 16, 2021, 10:25:10 AM

Previous topic - Next topic

gevv

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







Name your icons according to category ID numbers.  board-icons folder in Themes / default / images /
ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Antechinus

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)}

Diego Andrés

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

SMF Tricks - Free & Premium Responsive Themes for SMF.

Antechinus

Lol. Cargo cult coding FTW.

Advertisement: