Делаем отступы от картинок в короткой новости в ДЛЕ

Делаем отступы от картинок в короткой новости в ДЛЕ


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

На статике я бы назначил для картинок класс в 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

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

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

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

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

Делаем отступы от картинок в короткой новости в ДЛЕ

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


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

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

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

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


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

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

Если расшифровать, то мы:
Заставили все картинки в короткой новости сделать отступ справа от себя на 10 пикселей
Понравилась статья "Делаем отступы от картинок в короткой новости в ДЛЕ" из раздела Работа с кодом, Решения для DLE? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 7 •  Просмотров: 9152   Дата: 27-янв-2012, 15:08

Похожие статьи

Комментарии


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

(5 декабря 2011 19:22) • цитировать • •
#2 pendrius   

Гости
Хорошая новость!
(2 января 2012 21:23) • цитировать • •
#3 Серж   

Гости
А для полной как можно сделать?
Чтоб так же 10 пикселей отступ был?
Спасибо.
(30 ноября 2012 16:21) • цитировать • •

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

Так же само открыв файл fullstory.tpl
(12 января 2013 22:18) • цитировать • •
#5 Dmitriev   

Гости
Спасибо, статья действительно очень помогла smile
(30 августа 2013 14:16) • цитировать • •

Гости
Здравствуйте, автор этой статьи вы просто молодец, столько всего перерыл и нигде толком ответ на этот вопрос не нашел, но в этой статье так все подробно и легко что у меня получилось с первого раза спасибо!
(21 января 2014 16:56) • цитировать • •

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


Спасибо, старался. очень часто описыаю свои проблемы и они становятся полезными кому нибудь)
(22 января 2014 00:26) • цитировать • •
b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
© 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика