Дизайн информеров

Сегодня мы продолжим тему создания информеров. Вернее создавать мы их научились, а теперь будем пытаться делать их более красивыми. В темеСоздание блока с категориями на ucoz вы можете посмотреть, какой блок с перечнем разделов мы получили, а какой будем делать.

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

Вот мы и попробуем сегодня преукрасить наш информер. Для того, чтобы его отредактировать, войдите в панель управления сайтом (ПУ). Повторяться не буду, как это можно сделать через админ-панель сайта. Находите перечень своих информеров.

Напротив информера, который мы будем видоизменять нажимаем окошечко с разноцветными квадратиками. И видим примерно такой код:

<a href="$CATEGORY_URL$" class="catName">
$CATEGORY_NAME$</a> <span class="catNumData">[$NUM_DATA$]</span><?if($CATEGORY_DESCR$)?><div class="catDescr">$CATEGORY_DESCR$</div><?endif?>

Где CATEGORY_URL - адрес категории,
CATEGORY_NAME – название категории,
NUM_DATA – количество материалов в категории;
CATEGORY_DESCR – описание категории.

Теперь мы сделаем шрифт названия категорий жирным и поменяем его цвет. Воспользуемся нашими шпаргалками по HTML, получим следующий код:

<a href="$CATEGORY_URL$" class="catName"> <font color="#990000"> <b>$CATEGORY_NAME$</b></font></a> <span class="catNumData">[$NUM_DATA$]</span><?if($CATEGORY_DESCR$)?><div class="catDescr">$CATEGORY_DESCR$</div><?endif?>
где <b> – жирный шрифт;
font color="#990000" – цвет шрифта.

Если хотите увеличить шрифт, то окружите тегами <font size="+1"></font>

Теперь посмотрим, как можно изменить заливку блока. Заходим Редактор страниц — Управление дизайном модуля. Находим глобальные блоки. Опять же повторюсь, что пишу для дизайна # 161. В некоторых шаблонах настройки могут быть в CSS. В нашем случае мы открываем глобальные блоки – первый или второй контейнер в зависимости от того, правый или левый сайдбар.

Видим примерно такой отрезок кода:

<!– <block307> –> <?if($MYINF_1$)?> <table border="0" cellpadding="2" cellspacing="1" width="194" style="background-color: #F6A37B;"> <tr><td style="background-image:url("/.s/t/161/7.gif"); background-color:#FFC5A9; height: 25px; color:#CC5D28; padding-left:25px;"><b><!– <bt> –>Block title<!– </bt> –></b></td></tr> <tr><td style="background:#FFFAF8;padding:5px;"><!– <bc> –>$MYINF_1$<!– </bc> –></td></tr> </table><br /> <?endif?> <!– </block307> –>

Обратите внимание на $MYINF_1$ – код вызова вашего информера. Подробно углубляться не будем, но поверхностно расскажу:
<table border="0" cellpadding="2" cellspacing="1" width="194" style="background-color: #F6A37B;"> – формирование таблицы. т.е. здесь можно отредактировать толщину, ширину и цвет рамки;
<tr><td style="background-image:url("/.s/t/161/7.gif"); background-color:#FFC5A9; height: 25px; color:#CC5D28; padding-left:25px;"><b><!– <bt> –>Block title<!– </bt> –></b></td></tr> – рисунок и название в заголовке блока. Рисунок можно поменять, об этом будет отдельная тема;
<tr><td style="background:#FFFAF8;padding:5px;"><!– <bc> –>$MYINF_1$<!– </bc> –></td></tr> - а это сам блок с данными, в котором мы и меняем цвет заливки FFFAF8

В результате всех этих манипуляций получаем следующий блок:

Пусть не совсем красиво получилось, но смысл я передал, как это можно сделать. Надеюсь, что эта информация была полезной. Если вы найдете ошибки или у вас возникнут вопросы, то жду ваши комментарии.

This entry was posted on Воскресенье, Сентябрь 27th, 2009 at 7:59 пп and is filed under uCoz. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Дизайн информеров”

  1. Елена:

    Спасибо огромное за все статьи ukoz! Для новичка эта инфа просто незаменима!

Прокомментировать запись: