Advertisement:

Author Topic: Smf 2.1 Board icons  (Read 5069 times)

Offline gevv

  • Full Member
  • ***
  • Posts: 613
  • Gender: Male
  • ElkArte powerful forum software
    • elkarte on GitHub
    • https://www.elkarte.net/
Smf 2.1 Board icons
« 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;
}






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/

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,655
  • Master of BBC Abuse
Re: Smf 2.1 Board icons
« Reply #1 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)}

Offline Diego Andrés

  • Customizer
  • SMF Hero
  • *
  • Posts: 3,801
  • Gender: Male
    • DiegoAndresCortes on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: Smf 2.1 Board icons
« Reply #2 on: March 01, 2021, 01:48:31 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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,655
  • Master of BBC Abuse
Re: Smf 2.1 Board icons
« Reply #3 on: March 01, 2021, 04:45:32 PM »
Lol. Cargo cult coding FTW.