Jump to content

Community

Retina forum icons


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites
  • 1 year later...
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...

 

 

 

Edited by Gabri
Link to post
Share on other sites
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 post
Share on other sites
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 post
Share on other sites

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;
}

 

Edited by Gabri
Link to post
Share on other sites
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy