» »

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

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

Классический вид материала под каталоги файлы и новости и также блог. Где идет в 3 колонки и выводит красивой стилистике дату. Больше он подойдет под игровой дизайн и можно на новостной блог, где по изображению, что перекреплено к материалу все корректно смотрится. Что по дате, то она сделано в кругу, который прозрачно на стилях выведен и только по своему дизайну дополняет и где-то можно сказать, что визуально смотрится очень оригинально.

В самом низу будет написано название, но здесь с ним можно поработать или оставить по умолчанию. Но когда вы наведете на его, то изначально появится зеленый фон с кратким описанием, который потом плавно перейдет в синее гамму. Здесь считаю что это лишнее, все от стилей зависит, но эффект безусловно впечатляет. Мне пришлось его немного доработать, а это краткое описание поставить в самом каркасе на условных операторах. Чтоб оно корректно показывало и выводило столько знаков, то, то есть количество что вы сами выставили.

Но и не обошлось без шрифтовых иконок, они будут в самом низу, под описанием, это сразу установлено, сколько скачали, если вы ставите на каталог файлов, если на другой модуль, то можете изменить оператор и что-то свое для функциональности поставить и не забыть установить под функцию шрифтовую иконку. Проверяя его на тестовом сайте, стало интересно как он адаптирован под мобильные аппараты. Что адаптация присутствует, это отличная новость, но она не стандартная как привыкли, что в одну струну при небольшом размере экрана становятся. В нашем случай они просто сжимаются и это все равно будет понятно, кто будет заходить на интернет ресурс с мобильных аппаратах.

Его нужно ставить на светлую площадку, если на темную, то в стилях цвета переписывать.

Вид материала в 3 колонки на сайт uCoz

Приступаем к установке:

1. Нужно обязательно подключить шрифтовые иконки, копируется и вверх сайта ставим, также можете по ссылке перейти и узнать как с ними работать.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


2. Первое что делаем, скачаем файл, в нем будет находится стили, которые прописаны в текстовом документе, что копируем и ставим CSS сайта.

3. Но здесь просто, в каталоге любом, но кроме форума идем вид материала и заменяем полностью код на этот.

Код
<div style="width:33%; float:left;">  
<figure>
  <img src="$IMG_URL1$" width="295" height="200" alt="$TITLE$">
  <h3>$TITLE$</h3><div class="uCoz1">$DATE$</div>
  <figcaption><a href="$ENTRY_URL$">
  <h2>$TITLE$</h2>
  <p>
<?if(len($MESSAGE$)>250)?><?substr($MESSAGE$,0,250)?>.....<?else?>$MESSAGE$<?endif?>
  </p>
<center><h4><span><i class="fa fa-thumbs-o-up"></i> $RATING$ </span><span><i class="fa fa-download"></i> $LOADS$ </span><span><i class="fa fa-comments-o"></i> $COMMENTS_NUM$</span></h4></center>
</a>
  </figcaption>  
  </div>

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

Вот видео тут показано как будет смотреться в разном количестве колонок



Источник: uCozz.pRo
11.03.2017 Загрузок: 12 Просмотров: 802 Комментарий: (27)

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

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

Комментарий: 27
Kolinkor
Kolinkor 11.03.2017 17:051
0
Где то такой информер встречал, также дату выводил, так сделано под новостной сайт, хоть и стоит кнопка сколько скачали, просто не могу его представить, но разве только на софт, там если программы скачивать, но не чем больше от других не отличается. Только вот название по центру нужно было вывести, но здесь правильно указал, все можно уже самому сделать.

Источник этого материала, также является: dbmast.ru
Сафрон
Сафрон 11.03.2017 17:093
0
Вот на информер точно оригинально было бы, но и сам вид тоже не чего, нет такого, что вааах, нормальный под светлый дизайн.
maniacvn
maniacvn 11.03.2017 17:309
0
Хорошая идея надо будет попробовать)
Kosten
Kosten 11.03.2017 17:3913
0
Думал что вы уже залили информер, а так не дурно бы было.
Сафрон
Сафрон 11.03.2017 17:082
0
Костен, в слове доработал, ты наверно все доделал с начало и до завершение.)
Kosten
Kosten 11.03.2017 17:154
0
Просто когда что то заливать, проверяю на тестовом, все сделано было, просто картинки были по своему размеру и если ставить, то одна шире, другая уже, здесь вид материала закрепил. Но и краткое описание выводит и его нужно было в рамки по знаком выставить, то и сделал. А так еще, когда maniacvn заливал на сайт, забыл стили шрифтовые добавить, так что все основное maniacvn сделал, с моей стороны только в рамки корректности поставить было и все, что по информер, то если не ошибаюсь есть такой уже.
maniacvn
maniacvn 11.03.2017 17:287
0
Картинки специально сделал чтоб разно размерные были а так все ок
Kosten
Kosten 11.03.2017 17:4416
0
Не нужно в комментариях ставить ссылки, потом на материал перенесу.
maniacvn
maniacvn 11.03.2017 17:5018
0
Я хотел показать что материал сделан самим а на идею вдохновил слайд эфект но замечание учту
Scheme
Scheme 11.03.2017 17:205
0
Что за интересный источник, этот эффект и сам вид на одном блоге давно видел, если вы его сделали под конструктор, но это же как понимаю не является источником, а реального нет источника.
maniacvn
maniacvn 11.03.2017 17:3511
0
Вот с чего делал чтоб не было глупых вопросов и предрассудков)
Kosten
Kosten 11.03.2017 17:256
0
Как нужно так и поставил источник, хотя понимаю что где то есть оригинальный, просто хая....ли с этими источниками, вам материал стараться каждый день что то новое и пользователи заливают, но все про источник, такое ощущение, что все купили умные книги. Если кто даст реальный, то размещу, как говорил с меня не убудет с этими источниками, и все кто еще скажет про него, в бан, просто надоедает эта тема.
Сафрон
Сафрон 11.03.2017 17:308
0
Кто знает, как делать, чтоб название постепенно исчезало, не доходя до правой стороны, здесь есть скрипты такие, не могу понять, только как делают.
maniacvn
maniacvn 11.03.2017 17:3210
0
всмысле медленее
Kosten
Kosten 11.03.2017 17:3512
0
Есть такие материалы, их ДимДимыч постоянно на этот эффект делает, если он в сети попрошу чтоб сделал.
ucozmental
ucozmental 11.03.2017 17:4114
0
Здесь тень убрать или меньше нужно сделать, сейчас с тенями уже как то не актуально, если они по всем сторонам и ели видно, а так вид материала понравился.
maniacvn
maniacvn 11.03.2017 17:4315
0
Ну это мелочи тень можно и убрать а так всем не угодишь)
Kosten
Kosten 11.03.2017 17:5219
0
Да там тень как раз была нормально, просто немного добавить, чтоб ярко выражены вид колонки было видно, все правильно, как и писал и здесь вы написали, кому нужно, тот может вообще убрать и обвод сделать ярким.
1 2 »
avatar