Как изменить вид материалов на сайте uCoz? В стандартных шаблонах сайтов uCoz Вид материалов в модуле Каталог статей всегда расположен последовательно в один столбик. Но как поступить, если есть необходимость расположить материалы в два и более столбика?
Решение оказалось достаточно простым.
Панель управления — Дизайн — Управление дизайном (шаблоны) — Каталог статей — Вид материалов
Предполагается, что сам шаблон Вид материалов уже отредактирован Вами по Вашему усмотрению. И вот теперь тот самый секрет, который даст возможность показывать Ваши материалы в несколько столбиков.
Это сочетание стилей CSS: float и width.
float: left; width: 50% (100:2 — это для двух столбиков)
float: left; width: 33% (100:3 — это для 3-х столбиков)
float: left; width: 25% (100:4 — для 4-х столбиков).
Итак, для того, чтобы Вид материалов модуля Каталог статей выводился в 2 столбика нужно Весь код шаблона поместить внутри тегов
со следующими стилями:
1 2 3 4 5 |
<div style="float:left; width:50%> Ваш код шаблона вида материалов </div> |
А далее по аналогии, если Вам нужно еще больше столбиков. Рассмотрим это на конкретном примере.
Пример Вида материалов для Интернет-магазина
Для примера я взяла шаблон Вида материалов для моего интернет магазина, который я сделала из Модуля Каталог статей. Именно этот скриншот Вы видите в начале страницы.
HTML
HTML код самого шаблона приделано прост:
1 2 3 4 5 6 7 |
<div class="shop"> <center> <a href="$ENTRY_URL$"><div><b>$TITLE$</b></div><img src="$IMG_URL1$" height="150"> <div><b>Цена: $AUTHOR_NAME$</b></div></a></center> </div> |
А вот набора стилей тут гораздо больше, поэтому я выделила их в отдельный класс и поместила в файл css стилей «shop».
CSS
Панель управления — Дизайн — Управление дизайном (CSS стили)
В самый конец всех стилей нужно вставить следующие:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.shop { width: 40%; float: left; margin: 20px; border: 2px solid #f5d9dd; } .shop a { display:block; background: #faf1f2; color: #491d27; font-weight: bold; font-size: 12pt; text-decoration: none; } .shop a:hover { display:block; background: #491d27; color: #faf1f2; text-decoration: none; } |
В результате у Вас получится простой, но очень приятный Вид материалов в два столбца.
Скажите, как сделать, чтобы ваш вид материалов адаптировался под мобильные?
Нужно изменить CSS стили с учетом адаптации для мобильного.