Custom Topic Icons in Topic Lists

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Custom Topic Icons in Topic Lists

Post by EA117 »

Nachtschade wrote: Mon Apr 29, 2019 8:58 pm edit: okay figured it out. right-click -> inspect.

It's empty here:
I would have to see the full screen shot of the F12 work area to say for sure, but based on the clues in this partial screen shot, I would say it's the "<div class="list-inner">" which was selected in that screen shot, and not the "<dt>" that is one level up from the <div class="list-inner">. You're correct there isn't a background-image style applied to that <div> element, but it's not the one we were looking for.

You don't have to include the actual web page view / left-hand side if you don't want to show the information being displayed on the web page. But the right-hand side of the F12 view has details that are cut off in your partial screen shot, and need to be seen in order to make sense of what is being shown.

Note that it's fine if your "right-click, Inspect" lands you on the wrong element initially. Up in the top right portion of the Chrome F12 window that looks like an HTML editor, you can look at see that the <div> element is currently selected, and simply click on the <dt> element that is above it in order to select the item intended.

inspect-dt.png
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Custom Topic Icons in Topic Lists

Post by Mannix_ »

Nachtschade wrote: Mon Apr 29, 2019 9:01 pm You think the php version is the issue?
I think something might break during the upgrade to 3.2.5 but checking if it works on other version of php would do no harm :)
Nachtschade wrote: Mon Apr 29, 2019 9:00 pm My board is private. It's a closed forum for friends only. I could essentially make an account that has only access to a test subforum if nothing else but I also prefer to learn and do it myself.
I get that. That would be enough for us to check the problem.
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
Nachtschade
Registered User
Posts: 107
Joined: Thu Nov 15, 2012 12:29 am
Location: Netherlands
Name: Marcel

Re: Custom Topic Icons in Topic Lists

Post by Nachtschade »

EA117 wrote: Tue Apr 30, 2019 12:15 am
Nachtschade wrote: Mon Apr 29, 2019 8:58 pm edit: okay figured it out. right-click -> inspect.

It's empty here:
I would have to see the full screen shot of the F12 work area to say for sure, but based on the clues in this partial screen shot, I would say it's the "<div class="list-inner">" which was selected in that screen shot, and not the "<dt>" that is one level up from the <div class="list-inner">. You're correct there isn't a background-image style applied to that <div> element, but it's not the one we were looking for.

You don't have to include the actual web page view / left-hand side if you don't want to show the information being displayed on the web page. But the right-hand side of the F12 view has details that are cut off in your partial screen shot, and need to be seen in order to make sense of what is being shown.

Note that it's fine if your "right-click, Inspect" lands you on the wrong element initially. Up in the top right portion of the Chrome F12 window that looks like an HTML editor, you can look at see that the <div> element is currently selected, and simply click on the <dt> element that is above it in order to select the item intended.


inspect-dt.png
Gotcha!

How about this then:

Image

Looks like we're getting somewhere. Maybe. :)

edit: hovering over the yellow exclamation mark says: "invalid property value".
..vaak rankend of klimmend..
User avatar
Nachtschade
Registered User
Posts: 107
Joined: Thu Nov 15, 2012 12:29 am
Location: Netherlands
Name: Marcel

Re: Custom Topic Icons in Topic Lists

Post by Nachtschade »

Mannix_ wrote: Tue Apr 30, 2019 6:38 am
Nachtschade wrote: Mon Apr 29, 2019 9:01 pm You think the php version is the issue?
I think something might break during the upgrade to 3.2.5 but checking if it works on other version of php would do no harm :)
It's possible that something broke. I did have a lot of trouble. However everything else so far has ran very smoothly since I beat the upgrade hurdles. It doesn't 'feel' to me like something has broken during the upgrade, at least not something that can't be repaired without redoing the upgrade again. Of course, I'm not an expert.
Nachtschade wrote: Mon Apr 29, 2019 9:00 pm My board is private. It's a closed forum for friends only. I could essentially make an account that has only access to a test subforum if nothing else but I also prefer to learn and do it myself.
I get that. That would be enough for us to check the problem.
I understand. Last ditch effort imo. This is also not a dealbreaker issue of course. ;)
..vaak rankend of klimmend..
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Custom Topic Icons in Topic Lists

