Changing Board Icons

[keyboard]

Has anyone successfully changed the Board Icons ?  If so , what mod did you use ?

Thanks
Ron

[Sir Osis of Liver]

You have to edit or replace the sprite /images/boardicons.png.

You cannot view this attachment.

[Julius_2000]

The way I did it is editing the .board_icon and .board_icon a selector to match my requirements (width, height, display ) and then figured out the id number of each board via the browser's HTML view to individually assign urls for each icon.
For instance

Code Select Expand


.board_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(Some function to adapt to screen size);
}

.board_icon a {
  display: myValues;
  width: myValues;
  height: myValues;
}

#board_16 .board_icon a {
  content: url(..images/icons/Myfolder/Myicon.svg); /* <= my preferred image format, could be anything else, like jpg etc. */
}



[Kindred]

I use the fafa icons mod to fill each board icon.. (modified to use the starwars icon set)

[keyboard]

I really would like to understand "Changing Board icons"..........  I am comfortable using the cpanal..Can some direct me what file would I be changing ?

Please help an "Old Ukrainian" understand...... 12 dozen Perogees will be sent to your email box

Ron

[Kindred]

Wwll, see, we need more information.
There are about 4 different ways to do this, depending on what you actually want.

As I did,  you can use fonts like fafa icons ...
You can replace all with the same (new) image ...
You can use css to replace individual icons, per board id  ...
You can edit the code itself to display different icons ... (this is the least recommended option)

[Julius_2000]

I really would like to understand "Changing Board icons"..........  I am comfortable using the cpanal..Can some direct me what file would I be changing ?

Please help an "Old Ukrainian" understand...... 12 dozen Perogees will be sent to your email box

Ron

Any changes regarding "my" approach would be made in index.css. You would need to upload your images to your theme, perhaps like this: ..MyTheme/images/icons/MyFolder (but that's just my way or organizing stuff).

Then, for .board_icon a and your specific board, you need to replace the Default background with yours.

For instance (using the SMF forum as an example):
SMF Default

Code Select Expand

.board_icon a {
background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
display: inline-block;
width: 45px;
height: 45px;
}
Custom for board no. 1 (uses id="board_1" according to HTML output)

Code Select Expand

#board_1 .board_icon a {
/* background: url(../images/boardicons.png) no-repeat 0 0 / 90px; */
        background: url(..images/icons/MyFolder/MyBoard_icon_1);
        display: inline-block;
width: 45px;
height: 45px;
}
Play around with the dimensions of your icons to see what fits best.
Personally, I use a calculating function for "width", e.g.:

Code Select Expand

width: calc(70px + (80 - 70) * (100vw - 721px) / (3840 - 721)));
so it would adapt to different screen sizes.


Kindred's approach would require you to put your icons into one image file format, like .png or .jpg, and then adjust the coordinates for them (or place them exactly like the original ones).
SMF uses 4 different icons in one sprite (multiple images in one file) and then assigns coordinates, so the image gets moved to display the icon that's representing the status of the board (new posts, no new posts, redirect to content outside the forum, and one more that I don't know at the moment).

Example for a board without new posts (uses additional class .board_off):

Code Select Expand

   .board_icon a.board_off {
background-position: 0 -45px;
}
You would then adjust the position by changing the values above according to your image file.

If you are uncomfortable changing the default values, you can either put your changed code towards the end of index.css or use /**/ around properties to "comment" them out so you could go back and restore them if need be.

[keyboard]

Thanks everyone

A lot to digest but like everything else, when I do understand how to do it, it will be easy     

Great support !  Bravo Bravo Bravo

[Bob Clifton]

If you are refering to something like this . There are progs in the downloads you can install to do that in your admin panel . I know there is one for 2.0 and THINK there is one for 2.1  I  have 2.0 on my sites and it works fine .I THINK it is called BoardIcons1.0 but there is a NEWER Version . Someone more familiar might can tell ya what it is . You will have to rezize the image you wish to use .

[Sir Osis of Liver]

Some 2.1 themes still use the on.png, on2png, off.png icons that were used in 2.0.  Makes it much easier to substitute custom icons.