Options for select, radio and checklistbox (comma sep.) 0,1 

Default value 0

2) Можно украисть стандартный радио 

• Base HTML в настройках экстраполя - 
  <label><input type="radio" name="{$name}" value="{$value}"{$checked} /><span><label></label></span></label>
• В самом TPL получить такую конструкцию
  <span class="switchradio-light switch-blue"><label><input type="radio" name="ruserhide_hints" value="0" checked="checked"><span><label></label></span></label> <label><input type="radio" name="ruserhide_hints" value="1"><span><label></label></span></label></span>
  У меня в users.profile.tpl так

  <div class="row _padding-bottom-20">
  <div class="col-md-4 col-lg-3">
  	<label class="form-control-label">{USERS_PROFILE_HIDE_HINTS_TITLE}:</label>
  </div>
  <div class="col-md-8 col-lg-9">
  	<span class="switchradio-light switch-blue">{USERS_PROFILE_HIDE_HINTS}</span>
  </div>
  </div>
  

   

• В css такая у меня простыня (для разных типов и цветов радиобоксов)

  .switchradio-light,
  .switchradio-light input,
  .switchradio-light label input + span,
  .switchradio-light label input + span label,
  .switchradio-light label input:checked + span label,
  .switchradio-light label input[value="yes"]:checked + span,
  .switchradio-light label input[value="no"]:checked + span,
  .switchradio-light label input[value="1"]:checked + span,
  .switchradio-light label input[value="0"]:checked + span,
  .switchradio-light label input[value="full"]:checked + span,
  .switchradio-light label input[value="gallery"]:checked + span{
      position: absolute;
      vertical-align: middle;
      width:30px;
      height:11px;
      cursor: pointer;
      font-size: 11px;
  }
  .switchradio-light label input + span label{
      overflow: hidden;
      line-height:11px;
      text-align: center;
  }
  .switchradio-light,
  .switchradio-light input,
  .switchradio-light label input + span{
      position: absolute;
  }
  .switchradio-light label input + span{
      top:0px;
  }
  .switchradio-light{
      position:relative;
      display:inline-block;
      -moz-user-select: none;
      -khtml-user-select: none;
      user-select: none;
  }
  .switchradio-light input{
      top:-4px; left:0;
      opacity: 0;
      z-index:1;
  }
  .switchradio-light input:checked{
      z-index:0;
  }
  .switchradio-light label input[value="yes"] + span label, .switchradio-light label input[value="1"] + span label, .switchradio-light label input[value="full"] + span label{
      text-indent: -14px; 
      color:white;
  }
  .switchradio-light label input[value="no"] + span label, .switchradio-light label input[value="0"] + span label, .switchradio-light label input[value="gallery"] + span label{
      text-indent: 14px; 
  	color: rgba(219,30,6,1);
  }
  .switchradio-light label input[value="yes"] + span, .switchradio-light label input[value="1"] + span, .switchradio-light label input[value="full"] + span{
      background: #eeeeee; 
  }
  .switchradio-light.switch-blue label input[value="yes"] + span, .switchradio-light.switch-blue label input[value="1"] + span, .switchradio-light.switch-blue label input[value="full"] + span{
      background: #eeeeee; 
  }
  .switchradio-light label input[value="no"] + span, .switchradio-light label input[value="0"] + span, .switchradio-light label input[value="gallery"] + span{
       background-color: rgba(221, 221, 221, 0.51);
  }
  .switchradio-light label input[value="no"]:checked + span, .switchradio-light label input[value="0"]:checked + span, .switchradio-light label input[value="gallery"]:checked + span{
      left:0px;
  }
  .switchradio-light label input[value="yes"]:checked + span, .switchradio-light label input[value="1"]:checked + span, .switchradio-light label input[value="full"]:checked + span{
      right:0px;
  }
  .switchradio-light label input + span label{
      width:0px; 
  }
  .switchradio-light label input + span{
      width:8px;
  }
  .switchradio-light label input[value="no"] + span, .switchradio-light label input[value="0"] + span, .switchradio-light label input[value="gallery"] + span{
      left:22px;  
  }
  .switchradio-light label input[value="yes"] + span, .switchradio-light label input[value="1"] + span, .switchradio-light label input[value="full"] + span{
      right:22px;  
  }
  .switchradio-light label input + span label,
  .switchradio-light label input:checked + span label,
  .switchradio-light label  input + span,
  .switchradio-light label  input:checked  + span{    
      -webkit-transition:all 0.2s linear;
      -moz-transition:all 0.2s linear;
      -o-transition:all 0.2s linear;
      transition:all 0.2s linear;
  }
  .switchradio-light label   input[ value="no"] + span:after, .switchradio-light label   input[ value="0"] + span:after, .switchradio-light label   input[ value="gallery"] + span:after  {
      position:absolute; 
      top:0px;
      left:0px;
  	content: "";
      position: absolute;
      display: inline-block;
      width: 15px;
      height: 15px;
      background-color: #CD2122;
      border-radius: 15px;
      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
      left: -5px;
      top: -2px;
      transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease;    content:'';
  	z-index: 1000;
  }
  .switchradio-light.switch-blue label input[ value="no"] + span:after, .switchradio-light.switch-blue label input[ value="0"] + span:after, .switchradio-light.switch-blue label input[ value="gallery"] + span:after  {
      background-color: #3b99fc;
  }
  .switchradio-light label   input[ value="0"] + span:after:active:after, .switchradio-light label   input[ value="no"] + span:after:active:after, .switchradio-light label   input[ value="gallery"] + span:after:active:after {
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08); }
  .switchradio-light,
  .switchradio-light input,
  .switchradio-light label input + span,
  .switchradio-light label   input[ value="0"] + span:after, .switchradio-light.swbox label   input[ value="0"] + span:after, .switchradio-light label   input[ value="no"] + span:after, .switchradio-light.swbox label   input[ value="no"] + span:after, .switchradio-light label   input[ value="gallery"] + span:after, .switchradio-light.swbox label   input[ value="gallery"] + span:after{
      border-radius:30px; 
  }
  
  

  Можно переписывать как хочется.
  
  Я создал себе сколько нужно.
  Как это выглядит
  
  
  Или в редактировании страницы
  

