Форумы / National / Russian / Скины и дизайн / Стили для формы настроек в users.profile.tpl

Не могу найти каким образом добавлять стили для формы настроек в users.profile.tpl

Например

 {USERS_PROFILE_AVATAR}

выдает input для загрузки, удаления аватара, то есть несколько полей.

Или

 {USERS_PROFILE_BIRTHDATE}

дата рождения выдает 3 select и каждый отдельно, и надо каждый как то править

А например поле Пол имеет 1 select  и достаточно сделать так

 {USERS_PROFILE_GENDER|cot_rc_modify($this, 'class="uk-select"')} 

и стиль есть

но для тегов которые выдают 2 и более полей просто так добавить стиль не получается, ибо он срабатывает только на первое поле а далее нет.

 Вкаком месте нужно вписывать стиль для таких тегов?

#47373 Argont:

#47370 vpktz:

Не могу найти каким образом добавлять стили для формы настроек в users.profile.tpl

Например {USERS_PROFILE_AVATAR} выдает input для загрузки, удаления аватара, то есть несколько полей.

Или {USERS_PROFILE_BIRTHDATE} дата рождения выдает 3 select и каждый отдельно, и надо каждый как то править

 

А например поле Пол имеет 1 select  и достаточно сделать так {USERS_PROFILE_GENDER|cot_rc_modify($this, 'class="uk-select"')} и стиль есть

но для тегов которые выдают 2 и более полей просто так добавить стиль не получается, ибо он срабатывает только на первое поле а далее нет.

 Вкаком месте нужно вписывать стиль для таких тегов?

тут начать нужно со строк ресурсов,

в файл своей темы

MySkin.php

$R['userimg_existing'] = '<div class="userimg_existing uk-text-center"><img class="uk-border-rounded" src="{$url_file}" alt="" /><hr class="uk-divider-small"><a class="uk-button uk-button-danger" href="{$url_delete}">'.$L['Delete'].'</a></div>';
$R['userimg_selectfile'] = '{$form_input}';
$R['userimg_html'] = '<div class="userimg_{$code}">{$existing}{$selectfile}</div>';
$R['userimg_remove'] = '<a href="{$url}" class="uk-button uk-button-default">'.$L['Delete'].'</a>';
$R['userimg_img'] = '<img src="{$src}" alt="{$alt}" class=" userimg {$class}" />';
$R['userimg_default_avatar'] = '<img src="themes/МОЯТЕМА/img/user-noavatar.webp" alt="'.$L['Avatar'].'" class="avatar" />';


$R['input_select'] = '<select class="uk-select" name="{$name}"{$attrs}>{$options}</select>';
$R['input_select_option'] = '<option value="{$value}"{$selected}>{$title}</option>';


$R['input_date'] =  '<div class="uk-grid-small uk-child-width-expand@s uk-margin-top" data-uk-grid>
<div>
	<label class="uk-form-label">День</label>{$day}
</div>
<div>
	<label class="uk-form-label">Месяц</label>{$month}
</div>
<div>
	<label class="uk-form-label">Год</label>{$year}
</div>
<div>
	<label class="uk-form-label">Часы</label>{$hour}
</div>
<div>
	<label class="uk-form-label">Минуты</label>{$minute}
</div>
</div>';
$R['input_date_short'] =  '<div class="uk-grid-small uk-child-width-1-1@s uk-child-width-1-3@m uk-margin-top" data-uk-grid><div class="uk-width-1-3@m"><label class="uk-form-label">День</label>{$day}</div><div class="uk-width-1-3@m"><label class="uk-form-label">Месяц</label>{$month}</div><div class="uk-width-1-3@m"><label class="uk-form-label">Год</label>{$year}</div></div>';

это уж если совсем по быстрому

а потом уже переопределяем стили, уже в файле стилей своей темы - MySkin.CSS

Добавлено 2 минуты спустя:

обратите внимание на строку №6 приведенного кода выше

