Главная Блоги Блог админа

Работа с видом статьи в InstantCMS - изменяем стили и отображение

Опубликовано:
Просмотров: 2294
0
Голосов: 0

Работа с видом статьи в InstantCMS - изменяем стили и отображение.


После выхода шаблона RegionN обращаются с решением некоторым вопросов. Я стараюсь записать их и тщательно разобрав, рассказать вам. Сегодня мы коснемся того, как изменить вид контента статей и материалов, расположенных в каталоге статей. Каталог статей в InstantCMS позволяет нам создать в принципе любые разделы, в каждом из них можно настроить свой вид, указав префикс css, но сейчас я обьясню как менять вид относительно шаблона RegionN.

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

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

Код PHP:
  1. .article_box .con_image {
  2.     overflow: hidden;
  3.     box-sizing: border-box;
  4.     float: left;    
  5. }
  6.  
Этот код отвечает за ширину самой картинки

Код PHP:
  1. .article_box .con_image img {
  2.     width: 100%;
  3. }
Стиль текста статьи

Код PHP:
  1. .con_text {
  2.     font-size: 1.0667rem;
  3.     line-height: 1.4rem;
  4.     overflow: hidden;
  5.     margin-bottom: 0.5rem;    
  6. }
Задача - дать картинке родной размер, возможность сжиматься, а тексту статьи возможность обтекать картинку. Изменяем стили вот так


Код PHP:
  1. .article_box .con_image {
  2.     overflow: hidden;
  3.     box-sizing: border-box;
  4.     float: left;
  5.     margin: 1%;
  6.     max-width: 100%;
  7. }
  8.  
  9. .article_box .con_image img {
  10.     max-width: 100%;
  11. }
  12.  
  13. .con_text {
  14.     font-size: 1.0667rem;
  15.     line-height: 1.4rem;
  16.     overflow: hidden;
  17.     margin-bottom: 0.5rem;
  18.     display: inline;
  19.     margin-top: 1%;
  20. }
Добавлена масимальная ширина в 100%, в бокс (для лисы) и в саму картинку. То есть вместо четкого указания растягиваться, изменено на то, что она может быть максимально 100%. Стилю текста статьи добавил обтекание и установил выравнивание инлайн. Всё готово. Изменяет стили и получаете именно то, что изначально было нужно.
Комментарии (0)

Нет комментариев. Ваш будет первым!

Добавить комментарий

Голосуем

Самый нужный компонент