Jump to content

Retina forum icons


Ibai
 Share

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

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...