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

Опубликовано:
Просмотров: 1480
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)

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

Голосуем

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