7 replies to this topic

[B_A_H_O]

Здравствуйте!

Помогите пожалуйста "приручить" Чек-боксы.

В фильтре все чек-боксы отображаются особенно коряво:

- большой интервал между разными чек-боксами;

- текст не посредине, а вверху

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

 

Вот:

1) Как уменьшить интервал? Тут я ковырял ковырял, плюнул и поставил кнопки jQuery.

2) Как сделать, чтобы текст по вертикали выравнивался по центру чек-бокса? Не осилил решение.

3) как настроить нужный дизайн?  Лазил в css jbzoo, jbzoo.filter, jquery-ui.custom, template.

Я так понимаю, что нужно прописать в нужном месте условие !important, чтобы эти настройки использовались как основные? Или скопировать из шаблона стиль чек-бокса и вставить его в нужные css ?

 

[Sliapy]

Попробуйте добавить в CSS

.checkbox-lbl input[type="checkbox"] {
    margin: 0 0.3em 0 0 !important;
}

Внешний вид стандартных элементов (чекбокс, выпадающий список, радио-кнопки) зависят от браузера. Через CSS изменить их нельзя. В интернете довольно много материалов, как изменить их при помощи скриптов.

[Kess]

1, 2 - в CSS файл вашего шаблона джумлы добавьте такое:

#main .jbzoo-filter .filter-element input[type=checkbox] {
   margin: 0;
   margin-right: 2px;
}

2px можно поменять на другое значение, это просто для примера - задает интервал между чекбоксом и его описанием.

 

3. Используйте инспекторы браузеров - так сразу найдете нужный стиль. Например, в chrome он уже есть, для Firefox удобнее установить firebug. Нажимаете правой кнопкой на нужный элемент на странице и выбираете "Инспектировать":

 

Справа внизу увидите список правил, действующих на этот элемент и откуда они берутся:

 

Там же прямо в браузере можно прописать свои значения, чтобы сразу увидеть результат. Но они, конечно, не сохраняются.

 

Потом в своем шаблоне сайта пишете правило, дополняющее или заменяющее существующие. Можно и с !important, конечно, но достаточно просто немного усилить селектор, добавив к нему еще один класс или id, как в моем примере.

 

P.S. Да, дизайн самого чекбокса так не поменяете, но выравнивание и отступы настроить сможете.

Edited by Kess, 13 October 2013 - 21:15.

[B_A_H_O]

Да, firebug у меня установлен, он реально облегчает жизнь, иначе я бы ничего не поменял.

 

По вопросу №2 я ещё не пробовал, но сомневаюсь, что это поможет.

#main .jbzoo-filter .filter-element input[type=checkbox] { margin: 0; margin-right: 2px; }

 

Тут меняется отступ по горизонтали от квадратика до текста.

А мне нужно, чтобы тест по вертикале съехал не много вниз. Я прописывал vertical-align:middle !important; везде где только можно. но это не помогло ((

[Sliapy]

Попробуйте добавить в CSS

.checkbox-lbl input[type="checkbox"] {
    margin: 0 0.3em 0 0 !important;
}

Внешний вид стандартных элементов (чекбокс, выпадающий список, радио-кнопки) зависят от браузера. Через CSS изменить их нельзя. В интернете довольно много материалов, как изменить их при помощи скриптов.

Этот код пробовали?

Edited by Sliapy, 13 October 2013 - 21:40.

[Kess]

Вариант, предложенный Sliapy вам подойдет, если не нужно менять расстояние вправо. Все встанет по центру. Попробовать заняло бы не больше минуты с firebug-ом.

[B_A_H_O]

добавил. Уже стало лучше.

[Sliapy]

Лучше? Что тогда еще не так?