» »

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

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

Этот вид материала в 2 колонки на сайте, где идет адаптивность под все размеры монитора. Что имеет краткое описание и стильный дизайн. Можно много встретить порталов, где как раз идет 2 колонки, что позволяет на них разместить краткое описание и отличный вид изображение, что прикреплен в материалу. А если он еще настроен под все размеры монитора, то это отлично.

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

Как отрегулировать по ширине?

В стилях в самом конце прописаны media и нам нужен только один.

Код
.col-lg-4{width:46.7%;}}

Вот как раз 46.7% это регулирует ширину, что можно на один или на 5 колонок сделать, здесь пока выставлена на 2, у кого сильно фиксированный шаблон, то возможно не поместиться, что нужно процент просто уменьшить. У кого больше, то выставляем процент аналогично больше, чтоб заняло корректно всю ширину.

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

Вид материала файлов для сайта uCo

Это уменьшаем ширину экрана и как видим автоматически переходит в одну колонку, это где то смаркфон или планшет.

Вид материала адаптивный для uCoz

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

Светлый и адаптивный вид материала блога uCoz

Если с шириной все понятно, то приступаем к установке.

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

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

Нужно скачать архив, что все распечатано, где вы найдете текстовой документ, как раз на вид материала, что представлен на изображение выше. Вы можете поставить его полностью вид материала со стилями, так как стили стоят под style здесь заключены стили /style или убрать их и выставить в CSS, что потом намного облегчит настройка. Это выставление цветовой гаммы, если решите сменить, да и полностью редактировать легче стили, если в CSS прописаны.

Надеюсь понятно написал, если материал понравился и вы видите, что можно его как то реализовать на своем сайте, то просто скачиваем.
11.08.2017 Загрузок: 16 Просмотров: 589 Комментарий: (10)

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

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

Комментарий: 10
Critic©
Critic© 11.08.2017 01:191
0
В 2 колонки всегда нормально показывает, это уже в 3 не чего не понять, как все набито. Но когда поставил почему то у меня название не как на скрине не под жирным, что показано, если ставить больше размер, то не чего не выходит, только расширяет буквы. Как оставить этот размер, но сделать жирный шрифт, и где это можно сделать в стилях или в коде просто поставить в титле B и все
Kosten
Kosten 11.08.2017 01:312
0
Ранее BB кодами делал жирные знаки, но сейчас стилями, просто находим стиль, что за цвет титле отвечает и к нему дописывает этот стиль, что будет жирным, но как видим не очень смотрится, что по мне, так лучше оставить как есть.

Этот стиль отвечает за жирность знаков.

Код
font-weight: bold;


Пот так получится,как то не очень, хотя кому как.

Critic©
Critic© 11.08.2017 01:383
0
Нормально получилось и видно хорошо, хотя мне это не для сайта, пока просто изучаю как можно выстроить свой шаблон. Новый шаблон самый первый игровой понравился, вот с его и хочу облагораживать, что пока не решил в 2 колонки ставить или одну, просто еще как видно нужно и цвет менять.
Как вам новое поступление шаблонов?
Kosten
Kosten 11.08.2017 02:054
0
Этот игровой шаблон тоже понравился, он темно прозрачный и можно поставить тематическое изображение, думаю вскоре увидим на нем оригинальный шаблон созданный.

А на счет новых шаблонов от конструктора uCoz уже здесь создана тема, если есть что написать, по плиз.
Kosten
Kosten 11.08.2017 02:135
0
Забыл написать, когда проверял на тестовом сайте, это уже на новых шаблонах, и сжимал браузер, чтоб посмотреть как трансформируется вид материалов, почему то верх блоков, где описание, фоном становились. Но потом перешел на старый шаблон и стили все выставил как нужно, все нормально стало. Здесь не знаю, или с шаблонами, что то не так, но на старом все отлично показал на счет адаптивности, хотя и там показывал ее, только фон с этого блока становился.
First
First 11.08.2017 18:596
0
Оч. знакомый вид материалов
Kosten
Kosten 11.08.2017 19:587
0
Все просто, с этого вид материала сделан на 2 колонки.
First
First 11.08.2017 20:158
0
А не с этого ?
Kosten
Kosten 11.08.2017 20:319
0
Не знал, думал в паблике этот вид материала.
Kosten
Kosten 11.08.2017 20:3310
0
Вверх сайта круто сделан с окном регистраций или зайти как пользователь. Хотя реально что то немного надоело, хоть один форум оставляй, не зря почти все на эту тематику забили. Не понимаю, я один не знаю что то и тупо заливаю.)
avatar