Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted November 8, 20159 yr Hi there, I like the way a forum can be customized and set a icon to show in the index view. However, it looks awful in retina devices as the image appears pixelated. Could we get a secondary file input to set the retina version? Regards, Ibai
November 8, 20159 yr Upload icons twice the size you want, then in forums > front > index > forumRow line 8 {{if $forum->icon}} <img src="{file="$forum->icon" width="ADD WIDTH" extension="forums_Icons"}" class='ipsItemStatus ipsItemStatus_custom {{if !\IPS\forums\Topic::containerUnread( $forum ) && !$forum->redirect_on}}ipsItemStatus_read{{endif}}'> {{else}} Add the width of half the icon size. Do this with the logo as well, upload a logo twice the size then in core > front > global > logo line 3 <a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" width='ADD WIDTH' height='ADD HEIGHT' alt='{setting="board_name" escape="true"}'></a> I've done this myself at http://dcfcfans.uk
November 8, 20159 yr Author 4 hours ago, daveoh said: Upload icons twice the size you want, then in forums > front > index > forumRow line 8 {{if $forum->icon}} <img src="{file="$forum->icon" width="ADD WIDTH" extension="forums_Icons"}" class='ipsItemStatus ipsItemStatus_custom {{if !\IPS\forums\Topic::containerUnread( $forum ) && !$forum->redirect_on}}ipsItemStatus_read{{endif}}'> {{else}} Add the width of half the icon size. Do this with the logo as well, upload a logo twice the size then in core > front > global > logo line 3 <a href='{setting="base_url"}' id='elLogo' accesskey='1'><img src="{$logo}" width='ADD WIDTH' height='ADD HEIGHT' alt='{setting="board_name" escape="true"}'></a> I've done this myself at http://dcfcfans.uk Thanks @daveoh, your suggestion is quite easy. However, whenever IPS updates that file, we will lose this feature. I was wondering if they could code this in the base of the app.
November 8, 20159 yr 3 hours ago, Ibai said: Thanks @daveoh, your suggestion is quite easy. However, whenever IPS updates that file, we will lose this feature. I was wondering if they could code this in the base of the app. I agree would be nice but the chances of these 2 templates being changed during upgrades are slim so you're pretty safe editing these templates
November 8, 20159 yr A better solution is to add css to custom.css which will allow you to have unmodified template files. That css file is also untouched during upgrades, so your modifications will persist. :) .ipsItemStatus_custom{ width: 40px; } Same applies for the logo.. #elLogo img{ width: 200px; }
November 11, 20159 yr Thanks for the hint :-). Do I have to add also the other two, like: .ipsItemStatus_custom{ width: 40px; } .ipsItemStatus{ width: 40px; } .ipsItemStatus_read{ width: 40px; }
November 11, 20159 yr 3 hours ago, Murmel said: Do I have to add also the other two, like: Nope. Just add my code ;)
January 28, 20178 yr On 11/9/2015 at 0:25 AM, ehren. said: A better solution is to add css to custom.css which will allow you to have unmodified template files. That css file is also untouched during upgrades, so your modifications will persist. .ipsItemStatus_custom{ width: 40px; } Same applies for the logo.. #elLogo img{ width: 200px; } Works fine in my IPB 4 4.1.17.1, thanks. Any CSS for modify the dimensions of the icons on mobile view? I think are so small in mobile views...
January 28, 20178 yr 1 hour ago, Gabri said: Works fine in my IPB 4 4.1.17.1, thanks. Any CSS for modify the dimensions of the icons on mobile view? I think are so small in mobile views... you need add @media screen and (max-width: 767px) { and then add your custom css but if want work table need add another css if want different @media screen and (max-width: 979px) { <--- only if want table be different
January 28, 20178 yr Hello! Thanks for the info. I’m not an expert in those features, could you explain a bit more in detail what steps have I to do? Thanks a lot?
January 28, 20178 yr 3 minutes ago, Gabri said: Hello! Thanks for the info. I’m not an expert in those features, could you explain a bit more in detail what steps have I to do? Thanks a lot? sure all css need to be added into custom.css so we need do this @media screen and (max-width: 767px) { .ipsItemStatus_custom{ width: 40px; } } that will only be viewable to mobile change the bold css to what you need it for and will work.
January 29, 20178 yr Hello @Theme Tent UK, Thanks to your css and your suggestion, i test some versions i and i made my own css (in the custom css) for the size of the responsive icons on phones, thats work fine for me. Thanks a lot for your help .cForumRow .ipsItemStatus_custom { max-width: 50px; margin-right: 10px; }
Archived
This topic is now archived and is closed to further replies.