• У вас есть красивый чекбокс в профиле с возможность выбора показывать юзерам подсказки или нет. Дальше как это использовать.
• В HEАDER шаблона 

  <!-- IF {PHP.usr.profile.user_hide_hints} == '1' --><!-- IF {PHP.usr.profile.user_logcount} >= '100' -->
  <style media="screen" type="text/css">
  ._old_user {display: none !important;}
  </style>
  <!-- ENDIF --><!-- ENDIF -->
  

  В любом месте стиль _old_user для включивших не показывать или уже 100 раз зашедших на сайт людей выключит нужный только новичкам блок. То есть выключит совсем без возможности его увидеть. 
• Если надо просто скрыть но дать возможность посмотреть если надо - то так
  В любом месте
    <a class="_big_hint" data-toggle="collapse" href="https://www.cotonti.com/#collapseHintmarket" aria-expanded="false" aria-controls="collapseHintmarket" id="collapseHintmarketToggle">Показать "как это работает" - то есть подсказку</a>
  
  <div class="_padding-bottom-30 bd-example collapse <!-- IF {PHP.usr.profile.user_hide_hints} != '1' --><!-- IF {PHP.usr.profile.user_logcount} <= '100' -->show<!-- ENDIF --><!-- ENDIF -->" id="collapseHintmarket">
  Тут сама подсказка или полезная информация
  </div>
  Это для стандартного коллапса бутстрапа - если вы или выбрали в профиле не показывать или более 100 раз зашли - то будет скрыт контент и ссылка с его показыванием видна.
  Для новичков с показом подсказок - виден контент сразу.
  Как это выглядит
  Это скрытый контент
  
  Это открытый контент - там будет карусель сос лайдами - как работает магазин (когда нарисуют слайды))))
  
• Дальше - больше. Прямо в том месте где есть скрывающийся блок можно так

  <script type="text/javascript">
  document.addEventListener("DOMContentLoaded",function(){
  	if($.cookie('collapseHintmarket') === 'on')
  	    $('#collapseHintmarket').collapse('hide');
  	$('#collapseHintmarketToggle').click(function() { 
  	    // Toggle cookie value
  	    if($.cookie('collapseHintmarket') === 'on')
  	        $.cookie('collapseHintmarket', 'off');
  	    else
  	        $.cookie('collapseHintmarket', 'on');
  	});
  });
  </script>
  

  То есть у нас есть куки collapseHintmarket которой по умолчанию нету - и контент будет показан (если условия выше PHP.usr.profile.user_hide_hints и PHP.usr.profile.user_logcount не противоречат.)
  Но нажав на кнопку с id="collapseHintmarketToggle" мы не только скроем контент но и запишем куку в значение противоположное тому что есть. Если в 1 раз скрыли контент то кука станет on - и при следующем открытии этой страницы контент БУДЕТ СКРЫТ НЕ СМОТРЯ НА условия выше PHP.usr.profile.user_hide_hints и PHP.usr.profile.user_logcount и что бы его опять открыть опять надо нажать на 
  <a class="_big_hint" data-toggle="collapse" href="https://www.cotonti.com/#collapseHintmarket" aria-expanded="false" aria-controls="collapseHintmarket" id="collapseHintmarketToggle">Показать "как это работает" - то есть подсказку</a>