master27

celsoft феноменально. я пытаюсь улучшить Ваш продукт, а вы сопротивляетесь. дело хозяйское. более не беспокою.

я обобщил, ну что вы... конечно, только поставьте себе на телефон с андроидом яндекс-лайт и проверьте. celsoft это пипец.. какая то очень страшная тайна с этой стилизацией, на которую я не могу наткнуться в сети, и сам сделать не могу. Ваше последнее сообщение с "input[type="text"]::-webkit-input-placeholder:before { // your code }" я вообще не понял, к чему это? Такое ощущение, что мы не понимаем друг друга, я вас не понимаю это точно, вроде что то и сказали, а по факту ни на один конкретный вопрос ни одного конкретного ответа. может ещё одну лицензию прикупить... Да. Что тут такого? Форум для этого и есть. Покажите, подскажите, посоветуйте или ссылку дайте где почерпнуть, почитать. Давайте вернёмся к началу. Мне (надеюсь не только мне) требуется: Сделать точно такие же "чекбоксы" и "радио-кнопки" как в админке DLE. 1 без использования скриптов. 2 кроссбраузерно. celsoft дайте конкретный пример или ссылку на один из (сотен, тысяч) сайтов на Dle, где эти условия выполняются. Кстати и в админке можете сделать так же, зачем лишние скрипты использовать?

