Синий вид материалов для uCoz
827материалов
228тем на форуме
3004комментария
6159пользователей

Синий вид материалов для uCoz


Вид материалов для uCoz-сайта, состоящий из синих тонов. Подойдет для личного блога, новостного сайта. 

Вид материалов разбит на три части: хидер, состоящий из картинки материала, логина и аватара автора материала, контент, где находится содержимое материала, и "футер" в котором находятся счетчики материала: дата, кол-во просмотров, кол-во загрузок и т.д., и кнопки "Читать". Установка 

1. Выбираем модуль, в котором хотим заменить вид материалов. Для примера, возьмем модуль "Каталог статей" 
2. Переходим в шаблон "Вида материалов" (у каталога статей- "ВашСайт.ру//panel/?a=tmpl;m=10;t=7")
 
3. Вставляем этот код: 
Код
<div class="post">  
   <div class="post-header">  
   <img class="post-img" src="$IMG_URL1$" alt="$TITLE$">  
   <div class="post-author">  
   <img class="post-hover" src="$USER_AVATAR_URL$" alt="$TITLE$">  
   <a href="#">Admin</a>  
   </div>  
   <div class="post-title">  
   <a href="$ENTRY_URL$">$TITLE$</a>  
   $MODER_PANEL$  
   </div>  
   </div>  
   <div class="post-content">  
   $MESSAGE$  
   </div>  
   <div class="post-counters">  
   Дата добавления <span>$DATE$</span>  
   Автор <span>$AUTHOR_NAME$</span>  
   Комментариев <span>$COMMENTS_NUM$</span>  
   Просмотров <span>$READS$</span>  
   <a href="$ENTRY_URL$">Читать</a>  
   </div>  
   </div>
 
4. В конец CSS, вставляем: 
Код
.post {  
   margin: 20px 0px;  
   background: #F5F5F5;  
   border: 1px solid #9A9992;  
   box-shadow: 0 0 10px rgba(0,0,0,0.5);  
}  
.post-content {  
   padding: 10px;  
}  
.post-img{  
   width: 100%;  
   max-height: 300px;  
   overflow: hidden;  
}  
.post-author {  
   position: absolute;  
   top: 100px;  
   left: 319px;  
}  
.post-author img {  
   border-radius:100%;  
   border: 2px solid #FFFFFF;  
}  
.post-author a, .post-author img {  
   display: block;  
}  
.post-author a{  
   text-align: center;  
   color: white;  
   text-shadow: 1px 1px 2px black, 0 0 1em black;  
   font-weight: bold;  
   font-size: 16px;  
}  
.post-author a:hover{  
   color: white;  
   text-decoration: none;  
}  
.post-title {  
   padding: 10px;  
   background: #2693D3;  
}  
.post-title a {  
   color: white;  
   font-weight: bold;  
}  
.post-title img{  
   float: right;  
}  
.post-counters {  
   padding: 10px;  
   border-top: 1px solid #9A9A93;  
}  
.post-counters span {  
   font-weight: bold;  
   border-right: 1px solid #9A9A93;  
   margin-right: 10px;  
   background: #2693D3;  
   border-radius: 5px;  
   color: white;  
   padding: 5px;  
}  
.post-counters a {  
   float: right;  
   background: #2693D3;  
   color: white;  
   padding: 10px 15px;  
   margin: -10px;  
}  
.post-counters a:hover{  
   color: white;  
   text-decoration: none;  
}
 
4. Сохраняем. На этом установка завершена.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.01.2015 в 21:10
Материал просмотрен: 5543 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 36 комментариев

Пожаловаться
Сказать спасибо
Источник

36 комментариев


XemorDio
Vladislav Tashlanov @XemorDio 29.01.2015 04:561
+2
уу, очень красиво выглядит! smile
Спасибо, очень красиво
Romchik
Роман @Romchik 11.07.2015 22:153
+1
Всегда пожалуйста!
trem200
Александр @trem200 10.08.2015 09:114
+1
После установки вида у меня не корректно отображается сам вид материалов, а именно где должна быть аватарка добавившего материал попросту убегает вверх. А так вид материала хороший. Побольше бы таких видов материала.
Romchik
Роман @Romchik 10.08.2015 13:345
+1
Ссылку на сайт
Romchik
Роман @Romchik 10.08.2015 13:367
+1
Я у вас не вижу данного вида материалов
trem200
Александр @trem200 10.08.2015 13:378
+1
Я их уже поставил. Вид материалов находится в каталогах файлах.
Romchik
Роман @Romchik 10.08.2015 13:409
+1
http://f5.s.qip.ru/TWijOdz7.png У Вас все норм
Romchik
Роман @Romchik 10.08.2015 13:4711
+1
Когда я заходил, было все норм. Скорее всего вы удалили один </div>
trem200
Александр @trem200 10.08.2015 13:4812
+1
Я не знаю в чём дело, но вот меня настораживает,то что файлы которые самые последние, там страница отображается не правильно.
Romchik
Роман @Romchik 10.08.2015 13:4913
+1
Переустанови вид материалов. Ты что то удалил при редактирование. Когда я зашел было все норм http://f6.s.qip.ru/TWijOdz8.png
trem200
Александр @trem200 10.08.2015 13:5214
+1
По Вашему совету заново поставил исходный код вида материалов, и вот, что вышло я вам кидаю ссылку на эту страницу в, которой на шапке видно очень много надписей, и ещё видно,что странница выглядит не очень привлекательно.
http://igrowoz.net/load/?page12
simox
dfsd sdfsdf @simox 20.11.2015 22:5215
0
Я так понимаю это скрини аватарка автора материала? если да как мне поставить такую?????
Ромчик
С помощью get запроса к аватару пользоавтеля на персональной странице
simox
dfsd sdfsdf @simox 20.11.2015 23:0917
0
Пожалуйста можете объяснить подробней как сделать?
Ромчик
Заходите на персональную страницу и в самый низ вставляете код:
Код
<span style="display:none">
<span class="info_avtor_avatar"><?if($_AVATAR$)?>$_AVATAR$<?else?><img src="http://webmaster-ucoz.ru/master/avatar.png"><?endif?></span>
</span>

Далее переходите в вид материалов и это код:
Код
<img class="post-hover" src="$USER_AVATAR_URL$" alt="$TITLE$">

Меняете на:
Код
<div class="avtor_avatar_mat"><a href="$PROFILE_URL$" id="info_avtor_avatar" class="post-hover"></a></div>

Там же вставляете еще один код в нижнюю часть:
Код
<script type="text/javascript">    
$.get('$PROFILE_URL$', function(next){    
$("#info_avtor_avatar").html( $(".info_avtor_avatar", next).html() );    
});    
</script>
simox
dfsd sdfsdf @simox 21.11.2015 00:0319
0
Странно, аватарка поставилась только на последнюю новость
Ромчик
Ссылку на сайт
1 2 3 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта