Итак стандартный вывод вида категорий каталога в настоящее время выглядит так.
Мы сделаем чтобы вывод был вот так, при этом попробую обьяснить каждое действие, ибо сделать можно и получше, это было сделано навскидку.
Для этого находим в 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
