Avatar of who last posted on the index

I installed this yesterday on my forum (www.theeafl.com) and it enhances the home page considerably.

However, I have run into a problem. I use temporary themes on my forum which means I am changing the colour scheme back and forth a couple of times a week. The secondary colour scheme serves as a reminder that it's the last day before our "week" advances to the next.

I copied the CSS and Javascript over to the other theme, but then when I switched back to the original theme again, the avatars on the home page had grown to their full size (or close to full size) and other CSS code had disappeared.   

Can someone show me what I am doing wrong and why this is happening?   

The tutorial was at https://help.forumotion.com/t132473-avatar-of-who-last-posted-on-the-index#889883

It works perfectly until I change the theme.

Thanks in advance.

Hi

Because it would take time for your computer to re-design the cache and cookies you have to the new one . You can also try re-synchronizing your forum in AP < Generals < configuration < Resync: Yes < Save

Clear your cookies and cache if you want as well or give the forum time to adapt to the style.

On another note: In changing themes, the old CSS you had would naturally be deleted and the only way for you to retrieve them is if you have the back-up for it, sorry.

Regards,
Pizza Boi

I have the other themes saved and have tried to save the CSS and the JavaScript to both themes. But when I swap them around, it seems to delete the CSS.

Are you saying there is nothing that can be done about that, other than to copy/paste them every time I change the forum appearance?

Hi

That's right, we cannot do anything about that. Also, the moment you change forum version, some of the codes, if not, most will not work for your forum anymore and you have to re-write them according to the version you have.

Regards,
Pizza Boi

Hello GBDawg1,

If you're constantly changing your theme / version then the CSS related to the script will be deleted. The only way to get past this would be to place the CSS within the script and append it to the head element.

Change your script to :

Code:

       $(function(){
            
          $('head').append('<style>.mini_ava{float:left;}.mini_ava img{width:40px;height:40px;margin: 0 5px;}</style>');
        
          if(!window.localStorage) return;
        
          // Avatar by default
            var default_avatar= 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
        
          // Time of cache, here : 24hrs * 60m * 60s * 1000ms so one day
            var caching_time= 24*60*60*1000;
        
          // Time of cache in case of error, here : 60s * 1000ms so one minute
            var caching_error= 60*1000;
        
          var set_avatar= function(id) {
                $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
            };
        
          var get_avatar= function(id) {
                if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
                {
                    localStorage.setItem('d_ava'+id, default_avatar);
                    $.get('/u'+id, function (d){
                        localStorage.setItem('t_ava'+id,+new Date);
                        localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                        set_avatar(id);
                    });
                }
                return localStorage.getItem('d_ava'+id);
            };
        
          var to_replace= {};
        
          $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
                to_replace[$(this).attr('href').substr(2)]= 1;
                $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
            });
        
          for(i in to_replace)
            {
                set_avatar(i);
            };
        
      });

Then you will not need to add the css code to your CSS anymore.