Ibai Posted November 8, 2015 Share Posted November 8, 2015 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 Link to comment Share on other sites More sharing options...
Day_ Posted November 8, 2015 Share Posted November 8, 2015 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 Link to comment Share on other sites More sharing options...
Ibai Posted November 8, 2015 Author Share Posted November 8, 2015 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. Link to comment Share on other sites More sharing options...
Day_ Posted November 8, 2015 Share Posted November 8, 2015 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 Link to comment Share on other sites More sharing options...
ehren. Posted November 8, 2015 Share Posted November 8, 2015 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; } Link to comment Share on other sites More sharing options...
Murmel Posted November 11, 2015 Share Posted November 11, 2015 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; } Link to comment Share on other sites More sharing options...
ehren. Posted November 11, 2015 Share Posted November 11, 2015 3 hours ago, Murmel said: Do I have to add also the other two, like: Nope. Just add my code ;) Link to comment Share on other sites More sharing options...
Gabri Posted January 28, 2017 Share Posted January 28, 2017 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... Link to comment Share on other sites More sharing options...
Pete T Posted January 28, 2017 Share Posted January 28, 2017 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 Link to comment Share on other sites More sharing options...
Gabri Posted January 28, 2017 Share Posted January 28, 2017 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? Link to comment Share on other sites More sharing options...
Pete T Posted January 28, 2017 Share Posted January 28, 2017 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. Link to comment Share on other sites More sharing options...
Gabri Posted January 29, 2017 Share Posted January 29, 2017 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.