МОЯТЕМА заменить на свою

Спасибо большое, совсем забыл про этот инструмент "тема.php".  В нем можно глобально настроить стили. Не совсем нравится так делать, потому как на разнах страницах иногда нужно по разному стилизовать одноподобные поля. 

У меня этом файле только назначения на пагинацию были.

$R['link_pagenav_first'] = '<li><a href="{$url}"{$event}{$rel}> </a></li>';

$R['link_pagenav_gap'] = '<li class="uk-active"></li>';

$R['link_pagenav_last'] = '<li><a href="{$url}"{$event}{$rel}> </a></li>';

$R['link_pagenav_main'] = '<li><a href="{$url}"{$event}{$rel}>{$num}</a></li>';

$R['link_pagenav_next'] = '<li class="uk-text-small"><a href="{$url}"{$event}{$rel}><span uk-icon="chevron-right"></span></a></li>';

$R['link_pagenav_prev'] = '<li class="uk-text-small"><a href="{$url}"{$event}{$rel}><span uk-icon="chevron-left"></span></a></li>';

 Думал можно как то в самом модуле users или прилегающих плагинах, так сказать точечно, редактировать. Но в даном случае и так пойдет, 

Хотя нет, нужно обязательно изменить дефолный input type="file" потому что это не адаптивное и в телефоне не работает корректно

Хотелось бы сделать в стиле uikit 

только без submit оставить просто input Select file

Код в uikit такой 

    <div class="uk-margin" uk-margin>
        <div uk-form-custom="target: true">
            <input type="file" aria-label="Custom controls">
            <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" aria-label="Custom controls" disabled>
        </div>
        <button class="uk-button uk-button-default">Submit</button>
    </div>

Отлично, все сработало.

Хотел еще для input checkbox сделать стили но не получается. Вернее получается сами квадратики принимают стили но  пропадают названия справа от них.

Когда без стилей поле с чекбоксами выглядит так

Когда прописываю стили 

$R['input_checkbox'] = '<input type="checkbox" name="{$name}" value="{$value}" {$attrs} class="uk-checkbox" />';

то сам чек бокс принимает стиль но пропадают названия мезжду чеками

Эти чекбоксы к стати от плагина usercategories

Видимо я что то делаю не правильно

#47384 Argont:

#47383 vpktz:

Отлично, все сработало.

Эти чекбоксы к стати от плагина usercategories

Видимо я что то делаю не правильно

 

usercategories.catcheck.tpl

<!-- BEGIN: MAIN -->
<!-- IF {CAT_LEVEL} == 1 -->
<script src="{PHP.cfg.plugins_dir}/usercategories/js/usercategories.js" type="text/javascript"></script>	
<!-- ENDIF -->
<ul<!-- IF {CAT_LEVEL} == 1 --> id="ucats_check" class="uk-list"<!-- ENDIF -->>
	<!-- BEGIN: CAT_ROW -->
	<li>{CAT_ROW_CHECKBOX}
		<!-- IF {CAT_ROW_SUBCAT} -->
		{CAT_ROW_SUBCAT}
		<!-- ENDIF -->
	</li>
	<!-- END: CAT_ROW -->
</ul>
<!-- END: MAIN -->

моятема.php

$R['input_checkbox'] = '<input class="uk-checkbox" type="hidden" name="{$name}" value="{$value_off}" /><label><input type="checkbox" class="uk-checkbox" name="{$name}" value="{$value}"{$checked}{$attrs} /> {$title}</label>';
$R['input_check'] = '<label><input class="uk-checkbox" type="checkbox" name="{$name}" value="{$value}"{$checked}{$attrs} /> {$title}</label>';

 

Добавлено 7 минут спустя:

и на закуску

<div class="uk-form-controls uk-panel uk-panel-scrollable">
	{USERS_PROFILE_CAT}
</div>														

 

Ого, не много начинаю понимать принцип))) спасибо большое  Argont.

Это не только помогло но и полезно.