Каждую неделю натыкаюсь на вопрос Как сделать рамку у картинки DLE на форумах, комментариях и так сегодня мы рассмотрим один из способов сделать рамку
Сегодня мы рассмотрим CSS рамку у которой есть свои плюсы и минусы
Плюсы:
1) Быстро сделать
2) Не нужны правки движка
3) Будет работать всегда и везде
Минусы:
1) Параметр закругления рамки не работает в старых браузерах
2) Рамка будет применена ко всем изображениям в новости (решаемо)
Приступим:
Допустим мы хотим сделать рамку в краткой новости, откроем соответствующий шаблон (shоrtstоry.tpl)
Найдем:
{shоrt-stоrу}
Заменим на
<div class="images-border">{short-story}</div>
Откроем Css шаблона в полне подойдет engine.css и добавим в конец такой код:
.images-border img {
border: 1px solid #000;
padding:3px;
width:200px;
margin-right:5px;
margin-bottom:5px;
}
border: 1px solid #000;
padding:3px;
width:200px;
margin-right:5px;
margin-bottom:5px;
}
Сохраним все изменения и посмотрим результат, должна получиться вот такая рамка:
Произведем анализ своих действий и выясним что мы добавили в стили.
border: 1px solid #000; здесь мы указали толщину рамки (1px) тип раки это у нас solid (типы рамок можно посмотреть тут ) и цвет #000 (цвет без труда можно подобрать в фотошопе)
padding:3px; здесь мы указали отступ рамки от картинки т.е 3px
width:200px; ширина картинки
margin-right:5px; отступ текста от картинки с правой стороны
margin-bottom:5px; отступ текста от картинки с низу
Добавим задний фон между рамкой и картинкой путем добавления в css свойства
background-color: #FF0;
В итоге у нас вышла рамка
