Foren / National / Russian / Скины и дизайн / Возможно кому то полезные украшательства в скинах

1) Можно создать для модуля users экстраполе к примеру PHP.usr.profile.user_hide_hints - радиобокс Не показывать мне подсказки. По умолчанию ноль, если решает юзер что ему они НЕ нужны - то 1. 

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="#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="#collapseHintmarket" aria-expanded="false" aria-controls="collapseHintmarket" id="collapseHintmarketToggle">Показать "как это работает" - то есть подсказку</a>