» »

Вид материалов 2 колонки для uCoz


Каждый владелец сайта или блога, хочет создать красивый и оригинальный ресурс и здесь вид материалов будет отличным решением начать с оригинальности портала. Где установив его он становиться сразу не похожий на другие и этим он явно будет выделяться. И здесь вы можете посмотреть этот вид, который явно отличается от всех других, даже мало похожих. Его функция заключается в том, что только вы можете создать 2 колонки и не более и также как без эффектов, которые идут в стилях и можно сказать что в этом он стильный во всех аспектах.

Когда вы наводите на само изображение, то появляется краткое описание, если это каталог файлов, в коде сразу прописано, что только не менее 200 знаков. Это на тот случай, если вы будете устанавливать на другие модули, как блог или статья. И там же с описанием вы найдете кнопку редактирование, но здесь вам видней, можете убрать ее. Не стал делать само название по верх и предоставляю как он есть, но много в комментариях писали, что название можно и отдельно сделать, но повторюсь, вам видней.

Вид материалов 2 колонки для uCoz

Установка:

Вид материала главного вашего модуля или можете на другой, кроме форума, и там вид материала меняем на этот скрипт.

Код
<div style="width:50%;float:left;">  
<div class="vidnews">  
<div class="imgbigload" style="background-image: url('$IMG_URL1$'); margin: 15px 0;">  
<div class="brief1" style="cursor:pointer;" onclick="location.href='$ENTRY_URL$'"> <p style="color: rgb(255, 255, 255); padding: 7px;"><?substr($MESSAGE$,0,200)?>...</p></div>  
<div class="loadnames"> <div class="title1 textadapr" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?></div> </div>  
</div>  
</div>  
  </div>


Теперь CSS:

Код
.vidnews {border-bottom: 1px solid #eee; margin-bottom: 10px;opacity:0.9;}  
.vidnews:hover {border-bottom: 1px solid #eee; margin-bottom: 10px;opacity:1;}  
.imgbigload {display: block;box-shadow: 0px 0px 15px rgba(0,0,0,0.04);border-radius:5px; background-size: cover; position: relative; margin: 0; background-size: cover; width: 98%; height: 170px;}  
.imgbigload:hover {box-shadow: 0px 0px 15px rgba(0,0,0,0.04);}  
.loaddates {background:#333;padding-left:10px;padding-right:10px;position: absolute; bottom: 10px; left: 20px; color:#fff; font-size: 14px; }  
.loadsave {opacity:0.5;border-radius:5px;position: absolute; bottom: 10px; left: 10px; background: #333; padding: 3px 15px; font-size: 13px; }  
.loadsave:hover {opacity:0,9;background: #444;border-radius:5px;}  
.loadsave a {color:#fff; }  

.title1 a {color: #fff;text-shadow: 0 1px 2px #222;}  
.title1 a:hover {color: #efefef;text-shadow: 0 1px 2px #222;}  
.title1 {margin-bottom: 12px;padding-left: 5px;font-size: 17px;line-height: 1.333;font-weight: bold;color: #444;padding: 20px;}  

.brief1 {opacity: 0;position: absolute;transition: all 0.7s ease 0s;background-color: rgba(0, 0, 0, 0.85);width: 100%;height: 100%;border-radius:5px;}  
.brief1:hover {opacity: 1;}  
.brief1 a {color:#fff;}


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

Источник: Yraaa.ru
29.11.2015 Просмотров: 894 Комментарий: (19)

Поделиться в социальных сетях

Материал разместил

Комментарий: 19
Kvint
Kvint 29.11.2015 05:141
0
Еще вчера пробовал поставить этот вид материала, так смотрится нормально, но по дизайну не подошел. Видать сайт yraaa вдохновитель всех веб мастеров, если что то на нем появилось, нужно ждать на всех сайтах по этой тематике.
Kosten
Kosten 29.11.2015 05:202
0
Kvint, сильно не нужно усложнять, да безусловно самый продвинутый сайт, это не говорит о том, что там все материалы. Если что то и взял от туда, то ставлю источник с активной ссылкой. Но бывает такое, что нашел скрипт и немного по дизайну переделал и так поправил как нужно, потом залил и с темя спрашивают, а где источник.

Но где драл там он не прописан, если это ваш, то пишите, сколько раз говорю, не переломает поставить его.
Сопрано
Сопрано 29.11.2015 05:453
0
Вообще красиво сделано, много на другом CMC видел, видать пора пришла и до системы. А так, сделать меньше или как написаано убрать редактирование, хотя для поиска эта кнопка не видна. И можно само название вывести по верх, то там оно не очень видно будет, смотря какой оттенок.
Kosten
Kosten 29.11.2015 06:064
0
Почему на другом хостинг есть а вот на uCoz не было такой фишки, были и давно уже. Но возможно не такие, что краткое описание в нем прописывали, но что то похожее на это точно.
Slavik
Slavik 29.11.2015 07:275
0
Очень приятный вид! smile wink
Kosten
Kosten 29.11.2015 14:596
0
Slavik, здесь полностью согласен, а еще он полностью рабочий.Что можно самому сделать функциональность, как нужно администратору.
avatar
Admin9770 01.06.2016 13:547
0
Здравствуйте подскажите как можно сделать что б Название материала выше картинки стала, а то сливается с картинкой, помогите cry
Kosten
Kosten 01.06.2016 14:398
0
Admin9770, просто здесь изначально так сделано, возможно вывести, но какой то информер получится.
avatar
Admin9770 01.06.2016 14:549
0
Спасибо пол дня просидел все таки сделал вот примерно так, тока еще не доработал.
Kosten
Kosten 01.06.2016 14:5810
0
Admin9770, хорошо получилось, и по ширине, но по высоте, можно добавить еще немного, хотя кому как видно.

Kosten
Kosten 01.06.2016 15:1411
0
Попробуйте поставить на блок вот этот дизайн, то у вас там не по тематике, возможно это лучше будет.



В стилях 89 ссылку смените.
Код
.boxTitle {height:44px;background:url('/.s/t/923/8.gif') no-repeat;padding-bottom:25px;padding-left:45px;color:#000000;}
avatar
Admin9770 01.06.2016 15:4512
0
Цитата Kosten
Попробуйте поставить на блок вот этот дизайн, то у вас там не по тематике, возможно это лучше будет.


а где взять такую картинку ? wacko
Kosten
Kosten 01.06.2016 15:5513
0
Цитата Admin9770
а где взять такую картинку ?


Admin9770, так сделал же уже, просто копируем и ставим.



В стилях 89 ссылку смените. Вот этот стиль поменяйте на на тот который стоит у вас.
Код
.boxTitle {height:44px;background:url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/53458.gif') no-repeat;padding-bottom:25px;padding-left:45px;color:#000000;}
avatar
Admin9770 01.06.2016 16:1014
0
Подскажи как убрать нижнию линию и растянуть изображение
Scheme
Scheme 01.06.2016 16:1515
0
Интересно, а что за линия?
avatar
Admin9770 01.06.2016 16:2216
0
Вот Скриншот удален
avatar
Admin9770 01.06.2016 16:2417
0
Цитата Kosten
Admin9770, так сделал же уже, просто копируем и ставим.

В стилях 89 ссылку смените. Вот этот стиль поменяйте на на тот который стоит у вас.

Спасибо огромедное класс biggrin
1 2 »
avatar