changing board icon in theme

[Cookieswithcoffee]

I hope I can explain this clearly in the first go -crossing fingers-  And I hope this area is appropriate. Kindly redirect me if I've missed the existing category/thread for this topic!

I am attempting to modify a theme. I wish to change the board icon image:

Code Select Expand

.board_icon a {
  background: [color=maroon]url(../images/boardicons.png)[/color] no-repeat 0 0 / 90px;
  display: inline-block;
  width: 45px;
  height: 45px;
}
I understand that the png has to be linked (no idea what the proper terminology is). Can I use fotki to link this or does it have to be "in" my server?

My fotki options are:



Thank you!
Cookie

[Arantor]

Ideally the image should be on your server. You can in theory use fokti if you use the 'direct link to image' option specifically, but it's really not recommended.

Note that the default image is really a combination of 4 images in one:

[Cookieswithcoffee]

Thank you! That answers my immediate question!

[Sir Osis of Liver]

If you just want to use individual images instead of sprite (it's easier) -

Code Select Expand


.board_icon a {
background: url(../images/on.png) no-repeat 0 0 / 60px;
display: inline-block;
width: 65px;
height: 65px;
}
.board_icon a.board_on2 {
background: url(../images/on2.png) no-repeat 0 0 / 60px;
background-position: 0px 0;
}
.board_icon a.board_off {
background: url(../images/off.png) no-repeat 0 0 / 60px;
background-position: 0 0px;
}
.board_icon a.board_redirect {
background: url(../images/redirect.png) no-repeat 0 0 / 60px;
background-position: -5px 0px;
}



[Antechinus]

Why makes the CSS that complicated? You should only need about half that much code to do the job.

[Sir Osis of Liver]

It werks gud.  I modified the existing css just enough to do it.

[Antechinus]

I know. I can tell. You have copied a stack of crud that you didn't need to copy.

[Arantor]

Always doing things the hard way, oh well.

[Sir Osis of Liver]

I'm very lazy busy.  If you can do it better, post it.  It was a bad idea using a sprite for this, board icons are one of the first things forum owners like to customize, just makes it more difficult.

[Antechinus]

Code Select Expand

.board_icon a {
    display: inline-block;
    width: 65px;
    height: 65px;
    background: no-repeat 0 0 / 60px;
    background-image: url(../images/on.png);
}
.board_icon .board_on2 {
    background-image: url(../images/on2.png);
}
.board_icon .board_off {
    background-image: url(../images/off.png);
}
.board_icon .board_redirect {
    background-image: url(../images/redirect.png);
    background-position: -5px 0;
}
There you go. Does exactly the same thing. Easier to mess with.
ETA: Could even simplify that slightly, but just for selectors.

[Sir Osis of Liver]

  It's only one line less of code, but I'll keep it anyway.

[Antechinus]

Oh for god's sake man, think. It is far simpler code, and easier to edit, regardless of the total number of lines.

It might (hopefully) stop people propagating your code and confusing themselves with a pile of crud they don't need.

[Arantor]

If you can do it better, post it

I'd just update the image, job done.

It was a bad idea using a sprite for this

The more you keep repeating this line, the more I think ever bothering to release 2.1 was a bad idea.

board icons are one of the first things forum owners like to customize

Citation needed.

[marcosbr]

For single image I've been using this for years.
"a.png" is the image I put in the original directory!

I did it:
.board_icon a {
  background: url(../images/a.png) repeat;
AMIGOSDAELETRONICA - Simples e Eficiente!

[Antechinus]

Yes, but most people will not want it repeating, so...

[Sir Osis of Liver]

If you can do it better, post it

I'd just update the image, job done.

That's easier for you than for some people.

It was a bad idea using a sprite for this

The more you keep repeating this line, the more I think ever bothering to release 2.1 was a bad idea.

No, not a bad idea, but after 10 years of development it's unfortunate that we find ourselves debating things that could/should have been done differently.  And besides, I thought sprites were being eliminated in 2.1.

board icons are one of the first things forum owners like to customize

Citation needed.

Here are just a few.  Too lazy busy to find more -

https://www.thekrashsite.com/forum/index.php
https://www.nukeworker.com/forum/
https://ebook-mecca.com/
https://beardownu.com/index.php?action=forum

[Arantor]

And besides, I thought sprites were being eliminated in 2.1.

Only for the backgrounds which didn't need sprites because CSS could do them. The REST of the small images, however, all sprites. You're taking one aspect of it and assuming that one thing fits all, when it really doesn't.



As for your citation, you've found forums that you help. That's biased; show me some evidence that forums you don't manage (on ANY of the forum platforms) that this is something people change early on, and don't just use whatever comes with the theme.

Hint: other forum platforms exist. Other forum platforms have the same drama. Other forum platforms' users don't make a priority for changing this. I pay attention to what's discussed in other venues too to see whether it's really as big a deal as people here say; it usually isn't.

[marcosbr]

For others who are also looking for something similar...
This MOD is very practical and beautiful:

FA Board Icons 

[Pieszyce]

Hello,

Also I have a boardicon problem, but more in the way, how I change the color.

Original


color test


De color test png, I uploaded to the server, after first, to have removed the 3 in the name.
Normally I see a direct change.

Now Nothing, what am I doing wrong??  I very much like too change the colors because of the colors of the forum.
https://polenforum.nl/forum-over-polen/index.php

Who can me give a clue what I have tot do??


SMF 2.1.3 © 2022, Simple Machines,
TinyPortal 2.2.2 © 2005-2022
SMF Default Theme - Curve2
Optimus 2.10.5 [12.04.22]

[Sir Osis of Liver]

Board index is loading /Themes/default/images/boardicons.png, is that the file you've replaced?