ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивный вид материалов 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?>

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

Код

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

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

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

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

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

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

Автор и источник: ucozz.pro

22 Августа 2017 Загрузок: 4 Просмотров: 1595 Комментариев: (15)

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

СКАЧАТЬ

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

Kosten

Похожие материалы

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

Комментарии: 15
Порядок вывода комментариев: -SAM- 22 Августа 2017 02:09¹ 0 Опять пошёл разговор про то, что резка делается через условный оператор, когда уже множество раз всё это обсуждалось, что потом каркас шаблона слетает и ошибки в исходном коде (ведь уверен, что не все же будут просто писать голый нестилизированный текст в описание). Подрезку нужно делать визуально, что в шаблоне прописывается высота блока и задается overflow:hidden (чтобы скрывалось то, что не поместилось). Доступно только для пользователей - пример того, как это делается (и да, демагогии не нужно в этот раз очередной). Kosten 22 Августа 2017 10:03³ 0 Резка здесь больше для статьи, кто хочет срезать, а не написано, что ее обязательно ставить. -SAM- 22 Августа 2017 21:57⁸ 0 Можно не писать этот способ каждый раз, а дать ссылку на возможные варианты, но, как видно, вы этот способ только и пишите, чтобы делали (а он как раз не из лучших). Посему я каждый раз пишу про альтернативу, как и объяснять почему способ резки не всегда удачный, раз вы не указываете о возможных последствиях. Всё же просто. -SAM- 22 Августа 2017 02:45² 0 Конечно, что у кого на сайте не было ранее поля под краткое описание материала, не заполнялось, то уже у них как-то и был вывод до этого... но, как и сказал, что это не повод каждый раз советовать делать резку (когда такой случая каждый раз представится - очень часто, как посмотреть). Просто для себя лично нужно уяснить, что такой способ не есть нормальным решением, как и другие должны знать о его последствиях возможных (а не так, что кто-то привык делать, можно сказать, по плохому и потом это же делать советует другим, поскольку другого способа не знает или не хочет разбираться в нём). Такого рода подрезка имеет последствия, но и способ из быстрых: кому плевать на то, что каркас шаблона слететь может на какой-то там странице, что будет неправильная структура html и соответственно разбор правильно браузером пропадёт, как и не нужно париться с тем, что материалы ранее добавленным обрабатывать, чтобы резалось правильно - не попало там где-то на незакрытый html-тег или смайлик какой проставленный... что ранее добавленные материалы ходить править, вводя поля краткого описания или размещать какой-то код, чтобы исходя от него резалось - вот тут писал, кому интересно, в спойлере там. Kosten 23 Августа 2017 01:03⁹ 0 Тут вопрос такой, по краткому, -SAM-, можно этот код выставить вид материала и комментариев на файлов, если можно, то как знаки или что выставлять, если краткое выводиться вид материалов. Код <?if($BRIEF$ and (strpos($BRIEF$,'<')='-1' or strpos($BRIEF$,'>')='-1' or strpos($BRIEF$,'"')='-1'))?>Код вывода на description через поле краткого описания<?endif?> Если говорить об этом сайте: kinovego.ru -SAM- 23 Августа 2017 06:38¹⁰ 0 Суть уловили? Это всё в той теме объяснил уже. Этот код дал как проверку того, что в кратком описании попадаться могут эти символы, что при резке потом слетает, когда вывод идёт в качестве мета-описания из поля краткого описания материала. В общем, способ не имеет привязки конкретно к какому-то сайту (как там спрашивал пользователь на форуме), да и в основном для тех, кто пакет нужный с SEO-модулем не оплачивает (отсюда и такие "танцы с бубном", так сказать). Про вывод в виде материалов речи не шло, поскольку даже если попадаются эти символы в области до выбранного количества выводимых символов (ограничитель резки), то не факт, что там незакрытый тег... тег может быть закрыт, тогда и резка нормально сделается, что не слетит структура html... тут проблема в том, что именно подрезка может придти на незакрытый тег (открыли его, а закрытый остался за пределами резки). И если краткое выводиться в виде материалов, как вы сказали - его и нужно выводить... тут вся сложность в том, что у кого стоял ранее другой вид материалов без вывода описания материала, а после захотят поставить себе такой вид материалов с выводом описания, то будут проблемы такие. Сам уже сталкивался с этим, например, на том же diz-cs, что были в макете отрисовали вид материалов с описанием, а его ранее и не было на сайте... а выводить полный текст материала - это полнейший бред (индексация сайта поменяется), как и ходить перелопачивать весь сайт, заполняя тексты эти с кратким описанием - не каждый сможет... а резка такая в большинстве своём может лишь каркас шаблона нарушить. Вот и выходит, что менять вид материалов - морока одна, если кто и меняет, то всё от сайта зависит. Для молодых проектов сделать это не проблема. maniacvn 22 Августа 2017 11:18⁴ 0 По умолчанию и так выводит краткое описание а на странице материала полное,поле так и называется краткое описание что бы максимально кратко и четко описать материал.Рад что материал понравился и вышло 0.2 версия ).А так изначально делал для игровой тематики в данный момент код перебрал убрал лишнее добавил настроенную адаптацию вот что получилось Kosten 22 Августа 2017 14:03⁵ 0 maniacvn, но здесь видно, что фон автоматически идет от изображение, что прикреплено к материалу. maniacvn 22 Августа 2017 14:17⁶ 0 Так смотрится лучше да и мудрить с фоном не нужно ну а по желанию можно в виде переправить на 2 и ставить самому любой фон для любого материала) Kosten 22 Августа 2017 15:35⁷ 0 maniacvn, как можно сделать, так как в этом материале просто выведен цвет. maniacvn 23 Августа 2017 18:11¹¹ 0 Используй свойство background а в качестве фона и указуй скрин maniacvn 23 Августа 2017 18:12¹² 0 Вернее в качестве background используй фото материала Kosten 23 Августа 2017 18:15¹³ 0 maniacvn, так это вид материалов стиль прописывать, или как и где ставить. maniacvn 23 Августа 2017 19:27¹⁴ 0 Я в сам вид прописывал но это только для игр подходит когда скрины другие то разлапистый будет. Kosten 23 Августа 2017 20:44¹⁵ 0 maniacvn, вы можете поделиться кодом в комментариях или на форуме, думаю многим понравится такая тема.