Под итожу... Вы правы, я провёл некоторые эксперименты, дополнительный класс не даёт нам никаких привилегий, что обращение к инпуту, что к классу инпута, одно и тоже. Вы неправы. Потому что конструкция (только в опросах) блочная (мои посты выше), можно обойтись стилями без js. Вот на скорую руку, для шаблона Default, в стилях меняем блок опросы.... /* Блок: Опросы */ @font-face { font-family: 'FontAwesome'; src: url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../../../engine/skins/fonts/fontawesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } .block_grey { padding: 25px; margin-bottom: 25px; border-radius: 2px; background-color: #e5e5e5; } .block_grey > .title { margin: 0 0 1em 0; font-size: 1em; letter-spacing: 0; } .vote_more { font-size: .9em; margin: -.7em 0 1em 0; } .vote_list { margin: 8% 0; } .vote_list .vote, .vote_list .pollanswer { margin-bottom: 5px; min-height: 25px; position: relative; } /*Курсор на pointer*/ .vote_list .vote > input + label, .vote_list .pollanswer > input + label { cursor: pointer; display: inline-block; padding-left: 25px; position: relative; } /*Прячем инпут*/ .vote_list .vote > input, .vote_list .pollanswer > input { display: none; } /*Заменяем скрытый элемент псевдо классом :before*/ .vote_list .vote > input + label:after, .vote_list .pollanswer > input + label:after { background-color: transparent; border: 2px solid #00695c; border-radius: 2px; box-sizing: border-box; content: ""; display: inline-block; height: 20px; left: 0; position: absolute; top: 1px; transition: all 0.25s ease-in-out 0s; width: 20px; } /*Круглые radio*/ .vote_list .vote > input[type="radio"] + label:after, .vote_list .pollanswer > input[type="radio"] + label:after { border-radius: 50%; } /*При клике на radio*/ .vote_list .vote > input[type="radio"]:checked + label:before, .vote_list .pollanswer > input[type="radio"]:checked + label:before { color: #00695c; content: "\f111"; font-family: "FontAwesome"; left: 4px; position: absolute; top: 0; transform: scale(0.65); } /*При клике на чекбокс*/ .vote_list .vote > input[type="checkbox"]:checked + label:before, .vote_list .pollanswer > input[type="checkbox"]:checked + label:before { color: #00695c; content: "\f00c"; font-family: "FontAwesome"; left: 3px; position: absolute; top: 1px; } .btn-border .icon-votes { width: 16px; height: 14px; margin: -3px 0 0 0; vertical-align: middle; } .vote_votes, .pollallvotes { font-size: .9em; } #dlevotespopupcontent { height: auto !important; overflow: visible !important; } как убрать код в спойлер? Процитирую сам себя.... или дайте ссылку для изучения, возможно ваше решение будут единственно верным и простым. На меня не смотрите, я телемастер, сайты это хобби, и частенько подчёркиваю - "Возможно я не прав". В данном случае процитировал вас не по поводу ".icheck", а что бы вы ещё раз в тему заглянули и здраво проанализировали то, что я пытаюсь вам уже год донести. Если конструкция ("блочная") - мы можем обойтись только стилями. Если конструкция ("инлайновая" + есть любой элемент вместе с инпутом) - мы можем обойтись только стилями. Если конструкция ("дефолтная Dle") - мы НЕ можем обойтись только стилями, требуется скрипт, кстати в модальных окнах тоже требуется отслеживание. Если бы в Dle была или "блочная" или "инлайновая" конструкция, не было бы этой темы. как тут, спорили, спорили, а потом раз и сделали, лучше - лучше. удобнее - удобнее. https://forum.dle-news.ru/topic/71691-стилизация-checkbox-и-radio/?tab=comments#comment-358444

Для простых. https://pr-kenig.ru/blog/view/checkbox-theme там же можете позаимствовать стили. Вы немного не правы, расписал ниже. Вы (и все те, кто будет подобное утверждать - на будущее) тоже немного не правы на счёт классов. Посмотрите ссылку выше (для holistic) и то что я писал выше предыдущими постами, а именно... Все мы живём в 21 веке и всем наверняка приятно видеть на сайтах, в приложениях для телефонов - красивые, удобные, анимированные и т.д. переключатели в виде чек-боксов, радио-кнопок или рычажков-переключателей. Повторюсь, по ссылке выше, это можно сделать, НО это будет работать ТОЛЬКО в "Умных" браузерах - опера, хром, яндекс, НО Вы не забывайте что есть и другие браузеры, например IE11 и Firefox и ЕЩЁ всякие прошлые\действующие\будущие\лайт (которые даже flexbox не понимают) мобильные браузеры. Поэтому для меня подобные аргументы - не аргументы или "факты в студию". По факту НЕОБХОДИМО универсальное решение, которое попытаюсь описать ниже. Тут вы конечно немного схитрили, но приоткрыли завесу, действительно, дополнительных "label" или "span" нету, НО у вашего инпута есть класс "icheck" и мы уже можем обращаться не напрямую к инпуту, а к элементу страницы с определённым классом. Понимаете разницу? Посему второй наводящий вопрос - почему вы для себя добавили класс в инпуты, тем самым облегчив себе задачу, а для нас, пользователей видимой части сайта - нет? Можно немного отойду от темы? (лирика) Давайте разберём пару конструкций, что бы не дублировать код постоянно. 1 - назовём её условно "Блочная". код взял из bootstrap <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Check me out</label> </div> То есть "input + label". 2 - назовём её "Инлайновая" код взял из materializecss <label> <input type="checkbox" class="filled-in" checked="checked" /> <span>Filled in</span> </label> То есть "input" вложен в "label". Как видим обе конструкции подлежат стилизации посредством псевдо-тегов. В "блочной" конструкции мы опираемся в стилях на "input + label" и "input:checked + label" В "инлайновой" конструкции мы опираемся на "input + span" и "input:checked + span" Всё просто и логично, по мне первый вариант предпочтительнее, проще. А в вашей конструкции, что вы нам предлагаете... <label class="comments_subscribe"> <input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe"> Подписаться на комментарии </label> мы должны посредством скриптов добавить в "инпут" класс "icheck" + как подсказал Gameer подключить библиотеку "Uniform" + снова подключить скрипт, который нам вернёт конструкцию... <div class="checkbox"> <label> <div id="uniform-approve" class="checker border-teal-600 text-teal-800"> <span class="checked"> <input id="approve" class="icheck" type="checkbox" checked="" value="1" name="approve"> </span> </div> Опубликовать новость на сайте </label> </div> + подключить у кого нет библиотеку "FontAwesome" и стилизовать. Так что ли? celsoft? То есть вместо того чтобы вам одному подвинуться и изменить конструкцию (край добавить класс в инпут). Вы предлагаете нам (сколько вы говорите пользователей, сотни, несколько сотен? тысячи) изобретать самим, утяжеляя шаблоны... Думаю для всех понятно, что там, где можно обойтись стилями, смысла использования скриптов нету. Простите. Тут должен быть смайлик, который бьётся головой об стену. Замечу, я вам это предлагал в личных сообщениях ещё (4.09.2017 11:38)

Подкорректировал предыдущий скрипт... $("[type=checkbox]").each(function() { var t = $(this), e = $(t).parent('label').addClass('sd-checkbox'), i = $("<span>" + $(e).text() + "</span>"); if (0 < e.length) { t.after(i), $(e).each(function() { $(this).contents().filter(function() { return 3 === this.nodeType && $.trim(this.nodeValue).length }).replaceWith("") }) } }); + стили, или свои пропишите... .sd-checkbox { display: block; margin: 0.25em 0 0.5em 0; position: relative; } .sd-checkbox:hover span:before { border-color: red;/*или меняем на любой цвет*/ } .sd-checkbox input { display: block; float: left; font-size: inherit; height: 1.5em; margin: 0; outline: 0 none; visibility: hidden; width: 1.5em; } .sd-checkbox span { clear: both; cursor: pointer; display: inline; line-height: 1.25em; padding-left: 0.75em; } .sd-checkbox span:before, .sd-checkbox span:after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; } .sd-checkbox span:before { background-color: transparent; border: 2px solid rgba(0, 0, 0, 0.5); border-radius: 0.175em; cursor: pointer; height: 1.25em; transition: background-color 0.35s ease 0s, border-color 0.35s ease 0s; width: 1.25em; } .sd-checkbox input:checked + span:before { background-color: red; border-color: red; } .sd-checkbox input:checked + span:after { border-color: white; border-style: none none solid solid; border-width: 0.25em; height: 0.375em; transform: translate(0.25em, 0.336538em) rotate(-45deg); width: 0.75em; }

