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 пикселей

Новости от партнеров

Комментарии

  1. @devarts пишет:
    22.01.2014 в 00:26

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

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

  2. @Руслан пишет:
    21.01.2014 в 16:56

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

  3. @Dmitriev пишет:
    30.08.2013 в 14:16

    Спасибо, статья действительно очень помогла smile

  4. @devarts пишет:
    12.01.2013 в 22:18

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


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

  5. @Серж пишет:
    30.11.2012 в 16:21

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

  6. @pendrius пишет:
    02.01.2012 в 21:23

    Хорошая новость!

  7. @goodslowprice пишет:
    05.12.2011 в 19:22

    Я в принципе поддерживаю.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *