Работа с видом статьи в InstantCMS - изменяем стили и отображение.
После выхода шаблона RegionN обращаются с решением некоторым вопросов. Я стараюсь записать их и тщательно разобрав, рассказать вам. Сегодня мы коснемся того, как изменить вид контента статей и материалов, расположенных в каталоге статей. Каталог статей в InstantCMS позволяет нам создать в принципе любые разделы, в каждом из них можно настроить свой вид, указав префикс css, но сейчас я обьясню как менять вид относительно шаблона RegionN.
Итак поступила просьба изменить вид статьи так, чтобы картинка была именно своим размером не растягиваясь на всю ширину. То есть если картинка в статье размером 500 пикселей, она максимум должна быть 500 пикселей, а если смотрят с мобильного то может уменьшаться, но не быть больше своего размера. Плюс конечно текст должен иметь отступы и обтекать картинку. Начнем это делать. Изначальный наш код такой:
Этот стиль отвечает за бокс картинки
Код PHP:
Этот код отвечает за ширину самой картинки
.article_box .con_image { overflow: hidden; box-sizing: border-box; float: left; }
Код PHP:
Стиль текста статьи
.article_box .con_image img { width: 100%; }
Код PHP:
Задача - дать картинке родной размер, возможность сжиматься, а тексту статьи возможность обтекать картинку. Изменяем стили вот так
.con_text { font-size: 1.0667rem; line-height: 1.4rem; overflow: hidden; margin-bottom: 0.5rem; }
Код PHP:
Добавлена масимальная ширина в 100%, в бокс (для лисы) и в саму картинку. То есть вместо четкого указания растягиваться, изменено на то, что она может быть максимально 100%. Стилю текста статьи добавил обтекание и установил выравнивание инлайн. Всё готово. Изменяет стили и получаете именно то, что изначально было нужно.
.article_box .con_image { overflow: hidden; box-sizing: border-box; float: left; margin: 1%; max-width: 100%; } .article_box .con_image img { max-width: 100%; } .con_text { font-size: 1.0667rem; line-height: 1.4rem; overflow: hidden; margin-bottom: 0.5rem; display: inline; margin-top: 1%; }