Post by EA117 »

Nachtschade wrote: Tue Apr 30, 2019 9:23 pm Looks like we're getting somewhere. Maybe. :)

edit: hovering over the yellow exclamation mark says: "invalid property value".
I can't answer definitively from the shown info, but my suspicion based on the hints shown there is that your icon file name contains a space. i.e. "wonen icon.png". And the web browser's CSS parser is saying "background-image:" does not take two separate parameters of "url(./images/icons/misc/wonen" and "icon.png)", and is therefore an invalid property value.

Indeed, the viewforum_body.html template does not attempt to put this path in quotes. Note right there in the F12 view, right in the place where you're seeing the yellow warning triangle, you can click on the "url(./images/icons/misc/wonen icon.png)" path and edit it right there in the F12 view. Add quotes around the path inside the "url()" parameter, press enter, and you'll instantly see the results of your change.

Short-term workaround: Replace your existing custom icon definition with one that doesn't use a space in the name of the image file.

Long-term correct fix: the phpBB template should put these paths in quotes, since phpBB doesn't control whether there may be a space in the file name.

Checked the viewtopic_body.html page, and indeed where the custom post icon gets displayed above the post itself, the path is in quotes, in addition to being just a normal <img src=""> element attribute rather than CSS.
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: Custom Topic Icons in Topic Lists

Post by Mannix_ »

EA117 wrote: Tue Apr 30, 2019 9:55 pm I can't answer definitively from the shown info, but my suspicion based on the hints shown there is that your icon file name contains a space. i.e. "wonen icon.png". And the web browser's CSS parser is saying "background-image:" does not take two separate parameters of "url(./images/icons/misc/wonen" and "icon.png)", and is therefore an invalid property value.
I can confirm that this is the issue just tested it myself. So just remove the space from the name and it should work.
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
User avatar
canonknipser
Registered User
Posts: 2096
Joined: Thu Sep 08, 2011 4:16 am
Location: Germany
Name: Frank Jakobs
Contact:

Re: Custom Topic Icons in Topic Lists

Post by canonknipser »

EA117 wrote: Tue Apr 30, 2019 9:55 pm Short-term workaround: Replace your existing custom icon definition with one that doesn't use a space in the name of the image file.
This would be my preferred solution:
even if most major operating systems nowadays don't have obvious problems using spaces (and other characters like diacretic characters and special symbols) in file and folder names, it can lead to unexpected side effects when transferring files between operating systems or file system. So from years of experience, use only letters a-z, A-Z, numerics 0-9 and some special characters (._-) in file and folder names to keep them compatible over system boundaries (and be aware that windows still doesn't really see any difference between upper and lower alphabetic characters :geek: - they tell you it is a compatibility thing :roll: )
Greetings, Frank
phpbb.de support team member
English is not my native language - no support via PM or mail
New arrival - Extensions and scripts for phpBB
User avatar
Tastenplayer
Registered User
Posts: 999
Joined: Thu Jul 03, 2014 9:20 pm
Location: Village in the middle of Switzerland
Name: Jutta Koliofotis
Contact:

Re: Custom Topic Icons in Topic Lists

Post by Tastenplayer »

