Страница 1 из 11
Форум сайта ZorNet.Ru » Раздел для uCoz » HTML коды для сайта uCoz » Изменить вид checkbox в личных данных для uCoz
Изменить вид checkbox в личных данных для uCoz
Kosten
Дата: Суббота, 25.11.2017, 19:53 | Сообщение 1
Администраторы
Сообщений:15987
Награды: 51


У вас появилась возможность изменить дизайн функций на личных данных, где каждый пользователь может изменить. По умолчанию на конструкторе uCoz установлены стандартные, но после как вы пропишите стили, то все кардинально изменится, в плане визуализация. Изменение только произойдет в опциях пользователя, что безусловно будет смотреться намного стильные и под оригинальные или уникальные шаблоны, будет отличным решением.

Сейчас у вас так идет:



После как пропишите стили, кардинально изменится:



в CSS:

Код
input[type=checkbox] {vertical-align:top;margin:0 3px 0 0;width:17px;height:17px;}  
input[type=checkbox]:not(checked),input[type=radio]:not(checked){position:absolute;opacity:0;}  
input[type=checkbox]:not(checked) + label {position: relative; padding: 0 0 0 60px;}  
input[type=checkbox]:not(checked) + label:before {content:'';position:absolute;top:-4px;left:0;width:50px;height:26px;border-radius:13px;background:#FF8F8F;box-shadow:inset 0 2px 3px rgba(0,0,0,.2);}  
input[type=checkbox]:not(checked) + label:after {content:'';position: absolute;top:-2px;left: 2px;width:22px;height:22px;border-radius:10px;background: #FFF;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition:all 0.3s;}  
input[type=checkbox]:checked + label:before {background: #68C3A3;}  
input[type=checkbox]:checked + label:after {left: 26px;}  
input[type=radio]:not(checked) + label {position: relative;padding: 0px 0px 0px 30px;}  
input[type=radio]:not(checked) + label:before {content:'';position:absolute;top:-4px;left:2px;width:22px;height:22px;border:1px solid #55A086;border-radius:50%;background: #FFF;}  
input[type=radio]:not(checked) + label:after {content:'';position:absolute; top:-3px;left:3px;width:22px;height:22px;border-radius:50%;background:#68C3A3;box-shadow:inset 0 1px 1px rgba(0,0,0,.5);opacity:0;transition:all 0.3s;}  
input[type=radio]:checked + label:after {opacity:1;}  
label {line-height: 30px;}


Автор: uGarts
Прикрепления: 7823195.png(10Kb) · 9664523.png(12Kb)
Страна: (RU)
Kosten
Дата: Суббота, 25.11.2017, 20:00 | Сообщение 2
Администраторы
Сообщений:15987
Награды: 51


Что также в окне все инструменты по дизайн изменяются.

Страна: (RU)
-SAM-
Дата: Воскресенье, 26.11.2017, 14:20 | Сообщение 3
Vip
Сообщений:311
Награды: 16


Цитата Kosten ()
Автор: uGarts
Не автор, аналогично как и здесь - стили взяты из сети.
Цитата Kosten ()
Что также в окне все инструменты по дизайн изменяются.
Из-за того, что стили были подключены ко всему сайту, а не к странице или же переписаны под идентификатор (например, на странице нужной в блоке, в котором находятся эта форма редактирования, прописать id="checkedit", потом перед стилями этими писать #checkedit, чтобы можно было в общую таблицу стилей подключать и(или) не видоизменяло другие чекбоксы - по сайту или же где-то в другом месте на выбранной странице).




Сообщение отредактировал
-SAM- - Воскресенье, 26.11.2017, 14:26
Страна: (UA)
Форум сайта ZorNet.Ru » Раздел для uCoz » HTML коды для сайта uCoz » Изменить вид checkbox в личных данных для uCoz
Страница 1 из 11
Поиск: