ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вид материала файлов для uCoz от Angerfist

Вид материала файлов для uCoz от Angerfist

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

Также вы при наведение увидите эффект затемнение. Хорошо подойдет под софт порталы, где можно выставлять как программы изображение, так и под другие тематики. Здесь просто нужно установить. что все делаться не сложно и посмотреть. Как видите в низу будет у него название под каждый файл, и кнопки, как просмотра и комментариев, что можно сказать. он уже под статьи полностью настроен. Увеличение будет системное от uCoz и окно стандартное ulightbox. Но наверно одно из главных, он адаптирован, что изначально был создан Angerfist.

Вид материала файлов на uCoz

Установка:

Вид материала:

Код
<div class="form-type">
<div class="img-form" style="background-image: url('$IMG_URL1$')">
<div class="shadow"><div class="zoom">
<a href="$IMG_URL1$" class="ulightbox">
<img src="/Ajaxoskrip/Aster/zoom.png" width="28" height="28" border="0" title="Увеличить" /></a>
</div></div></div>  
<div class="title">
<a href="$ENTRY_URL$" title="Перейти к просмотру">20)?>...$TITLE$</a></div>  
<div class="rating">
<span class="num-rate" title="Просмотры|Комментарии">
<span class="vie-icon"></span><b style="margin: 0;"> $READS$</b>
<span class="com-icon"></span><b style="margin: 0 5px 0 0;"> $RATING_NUM$</b></span></div>
</div>


CSS

Код
.form-type {  
width:32%;  
float:left;
margin: 0.5% 0 0.5% 1%;
border: 1px solid #D3D3D3;
border-radius: 3px;  
}
.title {
height: 22px;
text-align:left;
font-size: 14px;
margin: 0 5px;
}
.rating {
text-align:right;
background-color: #F5F5F5;
}
.img-form {
z-index:1;
border-radius: 3px 3px 0 0;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.num-rate {
color:#000;
font-size:14px;
}
.zoom {
display:block;
z-index:2;
position: absolute;
top:5px;
right:5px;
}
.shadow {
opacity:0;
position: absolute;
transition: all 0.5s ease 0s;
background-color: rgba(0,0,0,0.6);
width: 100%;
height: 100%;}
.shadow:hover {
opacity: 1;
}  
.vie-icon {
width: 14px;
height: 12px;
background: url('/Ajaxoskrip/Aster/11.png')no-repeat;
display: inline-block;
}
.com-icon {
width: 14px;
height: 12px;
background: url('/Ajaxoskrip/Aster/12.png')no-repeat;
display: inline-block;
}
@media only screen and (max-width: 768px) {
.title {height:38px;}
}  
@media only screen and (max-width: 640px) {
.form-type {width:48%;}
}


На тестовом сайте посмотрел все встало на место как нужно, выстроилось и стазу визуализация стала другой, что является естественным. Но думаю главное, вам прочесть ЗДЕСЬ об этом материале, так как описал его как видел, там подробно прописано, что нужно настраивать а что не трогать, просто от автора описание идет.
04 Августа 2016 Просмотров: 2447 Комментариев: (11)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 10
Scheme
Scheme 04 Августа 2016 06:011
0
Но он так сильно от других по дизайн не отличается, но что адаптирован сразу, это вообще не бывает. но очень редко, больше всего ставить будут из за этого. А так не ставить на сайт, можно понять как он работает. Просто нужно больше сделать знаков, то мало показывает, а так просто все как нужно.
Maryges
Maryges 04 Августа 2016 06:062
0
Красиво смотрится, вот еще добавить, сколько скачали. И что то не могу найти кнопку редактирование, хотя ее на вид можно и не ставить, вид материала и комментариев все установить можно.
Kosten
Kosten 04 Августа 2016 06:143
0
Вот как раз все написано, что ссылку под материалом на основной материал дал. Также вы найдете кнопку редактирование, которая уже подкована, и вы можете сами поставить, куда вам нужно.
Angerfist
Angerfist 08 Августа 2016 13:307
0
В коде материалов есть ошибки из-за редактора, он режет код при втором редактировании что ли...Я сам не могу редактировать так как материал не я заливал.

Исправленный код такой:
Html
Код

<div class="form-type">
<div class="img-form" style="background-image: url('$IMG_URL1$')">
<div class="shadow"><div class="zoom">
<a href="$IMG_URL1$" class="ulightbox">
<img src="ссылка к картинке/zoom.png" width="28" height="28" border="0" title="Увеличить" /></a>
</div></div></div>
<div class="title"><a href="$ENTRY_URL$" title="Перейти к просмотру"><?if(len($TITLE$)>20)?><?substr($TITLE$,0,20)?>...<?else?>$TITLE$<?endif?></a></div>
<div class="rating">
<span class="num-rate" title="Просмотры|Комментарии">
<span class="vie-icon"></span><b style="margin: 0;"> $READS$</b>
<span class="com-icon"></span><b style="margin: 0 5px 0 0;"> $RATING_NUM$</b></span></div>
</div>

CSS
Код

.form-type {
width:32%;  
float:left;
margin: 0.5% 0 0.5% 1%;
border: 1px solid #D3D3D3;
border-radius: 3px;
}
.title {
z-index:2;
position: relative;
height: 22px;
text-align:left;
font-size: 14px;
margin: 0 5px;
}
.title a {
text-decoration: none;
}  
.rating {
overflow:hidden;
text-align:right;
background-color: #F5F5F5;
}
.img-form {
z-index:1;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
border-radius: 3px 3px 0 0;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.num-rate {
color:#000;
font-size:14px;
}
.zoom {
display:block;
z-index:1;
position: absolute;
top:5px;
right:5px;
}
.shadow {
opacity:0;
position: absolute;
transition: all 0.5s ease 0s;
background-color: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
}
.shadow:hover {
opacity: 1;
}  
.vie-icon {
width: 14px;
height: 12px;
background: url('http://zornet.ru/Ajaxoskrip/Aster/11.png')no-repeat;
display: inline-block;
}
.com-icon {
width: 14px;
height: 12px;
background: url('http://zornet.ru/Ajaxoskrip/Aster/12.png')no-repeat;
display: inline-block;
}
@media only screen and (max-width: 768px) {
.title {height:38px;}
}  
@media only screen and (max-width: 640px) {
.form-type {width:48%;}
}  
csretven
csretven 04 Августа 2016 06:194
0
Вот как то под кино сайт можно настроить, но здесь правильно, под софт само то подходит. И на главной можно как больше вывести, и вообще за этим видом будущее, просто все больше его замечаешь на сайтах. чем вид материала, который как здесь. Но здесь на любителя, кому то просто нравится краткое описание прочесть, которого здесь как понимаю не будет, но все можно настроить.
trem200
trem200 08 Августа 2016 05:535
0
Вид отличный получился, но есть косяк, а именно когда сидишь с телефона, то не можешь перейти в файл, который хочешь просмотреть.
Angerfist
Angerfist 08 Августа 2016 13:266
0
И снова здорова дружище)! Да мой косяк, в спешке невнимательность...
Вообщем добавить надо в стили .title:
Код

.title {
z-index:1;
position: relative;
trem200
trem200 08 Августа 2016 17:218
0
Всё равно ни чего не происходит, сейчас проверил на телефоне, и всё равно, не могу просмотреть добавленный файл.
Angerfist
Angerfist 08 Августа 2016 17:449
0
Проверил твой сайт через эмуляторы, ссылка нажимается, переход по надписи а не по картинке я делал, и если что смени z-index:1 на 2
Angerfist
Angerfist 10 Августа 2016 10:3710
0
Если и это не помогло, то соседнему блоку внизу (просмотры,комментарии) пропиши overflow:hidden;
Войдите:
avatar