Forumlar / National / Russian / Модули и плагины / Стилизация Catselector

12>>>

Стилизоваць select в Catselector

pronchak
#1 2018-03-02 14:39

Доброго времени суток, Всем! В файле projects.list.tpl вместо {SEARCH_CAT} вставил {PHP.c|catselector_selectbox('projects', $this, 'c')}. Когда было {SEARCH_CAT} класс select стилизовался как угодно, после замены, что бы я не делал со стилями css не могу убрать стандартное обрамление и стрелку раскрывающегося списка. {PHP.c|catselector_selectbox('projects', $this, 'c')} заключил в блок div и приписал class="c-select" и все равно ни чего не изменилось ниже сам код css:

.c-select {
  display: inline-block;
  max-width: 100%;
  -webkit-appearance: none;
  padding: .375rem 1.75rem .375rem .75rem;
  padding-right: .75rem \9;
  color: #55595c;
  vertical-align: middle;
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
  background-image: none \9;
  -webkit-background-size: 8px 10px;
          background-size: 8px 10px;
  border: 1px solid #ccc;

     -moz-appearance: none;
}

.c-select:focus {
  border-color: #51a7e8;
  outline: none;
}

.c-select::-ms-expand {
  opacity: 0;
}

Вот ссылка на скрин селекта, смотреть "Виды работ": https://ibb.co/js2AQ7

Помогите чем кто может.

P.S. Тема (шаблон) Masters. 

Edward
#2 2018-03-02 16:19

Так вы откройте консоль и увидите, что к селекту не присвоен ни class ни id.

Попробуйте так:

.c-select select[name=c] {
  display: inline-block;
  max-width: 100%;
  -webkit-appearance: none;
  padding: .375rem 1.75rem .375rem .75rem;
  padding-right: .75rem \9;
  color: #55595c;
  vertical-align: middle;
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
  background-image: none \9;
  -webkit-background-size: 8px 10px;
          background-size: 8px 10px;
  border: 1px solid #ccc;
 
     -moz-appearance: none;
}
 
.c-select select[name=c]:focus {
  border-color: #51a7e8;
  outline: none;
}
 
.c-select select[name=c]::-ms-expand {
  opacity: 0;
}

 

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
pronchak
#3 2018-03-02 19:40

Тоесть просто добавить 

select[name=c]

Если так, то ни чего не вышло. Но всеравно большое спасибо Вам за помощь.

Edward
#4 2018-03-02 21:50

где не вышло?

https://jsfiddle.net/EddG/aqa336aa/4/

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
pronchak
#5 2018-03-02 23:27

По вашему примеру получается селект в селекте. Ведь список выводится через {PHP.c|catselector_selectbox('projects', $this, 'c')}.

https://jsfiddle.net/aqa336aa/6/

Kopusha
#6 2018-03-03 07:50

Я давно привязал библиотеку select2 и она всюду работает

pronchak
#7 2018-03-03 08:02

К сожалению, я не гуру. Подскажи как это реализовать.

Edward
#8 2018-03-03 08:41
#43297 pronchak:

По вашему примеру получается селект в селекте. Ведь список выводится через {PHP.c|catselector_selectbox('projects', $this, 'c')}.

https://jsfiddle.net/aqa336aa/6/

какой еще select  в select'е ?

Вы на первый пример пример смотрели?

Я там 2 селекта для сравнения сделал, чтобы показать, что стили работают. 

https://jsfiddle.net/EddG/aqa336aa/4/

А вы вот здесь https://jsfiddle.net/aqa336aa/6/ зачем то в севисе jsfiddel пытаетесь воткнуть функцию cotonti. Конечно там она не будет работать.

Учите основы хотя бы сначала, как CSS работает.

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

Файл шаблона

<div class="c-select">
{PHP.c|catselector_selectbox('projects', $this, 'c')}
</div>

файл стилей css:

.c-select select[name=c] {
  display: inline-block;
  max-width: 100%;
  -webkit-appearance: none;
  padding: .375rem 1.75rem .375rem .75rem;
  padding-right: .75rem \9;
  color: #55595c;
  vertical-align: middle;
  background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center;
  background-image: none \9;
  -webkit-background-size: 8px 10px;
          background-size: 8px 10px;
  border: 1px solid #ccc;
  
     -moz-appearance: none;
}
  
.c-select select[name=c]:focus {
  border-color: #51a7e8;
  outline: none;
}
  
.c-select select[name=c]::-ms-expand {
  opacity: 0;
}

и все работает.

Не видите изменений - чистите кэш котонти и обновите страницу через cotnrol+f5

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba

Bu konu Edward tarafından düzenlendi(2018-03-03 08:46, 6 yıllar önce)
pronchak
#9 2018-03-03 08:58

С большим уважением к Вашим знаниям! Я все так и делал с первого Вашего сообщения и сейчас все имено так и прописано, но ни какого результата.

 

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

Вот код из консоли:

<div class="c-select">
<select name="c" onchange="catselector_changeselect(this, 'projects', 'c', 'W', '1');"><option value="">Виды работ</option></select>
</div>

 


Bu konu pronchak tarafından düzenlendi(2018-03-03 09:08, 6 yıllar önce)
Edward
#10 2018-03-03 10:26

Дед мороз существует, но в эти чудеса я не верю.

Проверяйте, что 

name="c"

написано латиницей, смотрите в консоли, какие стили и откуда применяются.

Email: ed.gabishev@gmail.com
Telegram: https://t.me/Ed_Gaba
pronchak
#11 2018-03-03 11:09

Дед мороз и в правду существует! Но это не меняет моей глупости. Все дело в том, что стили я прописывал в bootstrap.css, а к странице подключен bootstrap.min.css. Все работает, спасибо огромное.

DenDevin
#12 2018-03-20 17:41
Сколько танцев над одним классом. А не проще было просто в в файле catselector.functions.php данного плагина просто добавить класс. В строчке: $result .= " к селекту свой класс дописать..

Bu konu DenDevin tarafından düzenlendi(2018-03-21 10:22, 6 yıllar önce)
vpktz
#13 2020-04-10 19:09

Дабы не плодить темы.

( к стати кому надо, со стилями я решил просто, uikit3 и {SEARCH_CAT|cot_rc_modify($this, 'class="uk-select" ')}   )

У меня проблема с с этим {SEARCH_CAT} такая, когда стоят все категории по дефолту, то есть первая позиция в положении (все категории all) то у меня такая картина, 

Как вместо этих 3х прочерков поставить надпись ВСЕ КАТЕГОРИИ. Я конечно нашел файлы где есть php строки типо этих

"SEARCH_CAT" => cot_projects_selectcat($c, 'c'),

, но  не умею я этот ваш php, пока не осилил хотя и хочу очень. 

Kopusha
#14 2020-04-10 22:28

Завтра дам примеры. 

Added 9 hours later:

Я использую в моятема.resources такое $R['code_option_empty'] = ' - - - ';

Для пустого можно вписать все что угодно, но это глобально во всей теме. Отдельно для какого то плуга если надо что то - смотрите как формируется в php файлах селект где есть другой текст для пустого выбора, там все очевидно.


Bu konu Kopusha tarafından düzenlendi(2020-04-11 07:42, 3 yıllar önce)
vpktz
#15 2020-04-11 12:35
#44559 Kopusha:

Завтра дам примеры. 

Added 9 hours later:

Я использую в моятема.resources такое $R['code_option_empty'] = ' - - - ';

Для пустого можно вписать все что угодно, но это глобально во всей теме. Отдельно для какого то плуга если надо что то - смотрите как формируется в php файлах селект где есть другой текст для пустого выбора, там все очевидно.

ВАУУУУУ, Вот это красота!!!  

То есть я так понимаю  $R это какие то переменные?  Узнать  бы где находиться весь этот список.

Копуш yes

 


Bu konu vpktz tarafından düzenlendi(2020-04-11 12:46, 3 yıllar önce)

12>>>