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

Kopusha
#43206 2017-12-15 17:53

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>