DLE — отступы от картинок в короткой новости

Итак, планировал разметку шаблона, очень хотелось попробовать размещение картинок слева, а текст справа. Это немного снизит размер и скорость загрузки страницы т.к. все картинки одного размера. Но столкнулся с небольшой проблемой – текст прилипал к размещенной картинке слева и ни в какую не хотел отступать от нее!

На статике я бы назначил для картинок класс в CSS наподобие:

<img src="url" class"imr"/>

И в файл стилей CSS бы добавил:

.imr{margin-right:10px;}

где imr – любое слово. Я просто сократил прямое назначение этого кода – image margin right

Можно конечно и присвоить id:

<div id="imr">
<img src="url"/>
</div>

и в CSS добавить:

#imr img{margin-right:10px;}

Но в таком случае, все картинки попадающие под него будут принимать отступ справа. Собственно это единственный выход для автоматизации на таких CMS как DLE

Полазив по сети, думая что все это настраивается в админке ничего толкового не нашел. И тут вспомнил что я знаю HTML и шаблон написан не на языке, придуманном создателями скрипта, а именно на HTML

Все что нужно было сделать, так это добавить одну строчку в файл стилей, отсюда подробнее:

Правим шаблон

Открываем файл shortstory.tpl в корне вашего шаблона и ищем вот этот код:

{short-story}

Далее, игнорируя все что уже есть мы добавляем стиль вот такой строчкой:

<div id="sstory">{short-story}</div>

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

Правим файл стилей

Открываем файл стилей, обычно это style.css в папке css в корне шаблона. Либо же ищите свой!
Находим там любое свободное место и добавляем небольшой кусочек кода:

#sstory img{margin-right:10px;}

Все! Заменяете обновленный файл стилей и наслаждайтесь. Для понимания того что мы сделали в файле стилей советую вам почитать про язык CSS

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

Если расшифровать, то мы:
Заставили все картинки в короткой новости сделать отступ справа от себя на 10 пикселей