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

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

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

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

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

1. Этот идет без категорий.

Красивый вид материала на юкоз

2. Здесь как можно заметить она уже есть.

Мобильный вид материала для файлов uCoz

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

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

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

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

Но на этот все, надеюсь все разберутся, если будут вопросы, как к примеру, что можно изменить стилистику или поменять цвет, где название. То это все вы можете сделать в css, просто не трогайте стили, что отвечает за мобильность.

Так как они отвечают за адаптивность, что если их немного сбить и не будет корректно выводить, что по остальным, все настраиваем и делаем под ваш сайт, так как у каждого свой оттенок цвета на интернет ресурсе и здесь безусловно нужно подгонять по свой оригинальный сайт.
10 Августа 2017 Загрузок: 16 Просмотров: 2126 Комментариев: (23)

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

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

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

Комментарии: 23
Critic©
Critic© 10 Августа 2017 20:521
0
Вот только углы убраны и совершенно другой вид, этот больше нравится, чем закругленными углами, просто на том слишком закруглили. И тон подобрали светлый, то просто синий уже надоедает и что то хочется нового. А что с категорий, то везде уже есть такое, мне больше импонирует, где чистый скрин.
Kosten
Kosten 10 Августа 2017 20:592
0
С таки оттенком цвета не встречал сайты, но сделано хорошо, что также мне лично как то больше понравился этот вид, хоть эти углы просто не выношу, все на сайте закруглил. Просто все правильно, у того вид материала много пикселей выставлено на закругление, если поставить 3 или 5, то не заметно почти будет.
Dagada
Dagada 10 Августа 2017 21:233
0
Извиняюсь поспешил много хлама ненужного 07a не обратил внимания на старые css.



Вроде все почистил ...не обессудьте... мой косяк
Kosten
Kosten 10 Августа 2017 21:264
0
Бывает, это на какое изображение идет, под какой вид, 1, или 2 что в материале представлен.
Dagada
Dagada 10 Августа 2017 21:275
0
с категорией
Kosten
Kosten 10 Августа 2017 21:5710
0
А так по сути, там же оператор, что на втором вид материале, можно вместо категорий поставить к примеру дату или раздел. Но категория безусловно по теме будет, так как ниже она не прописана.
Kosten
Kosten 10 Августа 2017 22:0714
0
Здесь под споллером код и стили на второй вариант вид материала, что также в архиве он представлен.
Dagada
Dagada 10 Августа 2017 21:306
0
без категории только надо убрать
Код
<div class="news-date">$CATEGORY_NAME$</div>
/********************/
CSS
.news-date{  
position: absolute;  
top: 6px;  
left: 6px;  
padding: 2px 7px;  
color: #fff;  
background: #01B94C;  
opacity: 0.7; /* Полупрозрачный фон */  
filter: alpha(Opacity=70); /* Прозрачность в IE */  
font-size: 14px;  
font-weight: 700;  
text-shadow: #06375C 0 1px 1px;  
}  
Kosten
Kosten 10 Августа 2017 21:337
0
Dagada, на тестовом сайте проверял, что сразу заметил, и убрал, кроме стилей. Сейчас все по новому загружу.
Kosten
Kosten 10 Августа 2017 21:569
0
Это все убрал, в текстовом документе, что скачаете, там уже нет не каких об весов.
Kosten
Kosten 10 Августа 2017 21:498
0
Dagada, все исправил и проверил, все нормально, но думаю лучше самому скачать и посмотреть все 2 кода.
Critic©
Critic© 10 Августа 2017 22:0111
0
Скажите, можно вот именно этот вид материала сделать на 2 или 3 категорий.
Kosten
Kosten 10 Августа 2017 22:0613
0
Здесь лучше спросить у Dagada, он отлично как видно изучил коды и все стили.
Kosten
Kosten 10 Августа 2017 22:0512
0
На шаблоне, где сильно фиксированная ширина, этот вид отлично подойдет, а вот уже где ширина с фиксацией как на этом сайте, здесь он кажется большим и на такую ширину лучше вывести все правильно, 2, 3 колонки.
1 2 »
avatar