Собственный no-avatar v2

<div class="letter-ava" style="background-color: <?substr($_AOL$,0,7)?>;">  
  <div class="letter" style="color: <?substr($_AOL$,-7)?>;"><?substr($_USERNAME$,0,1)?></div>  
  </div>

.letter-ava {  
  width: 150px;  
  height: 150px;  
  background-color: #000000; /* стандартный цвет фона аватара */  
  font-size: 0.001px;  
  }  
  .letter-ava:before {  
  content: '';  
  display: inline-block;  
  height: 100%;  
  vertical-align: middle;  
  }  
  .letter-ava .letter {  
  color: #ffffff; /* стандартный цвет буквы аватара */  
  font-size: 61px;  
  text-align: center;  
  vertical-align: middle;  
  display: inline-block;  
  width: 100%;  
  max-width: 100%;  
  box-sizing: border-box;  
  }

<script>  
  $(document).ready(function(){  
  $('#siF3').attr('readonly',true); // делаем поле только для чтения  
  $('#siF3').hide(); // скрываем поле  
  var ava_color_bg_def = '#ff8040'; // стандартный цвет фона  
  var ava_color_lt_def = '#ffffff'; // стандартный цвет буквы  
  $('#siF3').after('<div class="letter-ava"><div class="letter"><?substr($USERNAME$,0,1)?></div></div><br><input id="ava-color-bg" type="color" value="'+ava_color_bg_def+'" /> <input id="ava-color-lt" type="color" value="'+ava_color_lt_def+'" />'); // добавляем предпросмотр аватара и кнопки выбора цвета  
  var ava_colors = $('#ava-color-bg').val()+','+$('#ava-color-lt').val(); // записываем в переменную стандартные значения кнопок цвета  
  if ($('#siF3').val()!='') { // если поле не пустое  
  ava_colors = $('#siF3').val(); // записываем в переменную значение поля  
  $('#ava-color-bg').val(ava_colors.substr(0,7)); // присваиваем значение для кнопки выбора цвета фона  
  $('#ava-color-lt').val(ava_colors.substr(-7)); // присваиваем значение для кнопки выбора цвета буквы  
  $('.letter-ava').css('background-color',ava_colors.substr(0,7)); // меняем цвет фона на предпросмотре  
  $('.letter-ava .letter').css('color',ava_colors.substr(-7)); // меняем цвет буквы на предпросмотре  
  } else { // иначе, если поле пустое  
  $('#siF3').val(ava_colors); // записываем в поле стандартные значения цветов  
  }  
  $('#ava-color-bg').change(function(){ // выбор цвета фона  
  ava_colors = $('#ava-color-bg').val()+','+$('#ava-color-lt').val(); // записываем в переменную цвет фона и буквы  
  $('#siF3').val(ava_colors); // записываем в поле значения цветов  
  $('.letter-ava').css('background-color',ava_colors.substr(0,7)); // меняем цвет фона на предпросмотре  
  $('.letter-ava .letter').css('color',ava_colors.substr(-7)); // меняем цвет буквы на предпросмотре  
  });  
  $('#ava-color-lt').change(function(){ // выбор цвета буквы  
  ava_colors = $('#ava-color-bg').val()+','+$('#ava-color-lt').val(); // записываем в переменную цвет фона и буквы  
  $('#siF3').val(ava_colors); // записываем в поле значения цветов  
  $('.letter-ava').css('background-color',ava_colors.substr(0,7)); // меняем цвет фона на предпросмотре  
  $('.letter-ava .letter').css('color',ava_colors.substr(-7)); // меняем цвет буквы на предпросмотре  
  });  
  });  
  </script>