Настраиваем вывод записей каталога InstantCms

Опубликовано:
Рубрика: Работа с CSS
Просмотров: 2157
+3
Голосов: 3

Итак стандартный вывод вида категорий каталога в настоящее время выглядит так.

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

Для этого находим в CSS файле шаблона styles.css строку отвечающую за вывод категорий каталога.

Вот эта строка ul.uc_cat_list li.uc_cat_item{

Теперь смотрим что мы добавим.

1. Изменить вывод не в один ряд. Добавляем свойство float: left; Это будет обтекание текста, то есть текст будет идти друг за другом. Но это тоже некрасиво, ибо тексты разные.

2. Добавляем свойство ширины и высоты к записи. width:230px; (ширина) height:16px; (высота) Это для того чтобы создать некоторую форму в которую входит эта запись.

3. Теперь все равно остается некоторая неупорядоченность, значит надо изменить вид еще, сделать в виде этаких больших кнопок с записями. Добавляем свойство бордера. border:solid 3px #1D876C; Естественно можно поставить dotted тогда будет бордер с разрывами. _ _ _ _ _ _ вот такого вида. И дабы текст у нас не прижимался к краям добавляем padding:20px; то есть отступ от бордера. Его можно регулировать под себя, поставив несколько значений.

4. Теперь у нас есть блоки с надписями, остается добавить между ними расстояние. Это делаем margin:10px; теперь между блоками расстояние.

5. Заполняем фон блока цветом. Я поставил градиент

background: url(../images/icons/folder.png) no-repeat left center #cbe2ba; /* Old browsers */

background: -moz-linear-gradient(top, #cbe2ba 0%, #f8ff7f 50%, #c1e2a7 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbe2ba), color-stop(50%,#f8ff7f), color-stop(100%,#c1e2a7)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* Opera11.10+ */

background: -ms-linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbe2ba', endColorstr='#c1e2a7',GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* W3C */

6. Закругляем вставкой строк border-radius:12px 12px 0 0;

-moz-border-radius:12px 12px 0 0; тут соотвественно понятно, что загруглены 2 из 4 значений, то есть только верх, вы делайте как вам лучше.

Вот мы и получили, то что показано на рисунке.

теперь приведу полностью код, который получился.

ul.uc_cat_list li.uc_cat_item{

font: bold 13px/1.8 Veranda, sans-serif; color: #000;

padding:20px;

background: url(../images/icons/folder.png) no-repeat left center #cbe2ba; /* Old browsers */

background: -moz-linear-gradient(top, #cbe2ba 0%, #f8ff7f 50%, #c1e2a7 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbe2ba), color-stop(50%,#f8ff7f), color-stop(100%,#c1e2a7)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* Opera11.10+ */

background: -ms-linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbe2ba', endColorstr='#c1e2a7',GradientType=0 ); /* IE6-9 */

background: linear-gradient(top, #cbe2ba 0%,#f8ff7f 50%,#c1e2a7 100%); /* W3C */

height:16px;

line-height:16px;

float: left;

width:230px;

height:16px;

border:solid 3px #1D876C;

margin:10px;

text-align:center;

text-transform: uppercase;

border-radius:12px 12px 0 0;

-moz-border-radius:12px 12px 0 0;

Выкладывайте свои варианты изменения видов модулей и компонентом InstantCMS

Комментарии (3)
Soul #
: 0
Отличная реализация! +++
Letsgo #
: 0
переделал еще больше каталог теперь вид такой  http://ok2net.kz/catalog
ZmeeLove #
: 0

что-то не работает ((((

Голосуем

Самый нужный компонент