» »

Полностью адаптивный вид материалов для uCoz

Полностью адаптивный вид материалов для uCoz

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

Если говорить про характеристику этого материала и его тематического наклонение, то на свет темы, он отлично впишется на все группы тем. Это не говоря под разный дизайн, находящийся интернет ресурс. Здесь просто как на светлый он идет, что вам будет продемонстрировано на изображение, так и на темный подойдет. Также не забываем, что к нему подключены шрифтовые иконки, которые будут выводить рейтинг на самой основе, а голосовать и ставить его нужно в самом материале, где автоматически он появится и здесь. Не забываем, что на прозрачном синем фоне в левом верхнем углу, будет вас оповещать, под какой именно категорий принадлежит, тот или иной файл, или статья. Сделано и подобрана гамма цвета так, чтоб на любом фоне смотрелось визуально. Но это все сделано на стилях, где вы можете изменить.

Изначально по картинке было так, она не вся показывалась, но этот стиль не стал убирать, а просто его запретил, что вы сами можете потом его восстановить. Само изображение должно появятся полностью, но бывает такое, как сжимается, вот здесь этот стиль object-fit: cover, вам может пригодиться, что вам останется его активировать, он будет в желтом оттенке в CSS. В правом нижнем углу рейтинг, про что говорилось ранее, то там еще одна иконка будет, которая отвечает за комментарий, что если кто оставить пост, то покажет численность. Так что все очень понятно и сделано краткое описание, которое вы в самом коде можете выставить, сколько должно выводить знаков. Больше не чего в нем нет, он сделан просто для полного понимание, чтоб можно было посмотреть на скрин и понять, что находиться и что можно скачать или прочесть. Как по клику на изображение или на название, вы перейдете на вид материала и комментариев к нему.

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

Теперь переходим, как будет визуально смотреться на разном размере монитора или мобильных аппаратах.

В самом коде будет такой оператор, что отвечает за вывод описание внизу.

Код
<?if(len($MESSAGE$)>234)?><?substr($MESSAGE$,0,234)?>.....<?else?>$MESSAGE$<?endif?>


Здесь выставлено 234, что значит, столько именно знаков выводить будет, так что сами выставляем как вы считаете.

Это по умолчанию и как видите внизу идет полоса, это значит наведен клик.

Вид под файлы и материала на сайт uCoz

Это если смотреть с планшета или смартфона, здесь видим клик не наведет и стрелка " полоса" в правом углу так будет.

Вид материала настроен на адаптивность для сайта

Здесь можно сказать и визуально видно, что уже вид с узкого расширение и по сути не чего изменилось.

Красивый вид материалов на мобильные аппараты сайта

Чтоб вам поставить на свой портал, то нужно скачать архив и в нем найдете текстовый документ, где все подробно по установке описано, как установить шрифтовые кнопки, где в описание дай ссылку на них, по работе с ними. И Безусловно сам код, что идет на вид материала и стили, что нужно поместить в CSS сайта и дизайн виде цвета меняем так, структуру не трогаем, она настроена на адаптивность, которая сейчас актуальна.

Автор: waak
Источник: bоbа.ucoz.com
05.04.2017 Загрузок: 8 Просмотров: 561 Комментарий: (9)

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

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

Комментарий: 9
FeStemBer
FeStemBer 05.04.2017 19:471
0
Если судить, то это один и тот же вид материала, что был недавно, и указан в описание, только на всю ширину. Просто изменили настройки в стилях, что waak в комментариях оставил. И адаптивность осталось и все те же функций, как комментарий и рейтинг, но почему то этот больше нравится, может потому, что его редко ставят, но сейчас он настроен, а что углы закруглили, го надо что то изменить.
Kosten
Kosten 05.04.2017 20:024
0
Считаю так, если вид визуально изменен, а здесь так и есть, то можно его другим материалом. А здесь если смотреть на первый и второй, то только рейтинг одинаковый.
tsakonter
tsakonter 05.04.2017 19:522
0
Правильно сделали, хоть и один и тот же вид материалов, но уже в разных вариациях, и если ты не знаешь, то можно подумать, что этот с нуля написан. Его под игровые новости, там основном такой вид наблюдаю. Но и блог, не нужно забывать, когда большой скрин и снимок сделан правильно, то больше рекламы не найти, хорошо привлекает.
Kosten
Kosten 05.04.2017 20:045
0
Вот на блог он больше подойдет, на счет новостей не знаю, просто не очень они мне попадались. А где если этот модуль, там не далеко и каталог файлов, здесь только одно, нужно делать корректные изображение по размеру, чтоб видно изначально, что за материал расположен или прописан.
tsakonter
tsakonter 05.04.2017 19:533
0
Но описание большое, хоть ссылки в них проставлены, а то так не интересно читать было.
Brung
Brung 05.04.2017 20:406
0
Здесь на этот счет, можно было синее полосу убрать, она и так слишком тихо идет, но в стилях можно скорость прибавить. Но лучше поставить светло темный экран, который при клике исчезает, на многих вид материалах установлен такой эффект, хотя раньше и без него обходились.
Kosten
Kosten 05.04.2017 21:337
0
Ее можно убрать, просто запретить в стилях и не будет светло синей черты, хотя вот на счет эффекта тусклости, здесь на широком более подошло.
Марковичь
Марковичь 05.04.2017 21:598
0
Вот на темный его поставить и под светло желтый оттенок вывести, явно ярко бы светил.
Kosten
Kosten 05.04.2017 22:209
0
Но это можно каждому сделать, кому не нравится или хочет чтоб оригинальнее был, но добавить новыъ эффектов, может и что то по описанию, просто в саму конструкцию не лесть, то можно адаптивность снести, что не желательно делать, так как вид под нее и создавался.
avatar