Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Шаблоны (TPL) » Бордер для изображений в новостях

Бордер для изображений в новостях

     14.10.2012    бордер, изображения    Все вопросы » Шаблоны (TPL)    3429

вопрос
Как сделать бордер для изображения в новости?
Делал так

<div class="someClass">{short-story}</div>
.someClass img{ border:1px solid red; }

но тогда бордер появляется у изображения спойлера и смайликов...

Ответил: ПафНутиЙ

Давно ещё делал на чистом CSS для криворуких
    .news img { 
            padding: 6px;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(000, 000, 000, 0.3);
             box-shadow: 0px 2px 5px 0px rgba(000, 000, 000, 0.3);
             border: solid 1px rgba(0, 0, 0, 0.2);
             
             /*градиентный фон*/
             background: rgb(255,255,255);
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZjNmM2YzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZWRlZGVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
            background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%);
            background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1)));
            background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
            background: -o-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
            background: -ms-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
            background: linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
            /*конец градиентного фона*/
            
            -webkit-border-radius: 5px;
            border-radius: 5px;
            }  
            .lt-ie9 .news img { /*класс определяется в самом начале*/
                border: solid 1px #ccc;
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );                
                }                
            .news img[alt="smile"], .title_spoiler img {
                background: none;
                border: none;    
                padding: 0;
                -webkit-box-shadow: none;
                box-shadow: none;   
                -webkit-border-radius: 0;
                border-radius: 0;
                }  

11 комментариев

inex
Юзер

inex - 14 октября 2012 14:42 -

Спасибо, но так смайлики тоже с бордером получаются...
Sander
PHP-developer

Sander - 14 октября 2012 15:40 -

Тогда только javascript...
SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804
inex
Юзер

inex - 14 октября 2012 15:45 -

А можно пример реализации пожалуйста?
Sander
PHP-developer

Sander - 14 октября 2012 16:04 -

Можно конечно! Но только если его кто-то захочет написать....
SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804
inex
Юзер

inex - 14 октября 2012 16:20 -

Да это понятно, я имел ввиду не готовое решение, я примерно от чего плясать...ну да ладно, спасибо
Sander
PHP-developer

Sander - 14 октября 2012 16:32 -

Плясать от:
$(".someClass img").each(function(){
 if(нормальная картинка) $(this).addClass('red_border');
});
SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804
inex
Юзер

inex - 14 октября 2012 17:32 -

У каждого смайла определённый alt, придётся для каждого писать

            .news img[alt="smile"] {
                background: none;
                border: none;    
                padding: 0;
                -webkit-box-shadow: none;
                box-shadow: none;  
                -webkit-border-radius: 0;
                border-radius: 0;
                }  
pavel31
Юзер

pavel31 - 14 октября 2012 19:50 -

У меня на сайте сделано так 

.news-descr a.lightbox{display:inline-block;margin:3px;padding:4px;background:#5D5D5D;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;}
.news-descr a.lightbox img{background:#fff;}
.news-descr a.lightbox:hover{background:#AEC419;}
.maincont {padding: 8px 5px 9px 0; text-align: justify; width: auto;}

<div class="maincont news-descr">
    {short-story}
</div>

пример работы стилей можно посмотреть здесь
Sander
PHP-developer

Sander - 14 октября 2012 23:04 -

Паш, в твоем варианте есть один изъян...
.news img[alt="smile"]

А ведь в парсере альт у каждого смайла свой...
 alt=\"$smile\"
SanDev.pro - мой блог.

Telegram: @sandev
Skype: Sander8804
ПафНутиЙ
Админ

ПафНутиЙ - 14 октября 2012 23:08 -

ну дописать думаю не проблема, это всего лишь пример)
Каков вопрос - таков и ответ. Просто помните об этом.
Laidman
Юзер

Laidman - 15 октября 2012 04:49 -

А не легче в двиге допилить стиль на картинки О_о и в смайлах его не будет.
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

 07.07.2011 ken-san  Шаблоны (TPL), Стили (CSS)
 23.11.2011 palakat  Шаблоны (TPL), Стили (CSS)
 28.09.2012 Ae en Chalune  Шаблоны (TPL), jQuery
 11.10.2012 inex  Шаблоны (TPL)
 24.11.2012 Гость  Шаблоны (TPL), Ламерские вопросы
 29.04.2013 Jeden  Шаблоны (TPL)
 01.09.2013 figol  Общие вопросы по вёрстке, Шаблоны (TPL)
 07.10.2013 steamen  Шаблоны (TPL), Стили (CSS), Общие вопросы по PHP, Ламерские вопросы
 09.02.2014 narkom6n  Шаблоны (TPL), Общие вопросы по PHP, Хаки
 22.05.2014 voitov  Шаблоны (TPL), Стили (CSS), jQuery, Хаки
  • mondolfo | Как вывесит в comments.tpl картинку с но ... 7
    Фото mondolfo
    mondolfo
    Как вывесит в comments.tpl картинку с новости?
    Вчера, 23:42
    кто-нибудь решил эту?
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 17:08
    Разъясните как вытащить id?
  • lutskboy | Вытащить все данные из определенного доп ... 1
    Фото lutskboy
    lutskboy
    Вытащить все данные из определенного доп поля?
    22-11-2024, 16:17
    в adminer можно.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 16:14
    выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
    js скрипт можно написать
    
<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 14:39
    Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 13:52
    где выводить? админка или сайт
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    21-11-2024, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
наверх