25 июля 2011 в 21:59
Здравсвуйте.
Через Views создал блок популярных товаров и вывел этот блок на главную страницу. В блоке отображаются поля: заголовок, мини-картинка и тизер.
1. Блок отображает в 1 столбец(Style - Unformatted) 4 товара по вертикали.
Проблема в том что блоки не одинаковы по размеру, т.е. у одного товара текст тизера небольшой и он занимает мало места, а в другом товаре текст тизера большой и размер соответственно больше. В итоге это все как-то не очень красиво выглядит. Хотелось бы что бы все части блока товаров были фиксированного размера. Сам я не понял как сделать это в настройке Views.
2. Также подскажите как выводить в Views товары не в 1 столбец/строку по 4 допустим... а в 2 столбца по 4, или в 2-3-4 строки по 4 товара.
3. Картинки товаров я загружаю через поле Field_node_gallery_image модуля node gallery.
Миниатюры этих изображений товаров также отображаются в блоке популярных товаров, выровнял отображение картинок слева... но вот текст тизера теперь отображается с правого края изображения, что тоже надо исправить... нужно чтобы текст тизера отображался снизу картинки. Думаю это делается через правку css но незнаю где и что именно писать.
Помогите кто знает!
Комментарии
2. Используйте либо Grid (Table) вместо unformatted fields. Либо еще есть вариант Unformatted fields - и поиграться с css (например если вам необходимо в блоке шириной в 200 пикселей показать два столбца тизеров, задаете в цсс каждому тизеру ширину 100 пикселей и float: left).
1. Задаете в unformatted list-->settings название Row class (css class для "строки" (row), то есть для каждого поля) и изменяете ширину и высоту row в вашем файле css (view-fields.css). Если охота еще больше контроля над вью - задайте также название класса css в advanced--> other-->css class. Ну и Фаербаг в помощь.
Я непонял, где этот unformatted list-->settings. Да и в каком файле css делать правки? Напишите подробней.
Grid и Table выдает те же 4 товара в строку или столбец но в 1 ряд. А хотелось бы в 2 ряда или в 3 ряда допустим. Варианта Unformatted fields нету... есть тока Grid, Table, HTML List, Unformatted и Jump Menu.
1) Выбираете формат Unformatted, (с правой стороны от "Unformatted") нажимаете на Settings, там в Row class задаете свой уникальный класс, допустим row-product-view
2) В вашем вью в Advanced-->Other-->css опять задаете уникальный класс, например view-products
3) Стягиваете add-on Firebug для Firefox и при помощи его ищете элементы на своей странице, для которых нужно задать в css коде ширину, высоту и float: left;
3) открываете /sites/all/themes/???(ваша тема)/css/views-style.css (пустой документ) и туда вписываете css код
Может это немного общая инструкция, без знания css вам точно не обойтись. Погуглите что нибудь про css float, че то типо того http://www.w3schools.com/css/css_float.asp
Привет:)
Спасибо за подсказку про Firebug. Помогло)))
Я сделал фиксированную высоту и ширину блока популярных товаров. Прописал код в css-файле темы.
Теперь хочу сделать фиксированную высоту и ширину для другого блока. Он находится на другой странице. Создал через panel-page, на ней разместил блок views "недавно добавленные". Так вот... думал таким же образом установить фиксированную высоту и ширину для блока но не выходит.
Прописал такой код в css:
div.pane-views-new1-block-1 div.views-field-teaser {
height: 125px;
width: 600px;
}
Блок не реагирует... догадываюсь что возможно надо добавить идентификатор страницы. Верно?
Да. Заходите в настройки своей страницы, в Variants-->Panel-->General-->css id, придумываете уникальное название и вся страница (Page) заключается в див с этим названием (будет видно в Фаербаге).
Что касается вашего блока, который не реагирует, то трудно однозначно посоветовать. нужно пробовать разные варианты, чтоб зареагировал так сказать, со временем у вас выработается чутье, какому именно диву нужно присвоить значения в css, чтобы заработало. Для начала обзовите страницу, попробуйте
div#page(ну или как вы ее назовете) div.pane-views-new1-block-1 div.views-field-teaser {
height: 125px;
width: 600px;
}
Нашел ошибку))) Все таки мало у меня еще опыта работы с css. Блок начал реагировать, но не реагирует только на свойство width. Установил высоту блока... но вот ширину никак не хочет менять. Я не понимаю, почему высоту меняет, другие свойства тоже меняет, шрифт, стиль текста... а ширину нет.
Стиль блока таблица, еще там нету закрывающей правой стенки таблицы. Как ее можно поставить?
Вот код в css-файле темы. Высота работает, ширина нет.
div.pane-views-new1-block-1 td.views-field-teaser {
height: 125px;
width: 100px;
}
Мда-а...) В таблице блока отсутствовала правая стенка и не реагировала на свойство width. Стоило приписать внизу выравнивание по левому краю, как свойство width заработало. Хотя не совсем понял почему... Ну и правую стенку таблицы я тоже все-таки поставил.
div.pane-views-new1-block-1 td.views-field-teaser {
height: 125px;
width: 360px;
float:left;
border-right: 1px solid #DBDBDB;
border-top: 0px solid #DBDBDB;
border-left: 0px solid #DBDBDB;
border-bottom: 0px solid #DBDBDB;
}
Спасибо за помощь alisazoja!
Всегда пожалста! Обращайтесь!