» »

Адаптивный вид материалов Rux-3 для uCoz

Адаптивный вид материалов Rux-3 для uCoz

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

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

Что по описанию, то не стал задавать ему изначальную длину по знакам, что если кто решит сделать и не знает, то ниже представлено под описание. Вам нужно будет заменить MESSAGE и в место его поставить что предоставлено.
Код
<?if(len($MESSAGE$)>134)?><?substr($MESSAGE$,0,134)?>.....<?else?>$MESSAGE$<?endif?>


Если вам также нужно сократить или ограничить по знакам название, то заменяем TITLE и выставляем сколько должно выводиться знаков.
Код
<?if(len($TITLE$)>23)?><?substr($TITLE$,0,23)?>...<?else?>$TITLE$<?endif?>


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

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


Так на любом сайте не смотря на его фиксацию, вообщем по умолчанию как зайдете на портал.

Вид материала файлов, блог для uCoz

Вот это уже на смаркфон или мобильный аппарат.

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

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

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

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

Автор и источник: ucozz.pro
22.08.2017 Загрузок: 2 Просмотров: 405 Комментарий: (16)

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

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

Комментарий: 16
-SAM-
-SAM- 22.08.2017 02:091
0
Опять пошёл разговор про то, что резка делается через условный оператор, когда уже множество раз всё это обсуждалось, что потом каркас шаблона слетает и ошибки в исходном коде (ведь уверен, что не все же будут просто писать голый нестилизированный текст в описание). Подрезку нужно делать визуально, что в шаблоне прописывается высота блока и задается overflow:hidden (чтобы скрывалось то, что не поместилось). Доступно только для пользователей - пример того, как это делается (и да, демагогии не нужно в этот раз очередной).
Kosten
Kosten 22.08.2017 10:033
0
Резка здесь больше для статьи, кто хочет срезать, а не написано, что ее обязательно ставить.
-SAM-
-SAM- 22.08.2017 21:578
0
Можно не писать этот способ каждый раз, а дать ссылку на возможные варианты, но, как видно, вы этот способ только и пишите, чтобы делали (а он как раз не из лучших). Посему я каждый раз пишу про альтернативу, как и объяснять почему способ резки не всегда удачный, раз вы не указываете о возможных последствиях. Всё же просто.
-SAM-
-SAM- 22.08.2017 02:452
0
Kosten
Kosten 23.08.2017 01:039
0
Тут вопрос такой, по краткому, -SAM-, можно этот код выставить вид материала и комментариев на файлов, если можно, то как знаки или что выставлять, если краткое выводиться вид материалов.

Код
<?if($BRIEF$ and (strpos($BRIEF$,'<')='-1' or strpos($BRIEF$,'>')='-1' or strpos($BRIEF$,'"')='-1'))?>Код вывода на description через поле краткого описания<?endif?>


Если говорить об этом сайте: kinovego.ru
-SAM-
-SAM- 23.08.2017 06:3810
0
maniacvn
maniacvn 22.08.2017 11:184
0
По умолчанию и так выводит краткое описание а на странице материала полное,поле так и называется краткое описание что бы максимально кратко и четко описать материал.Рад что материал понравился и вышло 0.2 версия ).А так изначально делал для игровой тематики в данный момент код перебрал убрал лишнее добавил настроенную адаптацию вот что получилось
Kosten
Kosten 22.08.2017 14:035
0
maniacvn, но здесь видно, что фон автоматически идет от изображение, что прикреплено к материалу.
maniacvn
maniacvn 22.08.2017 14:176
0
Так смотрится лучше да и мудрить с фоном не нужно ну а по желанию можно в виде переправить на 2 и ставить самому любой фон для любого материала)
Kosten
Kosten 22.08.2017 15:357
0
maniacvn, как можно сделать, так как в этом материале просто выведен цвет.
maniacvn
maniacvn 23.08.2017 18:1111
0
Используй свойство background а в качестве фона и указуй скрин
maniacvn
maniacvn 23.08.2017 18:1212
0
Вернее в качестве background используй фото материала
Kosten
Kosten 23.08.2017 18:1513
0
maniacvn, так это вид материалов стиль прописывать, или как и где ставить.
maniacvn
maniacvn 23.08.2017 19:2714
0
Я в сам вид прописывал но это только для игр подходит когда скрины другие то разлапистый будет.
Kosten
Kosten 23.08.2017 20:4415
0
maniacvn, вы можете поделиться кодом в комментариях или на форуме, думаю многим понравится такая тема.
maniacvn
maniacvn 28.08.2017 16:0916
0
style="background: url($IMG_URL1$)
avatar