Главная » 2012 » Май » 8 » Украшаем модуль список друзей в шаблоне сайта Ucoz

Украшаем модуль список друзей в шаблоне сайта Ucoz

От модуля список друзей на сайте Ucoz никуда не денешься, пока не заплатишь 3 доллара. Наличие этого модуля на вашем сайте — цена бесплатного использования серверов Ucoz. Ну, и реклама еще, конечно.

Ладно, допустим мы смирились с тем, что этот список будет висеть у нас в сайдбаре или футере. То есть предположим, что денег платить мы не хотим пока, или не можем, поэтому давайте немного украсим список друзей. Если вы любите, эти самые дизайнерские штучки, то эта вкуснятина вам должна понравится. Конечный результат наших украшательств, будет выглядеть как на рисунке:

Результат редизайна в модуле шаблона сайта Ucoz

Если заметили, то заодно, редизайну подвергся и модуль Архив записей (дефолтовое название стандартного модуля шаблона на сайте Ucoz).

Изменения в дизайне шаблона на сайте Ucoz

Первым делом лезем в админ-панель вашего сайта и переходим в раздел Управление дизайном. Нас там будут интересовать только два пункта: Первый контейнер и Таблица стилей. Я их подчеркнул на рисунке.

Раздел управления дизайном в административной панели сайта Ucoz

Откройте Первый контейнер и найдите блок Друзей сайта. У меня он называется Спонсоры, мне кажется такое обозначение более естественное. Ну какие они друзья, да? Вот вы — друзья, потому что в гости ко мне зашли ))

Здесь мы добавим div с классом lists-star и обязательно закрывающий тег div. Они также подчеркнуты на картинке.

Изменение кода в модуле друзья сайта

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

Изменение кода в модуле архив записей

Изменения в стилях CSS шаблона на сайте Ucoz

Теперь необходимо дать описания классам lists-star и lists-heart в Таблице стилей. Для этого возвращаемся в раздел «Управление дизайном» в вашей админ-панели и заходим в Таблицу стилей (CSS). Я разместил код в самом низу таблицы (так искать их легче, если что-то пойдет не так).

Дополнение кода CSS новыми классами для списков

Загрузка изображений в файловый менеджер сайта Ucoz

Если посмотреть на код стилей, то можно догадаться (тем кто не знает, как работает CSS) что в оформлении будут принимать участие картинки с расширением PNG. Так оно и будет.

Обратите внимание, прежде чем загружать изображения на сайт, я создал папку imgcss в файловом менеджере сайта Ucoz (это видно по пути размещения картинок в коде стилей). Загружать будем два файла ( Звездочка star.png и Сердечко heart.png ) именно в папку imgcss.

Все. Работа по небольшому редизайну шаблона на сайте Ucoz завершена. Посмотрите на готовый результат украшательства на своем сайте. Ну, а если не получится, пишите, поможем чем сможем.