Why wonen icon.png ? (On my server, a file with two unrelated words didn't work.)
you write wonenicon.png or wonen_icon.png
or wonen.png ( I mean the icon in the name is your problem)
More of my styles you can find in my phpBB Style Board & More
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.
🎨 All my styles are updated to 3.3.8 and can be downloaded here
User avatar
EA117
Registered User
Posts: 2158
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Custom Topic Icons in Topic Lists

Post by EA117 »

EA117 wrote: Tue Apr 30, 2019 9:55 pm Long-term correct fix: the phpBB template should put these paths in quotes, since phpBB doesn't control whether there may be a space in the file name.
...either that, or make the ACP Topic Icons "Add" page not list them and allow them to be added.
https://tracker.phpbb.com/browse/PHPBB3-16040
User avatar
Nachtschade
Registered User
Posts: 107
Joined: Thu Nov 15, 2012 12:29 am
Location: Netherlands
Name: Marcel

Re: Custom Topic Icons in Topic Lists

Post by Nachtschade »

EA117 wrote: Tue Apr 30, 2019 9:55 pm
Nachtschade wrote: Tue Apr 30, 2019 9:23 pm Looks like we're getting somewhere. Maybe. :)

edit: hovering over the yellow exclamation mark says: "invalid property value".
I can't answer definitively from the shown info, but my suspicion based on the hints shown there is that your icon file name contains a space. i.e. "wonen icon.png". And the web browser's CSS parser is saying "background-image:" does not take two separate parameters of "url(./images/icons/misc/wonen" and "icon.png)", and is therefore an invalid property value.

Indeed, the viewforum_body.html template does not attempt to put this path in quotes. Note right there in the F12 view, right in the place where you're seeing the yellow warning triangle, you can click on the "url(./images/icons/misc/wonen icon.png)" path and edit it right there in the F12 view. Add quotes around the path inside the "url()" parameter, press enter, and you'll instantly see the results of your change.

Short-term workaround: Replace your existing custom icon definition with one that doesn't use a space in the name of the image file.

Long-term correct fix: the phpBB template should put these paths in quotes, since phpBB doesn't control whether there may be a space in the file name.

Checked the viewtopic_body.html page, and indeed where the custom post icon gets displayed above the post itself, the path is in quotes, in addition to being just a normal <img src=""> element attribute rather than CSS.
Wow! It's always the silly things that cause problems, right? I just happened to randomly test one icon of which the filename had a space. 90% of them don't.

I tested it and yes, this was the solution to the problem.

Thanks a lot for figuring it out!

edit: this also brings up something interesting. These icon files have all been the same for many years on my old forum. One thing that is different now between my 3.2.5 and my old 3.0.9 versions of phpbb is the way files are added. Currently you upload them through ftp in your own directory but on my old board I had no access to that and uploaded them remotely to a sharing site. I know this because in my topic icons list in acp there is still a list with links to my old files that were carried over with upgrading but do no longer work. The links are still intact but the file isn't 'loaded' in acp and thus doesn't work.

Image

I see no possibility to link remotely to icons in the ACP anymore. Maybe it was some sort of mod that did that? Or maybe it was just by default in the old phpbb version.

This also explains why the space problem was never apparent before since the host (Imgur) renamed all filenames with a hash without spaces in them.

But it also signifies a difference between then and now in the way I added topic icons which may or may not be related to difference in topic icons being displayed fully in topic listings on the old phpbb version but no longer in the current. I am not sure, maybe it's irrelevant but I'd figured it was worth pointing out.
Last edited by Nachtschade on Wed May 01, 2019 9:04 pm, edited 1 time in total.
..vaak rankend of klimmend..
User avatar
Nachtschade
Registered User
Posts: 107
Joined: Thu Nov 15, 2012 12:29 am
Location: Netherlands
Name: Marcel

Re: Custom Topic Icons in Topic Lists

Post by Nachtschade »

Tastenplayer wrote: Wed May 01, 2019 5:21 pm Why wonen icon.png ? (On my server, a file with two unrelated words didn't work.)
you write wonenicon.png or wonen_icon.png
or wonen.png ( I mean the icon in the name is your problem)
I never gave any thought to not putting spaces in filenames.

I can definitely understand why the programming crowd would frown upon this and I've certainly learned a lesson here.
..vaak rankend of klimmend..
Post Reply

Return to “[3.2.x] Styles Support & Discussion”