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

dle shortnews img padding - 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}

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

dle shortnews img padding 1 1 - DLE — отступы от картинок в короткой новости
<div id="sstory">{short-story}</div>

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

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

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

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

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

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

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

Похожие записи


PHP — простой ротатор баннеров, ротатор для DLE и WordPress
Аналог на javascriptАналог на PHP для больших кодов Очень простой ротатор кода на PHP. Сначала мы объявляем простой двумерный массив...
Как изменить пароль пользователя CMS DLE и WordPress через SQL-запрос
Перебираю старые статьи с целью их оптимизации и наткнулся на эту. В принципе, способ подойдет для любой системы на любом...
Полный гайд по миграции с CMS DLE на WordPress
Данный сайт в апреле 2019 года полностью переехал на CMS WordPress и в июне, после завершения всех правок (а их...
DLE – быстрый переезд на хостинг не используя инсталятор
Установка движка DLE на хостинг происходит через специальный файл — инсталятор, в котором необходимо заполнить все поля (имя базы данных,...
DLE — монетизируем загруженные в новостях файлы через отдельный домен
Как много у вас загруженных файлов (приложений к постам) не считая картинок? У меня много и придумал способ их монетизировать!...

0 комментариев на «“DLE — отступы от картинок в короткой новости”»

  1. А для полной как можно сделать?
    Чтоб так же 10 пикселей отступ был?
    Спасибо.

  2. Цитата: Серж
    А для полной как можно сделать?


    Так же само открыв файл fullstory.tpl

  3. Здравствуйте, автор этой статьи вы просто молодец, столько всего перерыл и нигде толком ответ на этот вопрос не нашел, но в этой статье так все подробно и легко что у меня получилось с первого раза спасибо!

  4. Цитата: Руслан
    Здравствуйте, автор этой статьи вы просто молодец, столько всего перерыл и нигде толком ответ на этот вопрос не нашел, но в этой статье так все подробно и легко что у меня получилось с первого раза спасибо!

    Спасибо, старался. очень часто описыаю свои проблемы и они становятся полезными кому нибудь)

Добавить комментарий для devartsОтменить ответ