я кажется понял, что вы имеете ввиду. проблема вся в том, что все эксперименты я проводил в браузере мозила 43.0.1 - (мне удобнее) и 62.0.3 (на данный момент последняя версия). если я правильно понял (поправьте, могу ошибаться) в ИЕ и Мозила цитирую.. то есть Яндекс, Опера, Хром стилизуют инпуты. Вопросов нет. Вопрос - каким образом выйти из положения чтобы все браузеры поддерживали?. Логично стилизовать не инпут, а любой другой элемент. В таком случае, визуальное оформление, отслеживание состояния инпута сводится к конструкции "input:checked + другой элемен" в моём случае "label" как раз для этих целей, хотя согласен, было бы логичнее применять "спан" и от него отталкиваться. celsoft ответьте, почему вы в админке не стилизовали просто инпуты? а применили конструкцию из дополнительных элементов? не только в правом блоке, ещё опросы в новостях, к ним тоже можете аналогично применить свои стили, потому как конструкция позволяет. По итогу, ткните носом, может чего не знаю, не понимаю, или дайте пример реализации, потому как автор темы и спрашивал.. + без дополнительных скриптов.

Не раз предлагал или отписывался в подобных вопросах. Так же писал в пожелания, но видимо это никому не нужно... Для себя решил скриптом, который возвращает конструкцию из.. <label class="comments_subscribe"> <input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe"> Подписаться на комментарии </label> в конструкцию типа.. <label class="comments_subscribe sd-checkbox"> <input id="allow_subscribe" type="checkbox" value="1" name="allow_subscribe"> <label for="allow_subscribe">Подписаться на комментарии</label> </label> теперь мы можем оперировать конструкцией - ".sd-checkbox input:checked + label" присваивая необходимые стили. сам код вставляем ниже в подключаемый код ".js" $('[type="checkbox"]').each(function() { var t = $(this), e = $(t).parent('label').addClass('sd-checkbox'); if (0 < e.length) { var n = $(e).text(), i = $("<label for=" + t.attr("name") + ">" + n + "</label>"); if ($(t).attr("id")) { i = $("<label for=" + t.attr("id") + ">" + n + "</label>"); } t.after(i), $(e).each(function() { $(this).contents().filter(function() { return 3 === this.nodeType && $.trim(this.nodeValue).length }).replaceWith("") }) } else { $(t).parent('div').addClass('sd-checkbox'); } }); аналогично можете сделать для радио-кнопок. Поправьте, кто разбирается в скриптах, возможно я что-то не учёл или не правильно сделал, потому как слаб в этом деле.

На всех страницах внизу "[/page-count]"..

Хотел тогда ещё написать, да постеснялся что ли... "дизайн - Canvas Inc"... Цветной логотип, я понимаю - скорее требование заказчика, но не в тему он там... может сделать больше и по середине вывести.. Большой стартовый слайдер... тоже не понятно, занимает сразу 90% страницы... где собственно должна быть инфа про сайт, группу, слоган что ли, и т. д.... Впервые открыв сайт, не сразу понял, что это музыкальная группа, нет информации, только прокрутив ниже понял... И ещё, мне кажется не хватает музыкальных, или иконок или маленьких изображений или фона, ну чтоб понятнее тематика была. ещё подписи на кнопках "Поделиться" при наведении всплывающий текст уехал.

Если это вы мне, то (id="checkbox"), а так же ("name") и т.д. я для примера привёл.

Закрывать не актуальные старые и открывать новые темы - "Пожелания Для Новых Версий..." По шаблонам: Убрать у "ui-dialog" - "textarea" style="width:97%;height:100px;" Добавить в файл "comments.tpl" - clearfix, <div class="text clearfix">{comment}</div> По чекбоксам и радиокнопкам: В последней версии в "addnews.tpl" - "{admintag}" обернули наконец то в див с классом. Просьба сделать то же самое во всех файлах ".tpl", что бы не было необходимости прибегать к скриптам. Предлагал уже, а именно.. <div class="checkbox"> <input id="checkbox" type="checkbox" value="0" name="checkbox"> <label for="checkbox">Checkbox</label> </div> Аналогично можно сделать и для админ панели, меньше вес, быстрее загрузка.

Простите, что лезу не в свою тему. поискал в консоли "http"... есть изображение по ссылке "http://okayno.club/wp-content/uploads/2017/08/8fbe862a0dc71275a1342931b19fb05e_XL.jpg" может это? нет? и ещё "<html lang="ru" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#" >" или это? нет?

Дак вы его не подключайте, а разместите и используйте в нём доп. поля, нет?

По факту проблемы не скажу, но вот что показывает фаербаг, а именно ошибки js. Возможно и слайдер после устранения ошибок заработает. И ещё... смотрю на вас и удивляюсь, вы выбрали самый быстрый движок и в то же время нагрузили шаблон различными украшательствами, возможно у вас и всё быстро работает, но у меня ваш сайт очень долго открывается.

Можно на одинарные <img src='[xfvalue_test image="2"]'/>