Retina forum icons

[Ibai]

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

[Day_]

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

[Ibai]

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.   

[Day_]

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 

[ehren.]

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

[Murmel]

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

[ehren.]

3 hours ago, Murmel said:

Do I have to add also the other two, like: 

Nope. Just add my code ;)

[Gabri]

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...

 

 

 

[Pete T]

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 

[Gabri]

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?

[Pete T]

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.

[Gabri]

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