Меню сайта
АКЦИЯ!!!
Категории раздела
Сервис
Translate my page
Выбрать язык / Select language:
Бесплатное отправление смс сообщений!
Поиск
Календарь
« Апрель 2024 » Пн Вт Ср Чт Пт Сб Вс 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Архив записей
Наш опрос
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Реклама
Главная » Вид материалов
Вид материала новостей 3 колонки для ucoz
Если решили координатно изменить свой дизайн, то Вид материала новостей 3 колонки для ucoz отличное разрешение вашей ситуаций. Но во первых, сам код не сложный и стили к нему идут без одной ссылки. Если будет на главной, то вообще не будет груз брать на себя, но кроме картинок, что находятся там. Внизу на темном виде будет выводиться название, на светлом портале отлично смотрится, но я проверил на темном и как сами видите, стоит как родной и в дизайн новшество привлекло.
Вид новостей:
Код
<div style="width:33%;float:left;"> <div class="short-story"> <div class="img-size"><img alt="скрин $TITLE$" style="margin:0;padding:0;border:0;" src="$IMG_URL1$"> </div> <div class="clr"> </div> <div id="catitle"><a href="$ENTRY_URL$">$TITLE$</a></div> </div> </div>
CSS:
Код
.short-story { border: solid 1px #353535; border-radius: 8px; margin: 15px 15px 10px 10px; height: 260px; overflow: hidden; background: #353535; box-shadow: 2px 2px 2px #888; } .img-size img { height: 200px; width: 200px; } #catitle { font-weight: bold; font-size: 13px; text-align: center; padding: 10px 0; margin: 2px 0 0 0; } #catitle a { color: #ffd40b; text-shadow: 0 1px 1px #949494; }
Вид материалов новостного блога для сайта ucoz
Думаю вы много видели такой скрипт Вид материалов новостного блога для сайта ucoz они все походи по дизайну, но разные по функциональности. Этот код вы можете поставить на блог, но лучше безусловно его под новости. Так как там можно ограничить краткое описание, которое будет под картинкой. И всегда он будет стоять ровно и не ниже и выше, вот в чем прелесть.
Установка:
CSS:
/* Вид новостей для uCoz
------------------------------------------*/
@font-face {font-family: 'Open Sans'; font-style: normal; src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');}
.uotvet-news-1 {
float:left;
width:400px;
background:#fff;
overflow:hidden;
margin-bottom: 40px;
padding: 25px 25px 0px 25px;
box-shadow:0 0 5px #a0afba;
border-radius:8px;
}
.img-news-1 {
float:left;
width:400px;
height:250px;
}
.uotvet-news-1 h2 {
float:left;
width:100%;
margin: 15px 0px 15px 0px;
font-size: 17px; font-family: Open Sans,Verdana,Arial, sans-serif;
}
.uotvet-news-mp {
float:right;
}
.uotvet-news-1 h2 a:link,
.uotvet-news-1 h2 a:visited {color:#555}
.uotvet-news-1 h2 a:hover {color:#2270a7}
.uotvet-news-1 p {
margin-bottom: 35px;
font-size: 13px; font-family:Verdana,Arial, sans-serif; line-height: 1.5; text-align:justify;
}
.bottom-news-1 {
float:left;
width:400px;
background:#eaf0f4;
padding: 0px 25px 0px 25px;
margin: 0px -25px 0px -25px;
border-top: 1px solid #d8e3eb;
}
.bottom-news-1 ul {
margin: 0;
padding: 0;
font-size: 12px; font-family:Verdana,Arial, sans-serif;
color:#96a6b0;
}
.bottom-news-1 li {
float:left;
list-style: none;
padding: 15px 33px 15px 33px;
border-right: 1px solid #d8e3eb;
}
.ico-like,
.ico-date {
float:left;
width:20px;
height:20px;
margin: -1px 10px 0px 0px;
background: url(http://zornet.ru/CSS-ZORNET/derkamer/ret/icon_bottom_news.png) no-repeat;
}
.ico-like {background-position: 0px 0px!important;}
.ico-date {background-position: 0px -20px!important;}
.bn-li-1 {
padding-left:0px!important;
}
.bn-li-2 {
float:right!important;
padding-right: 0px!important;
border-right: none!important;
}
.bn-li-2 {
font-weight:bold;
float:right!important;
padding-right: 0px!important;
border-right: none!important;
}
.bn-li-2 a:link,
.bn-li-2 a:visited {color:#96a6b0}
.bn-li-2 a:hover {color:#2270a7}
.bn-li-3 {
text-align:center!important;
padding-right: 0px!important;
border-right: none!important;
}
.bn-li-3 img[style],
.bn-li-3 img[width="1"] {display:none!important}
.bn-li-3 span {display:inline!important}
.bn-li-3 span img {margin: 0px 2px; }
Вид новостей:
Код
<div class="uotvet-news-1">
<?if($IMG_URL1$)?>
<a href="$IMG_URL1$" class="ulightbox" target="_blank"><img class="img-news-1" alt="$TITLE$" src="$IMG_URL1$" /></a>
<?endif?>
<h2><a href="$ENTRY_URL$">$TITLE$</a></h2>
<p>$MESSAGE$</p>
<div class="bottom-news-1">
<ul>
<li class="bn-li-1"><span class="ico-like"></span>$RATED$</li>
<li><span class="ico-date"></span>$DATE$</li>
<?if($MODER_PANEL$)?>
<li class="bn-li-3">
$MODER_PANEL$
</li>
<?else?>
<li class="bn-li-2"> <a href="$ENTRY_URL$" target="_blank">Читать дальше</a></li>
<?endif?>
&
...
Читать дальше »
Новый вид категорий (кнопочки в строчку)
Новый вид категорий (кнопочки в строчку)
Вставляем туда, где хотим видеть категории:
Код
<div class="multikat">
<ul class="clearfix">
<li><b><a title="Главная" href="/">Главная</a></b></li>
<li><a title="Русские фильмы" href="/russianfilms/">Русские фильмы</a></li>
<li><a title="Отечественный" href="/otechestvennyj/">Отечественные</a></li>
<li><a title="Комедии" href="/comedy/">Комедии</a></li>
<li><a title="Комедии" href="/komediya/">Комедии 2</a></li>
<li><a title="казахстанские фильмы" href="/kazfilms/">казахстанские</a></li>
<li><a title="индийские фильмы" href="/indijjskiefilms/">индийские</a></li>
<li><a title="Сериалы" href="/serial/">Сериалы</a></li>
<li><a title="Боевики" href="/boeviki/">Боевики</a></li>
<li><a title="Боевики" href="/boevik/">Боевики 2</a></li>
<li><a title="Драмы" href="/dramy/">Драмы</a></li>
<li><a title="Драмы" href="/drama/">Драмы 2</a></li>
<li><a title="Триллеры" href="/trillery/">Триллеры</a></li>
<li><a title="Триллер" href="/triller/">Триллеры 2</a></li>
<li><a title="Ужасы" href="/uzhasy/">Ужасы</a></li>
<li><a title="Мистика" href="/mistika/">Мистика</a></li>
<li><a title="Юмор и перевод гоблина" href="/jumor/">Юмор</a></li>
<li><a href="http://rucoz.com/" target="_blank">Скрипты для uCoz </a></li>
<li><a title="Мультфильмы" href="/multfilmy/">Мультфильмы</a></li>
<li><a title="Мультфильм" href="/multfilm/">Мультфильмы 2</a></li>
<li><a title="Детективы" href="/detektivy/">Детективы</a></li>
<li><a title="Детективы" href="/detektiv/">Детективы 2</a></li>
<li><a title="Военные" href="/voennye/">Военные</a></li>
<li><a title="Военный" href="/voennyj/">Военные 2</a></li>
<li><a title="Приключения" href="/prikljuchenija/">Приключения</a></li>
<li><a title="Мелодрамы" href="/melodramy/">Мелодрамы</a></li>
<li><a title="Мелодрама" href="/melodrama/">Мелодрамы 2</a></li>
<li><a title="Фантастика" href="/fantastika/">Фантастика</a></li>
<li><a title="Фэнтези" href="/fjentezi/">Фэнтези</a></li>
<li><a title="Документальные" href="/dokumentalnye/">Документальные</a></li>
<li><a title="Документальный" href="/dokumentalnyj/">Документальные 2</a></li>
<li><a title="Анимация" href="/animaciya/">Аниме</a></li>
<li><a title="Семейные" href="/semejjnye/">Семейные</a></li>
<li><a title="Семейный" href="/semejnyj/">Семейные 2</a></li>
<li><a title="Криминал" href="/kriminal/">Криминал</a></li>
<li><a title="Эротика" href="/yerotika/">Эротика 21+</a></li>
<li><a title="Хентай" href="/hentai/">Хентай</a></li>
<li><a title="Исторические" href="/istoricheskij/">Исторические</a></li>
<li><a title="Спорт" href="/sport/">Спорт</a></li>
<li><a title="Телепередача" href="/teleperedacha/">Телепередача</a></li>
</ul>
</div>
Вставляем в CSS:
Значки перед категориями для ucoz
Значки перед категориями для ucoz. Простой и полезный скрипт для украшения вашего сайта, написанный по просьбе нашего пользователя iNet, которому отдельное спасибо за идею =). Функции скрипта: скрипт автоматически устанавливает значки, указанные в массиве перед каждой категорией. Подходит для модулей: каталог файлов, каталог статей, каталог сайтов, онлайн игры.
УСТАНОВКА 1. Зайдите в ПУ, управление дизайном, каталог файлов/игр/статей/сайтов, и на нужных страницах (Главная страница каталога,страница добавления, страница материала и комментариев к нему и др.) после /body> разместите код:
Код
<style> .imgwrap {padding:2px} .cat_image {vertical-align:-4px} </style> <script> var pic = ['http://www.ujs.su/JS/scr/default.png','http://changegroup.ucoz.ru/img_1.png','http://changegroup.ucoz.ru/img_2.png','http://changegroup.ucoz.ru/img_3.png']; var cats = 4; // число категорий $(function () { // By ujs.su; for(i=0;i < cats+1; i++) { var pics = pic[i] ? pic[i] : pic[0]; $('#cid'+i+'').find('a').before('<span class="imgwrap"><img class="cat_image" src="'+pics+'" border="0" /></span>') } }) </script>
2. Теперь настраиваем скрипт. У нас есть две переменные: cats - количество категорий в модуле и массив с картинками pic. а) В переменной cats измените число 3 на число категорий в вашем модуле. б) В массиве pic пропишите пути к картинкам для категорий. (В одинарных кавычках через запятую.) Внимание! в первом (нулевом) значении массива прописывается стандартная картинка для категорий, к которым не указано картинок! в) Также скрипт имеет css стили, для упрощенной настройки отображения значков. В соответствии с правилами css, при необходимости (если что-то криво) настройте классы .imgwrap и .cat_image 3. Готово!
Вид меню категорий в стиле flat
И так для начала нам следует установить на страницу вашего сайта системную переменную отвечающую за отображение данного меню:
Код
Код
Или второй пример меню в отдельной ячейке:
Код
<div class="navigation-right"> $CATEGORIES$ </div>
Теперь давайте установим CSS стили для данного меню:
Код
/* Рубрики блога ------------------------------------------*/ .catsTable { width:240px; overflow: hidden; border-collapse:0px; } .catsTd { float:left; width:240px; height:20px; color:#9e9ea0; margin: 0px 0px 10px 0px!important; } a.catName:link, a.catName:visited, a.catName:active { margin:0; float:left; width:230px; height:15px; display:block; position:absolute; padding:4px 0px 4px 10px; background:#fff!important; font:11px Verdana,Arial,sans-serif; color:#777; } .catsTd a:hover{ color:#fff; font-weight:bold; background:#96C7E6!important; } .catNumData { float:right; width:40px; height:18px; background:#59B0D4; position: relative; padding:5px 0px 0px 0px; font:9px Verdana,Arial,sans-serif; text-align:center; font-weight: bold; color:#fff; } .catDescr{display:none}
И для второго примера меню категорий в отдельной ячейке:
Код
/* Рубрики блога в ячейки ------------------------------------------*/ .navigation-right { width:220px; background:#fff; margin-top: 15px; border: 1px solid #B6C0CD; padding: 10px 10px 5px 10px; border-radius:3px; } .navigation-right .catsTable { width:220px; overflow: hidden; border-collapse:0px; } .navigation-right .catsTd { float:left; width:220px; height:20px; color:#9e9ea0; margin: 0px 0px 10px 0px!important; } .navigation-right a.catName:link, .navigation-right a.catName:visited, .navigation-right a.catName:active { margin:0; float:left; width:210px; height:19px; display:block; position:absolute; padding:4px 0px 0px 10px; background:#F4F8F9!important; font:11px Verdana,Arial,sans-serif; color:#777; } .navigation-right .catsTd a:hover{ color:#fff; font-weight:bold; background:#96C7E6!important; } .navigation-right .catNumData { float:right; width:40px; height:18px; background:#59B0D4; position: relative; padding:5px 0px 0px 0px; font:9px Verdana,Arial,sans-serif; text-align:center; font-weight: bold; color:#fff; } .navigation-right .catDescr {display:none}
Вид категорий фотоальбома с превью для uCoz
Если Вам наскучил стандартный вид фотоальбома с последними добавленными фотографиями, и Вы хотели бы видеть его таким, как на других CMS, то есть интересное решение. В этом варианте категории фотоальбомов будут содержать последнюю добавленную в категорию фотографию, название, количество изображений и описание.
Установка
Создаем информер
Раздел: Фотоальбомы
Тип данных: Категории
Количество колонок по желанию
Код шаблона информера:
Код
<div class="g-album">
<div class="g-album-p">
<a href="$CATEGORY_URL$">
<span class="g-album-s" id="c$NUMBER$"><span class="g-album-b"></span></span>
</a>
</div>
<div class="g-album-i">
<b>$CATEGORY_NAME$</b><br>Фотографий: $NUM_DATA$<br><div class="g-album-descr">$CATEGORY_DESCR$</div>
</div>
</div>
<script type="text/javascript"> $('#c$NUMBER$').load('$CATEGORY_URL$ .phtTdMain:first img');</script>
Вставьте следующий код в Таблицу стилей (CSS):
Код
.g-album {display:inline-block; overflow:hidden; border:1px dashed #ccc; border-radius:3px; padding:5px; margin-bottom:15px;}
.g-album-p {float:left; width:100px;}
.g-album-b {float:left; width:90px; height:67px;}
.g-album-i {float:left; width:150px;}
.g-album-s img {width:90px; height:67px; border-radius:3px;}
.g-album-descr {font-size:10px; color:#666; margin-top:5px;}
Скрипт для юкоз: Вид новостей
Код вида материлов:
Код:
<br><table class="etable" align="center" cellpadding="3" cellspacing="1" width="575">
<tr class="etitle"><td colspan="2" width="100%"> $CATEGORY_NAME$: $TITLE$</td>
</tr>
<tr class="erow">
<td align="center" height="200" width="140">
<img class="img" src="ссылка на картинку" alt="Фильм Перевозчик 3 / Transporter 3" height="172" width="120">
</td>
<td width="460">
$MESSAGE$
</td></tr>
<tr class="etitle">
<td align="center" colspan="2">
<a class="white" href="$ENTRY_URL$">Подробнее</a> | Просмотров: $READS$ | Оценка пользователей: $RATING$</td>
</tr>
</table>
Это вставляем в css, в любое место:
Код:
.etable {
background: #6496C8;
border: 0px;
}
.etitle {
background: #6EA0D2;
border: 0px;
color: #FFFFFF;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
}
.eans {
background: #FFFFFF;
border: 0px;
color: #326496;
font-family: Tahoma;
font-size: 11px;
}
.erow {
background: #FFFFFF;
border: 0px;
color: #326496;
font-family: Tahoma;
font-size: 11px;
}
.img {
border: 1px;
border-color: #6496C8;
border-style: solid;
}
Для установки этого вида каталога сайта , выполните всего 1 пункт!
Удалите всё из вида материалов и вставьте туда это:
Код:
<div class="block">
<div class="block_title">
<div class="cblock_title_fix"><div class="moder_panel">$MODER_PANEL$</div><a href="$SITE_URL$">$TITLE$</a></div>
</div>
<div class="block_content">
<div class="MusicBlock">
<table cellpadding="0" cellspacing="0" height="35" width="100%">
<tr>
<td style="text-align: center;float: center;width:10%;" align="center">
<div align="center" class="screenshot"><a target="_blank" href="$SITE_URL$" title="$TITLE$"><?if($IMG_URL1$)?><img src="$IMG_URL1$" border="0" alt="" height="31" width="88"/><?else?><img src="http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/vid-mat/ucoztop-88x31.png" border="0" alt="" height="31" width="88"/><?endif?></a></div>
</td>
<td style="width:78%; padding-left:7px; padding-bottom:1px;">
<a target="_blank" href="$SITE_URL$" class="entryLink" title="Переити на сайт!">
<font color="#36638e" style="font-size:11px;">
<b>$TITLE$</b>
</font></a>
<div style="font-size:9px; color:#8B8989;" align="left">
<a title="Дата: $DATE$ <br> Ушли: $REDIRECTS$<br> Ктегория: $CATEGORY_NAME$">Дата: $DATE$ | Ушли: $REDIRECTS$ | Ктегория: $CATEGORY_NAME$ <?if($MODER_PANEL$)?>| Модерация: $MODER_PANEL$ <?endif?></a>
</div></td>
<td style="width:12%;" align="center">
<div style="margin-right:5px;float: right;font-size:9px; color:#8B8989;">
<center>
<?$RSTARS$('12','/.s/img/stars/9/12.png','1','float')?>
<a title="Рейтинг: $RATING$ <br>Голосов: $RATED$">Рейтинг: $RATING$</a>
</center></div></td></tr></table> </div>
</div>
</div>
Плюсы скрипта:
+ Не занимает много места
+ Есть плеер
+ Отдельная кнопка проиграть трек
+ Отдельная кнопка остановить трек
+ И просто хороший дизайн =)
Минусы:
- При включение трека идет пару секунд на загрузку прлеера и загрузку подробострей о треке!
Установка:
1. ПУ » Управление дизайном » Каталог файлов » Вид материалов:
Код:
<div class="MusicBlock" style="">
<table style="" cellpadding="0" cellspacing="0" height="35" width="100%">
<tr><td style="text-align: center;float: center;width:4%;" align="center"><a href="javascript:void(0)" onclick="$('#id$ID$_audio_play').slideToggle('slow');$('#id$ID$_audio_play_addons').slideToggle('slow');">
<span id="id$ID$_audio_pimp"><input style="width:45px;height:35px;margin-left:2px;" type="submit" border="0" value="PLAY" title="Проиграть: $TITLE$ Трек" onclick="$('#id$ID$_audio_simg').toggle();$('#id$ID$_audio_pimp').toggle();"/></span>
<span id="id$ID$_audio_simg" style="display:none;"><input style="width:45px;height:35px;margin-left:2px;" type="submit" value="STOP" title="Остановить: $TITLE$ Трек" onclick="$('#id$ID$_audio_pimp').toggle();$('#id$ID$_audio_simg').toggle();"/></span>
</a></td>
<td style="width:61%; padding-left:7px; padding-bottom:1px;"><a href="$ENTRY_URL$" class="entryLink" title="Подробние об етом треке или скачать!"><font color="#36638e" style="font-size:11px;"><b>$TITLE$</b></font></a><div style="font-size:9px; color:#8B8989;" align="left"> <?if($DATE$='Сегодня' || $DATE$='Вчера')?><img src="http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/vid-mat/25--28.gif" border="0" title="Новий трек!" /> | <?endif?><a title="Дата: $DATE$ <?if($RFILE_SIZE$)?><br>Длительность $RFILE_SIZE$<?endif?> <br>Скачало: $READS$">Дата: $DATE$ <?if($RFILE_SIZE$)?>| Длительность: $RFILE_SIZE$ <?endif?>| Скачало: $READS$</a></div></td>
<td style="width:200;" align="right"><div id="id$ID$_audio_play" style="display:none;float: center;"><object id="audioplayer1670" type="application/x-shockwave-flash" data="http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/vid-mat/uppod.swf" width="200" height="35"><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><param name="movie" value="http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/vid-mat/uppod.swf" /><param name="flashvars" value="comment=fifagamers.ru&st=http://www.fifagamers.ru/vsio_dlya_ucoz/skripti1/vid-mat/video74-394.txt&file=$AUTHOR_SITE$" /></object></div></td>
<td style="width:10%;" align="center"><div style="margin-right:5px;float: right;font-size:9px; color:#8B8989;"><center><?$RSTARS$('12','/.s/img/stars/9/12.png','1','float')?><a title="Рейтинг: $RATING$ <br>Голосов: $RATED$">Рейтинг: $RATING$</a></center></div></td></div></tr></table> </div>
2.Меняем на свои поля
$AUTHOR_SITE$ - Ссылка на трек
$RFILE_SIZE$ - Длительность
$READS$ - Скачало
3. ПУ » Управление дизайном » CSS:
Код:
.MusicBlock {opacity: 0.7;background:#cfe4ea;border:1px solid #3e81b2;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;margin-bottom:3px;text-shadow: 1px 1px 0px #BEBEBE;}
div.MusicBlock:hover {opacity: 1.0;border:1px solid #FFFFFF;text-shadow: 1px 1px 0px #BEBEBE;}