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

Cмайл растягивается на ширину картинки в новости, как исправить?


     22.03.2019    оформление картинок    Шаблоны (TPL), Стили (CSS)    781

вопрос
Всем привет! У меня такая проблема, что вместе с оформлением картинок в новости, растягивается все подряд, смайлы, мелкие изображения и пр. Вот скрин:
Cмайл растягивается на ширину картинки в новости, как исправить?


Как сделать, чтобы оформление картинок , скринов оставалось прежним,а мелкие такие как смайлы, стикеры и пр. было не затронуто самим этим оформлением и оставалось в оригинальном виде?
Вот сам код стиля оформления для fullstory.tpl и shortstory.tpl

        <style>
            
          
.title_spoiler img {display:none}
 .short_story img {float:center; width:450px;/-/слева, шириной картинки 450px padding:9px;margin:5px 5px 5px 115px; border:7px solid #09B9BC;border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 18px; box-shadow: inset x y blur spread color;box-shadow: 5px 5px 5px #777;
 width: 80%;
  max-width: 470px;
  margin: 10px auto;
  padding: 1.1em;
  box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
     
  </style>  

Ответил: akafaus


.Shortstory оставь пустым и содай отдельный стиль для картинки
 .kartinka img {float:center; width:450px;/-/слева, шириной картинки 450px padding:9px;margin:5px 5px 5px 115px; border:7px solid #09B9BC;border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 18px; box-shadow: inset x y blur spread color;box-shadow: 5px 5px 5px #777;
 width: 80%;
  max-width: 470px;
  margin: 10px auto;
  padding: 1.1em;
  box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;




После чего, ту картинку к которой надо применить стили заключаешь в div
<div class=“Kartinka”>ссылка на твою картинку</div>

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

SergeyZ
Юзер

SergeyZ - 22 марта 2019 22:25 -

Да, но картинки я загружаю из блока новостей, и каждый раз отдельная картинка (скрин) , это не для определенной картинки... Мне же нужно хотя бы ограничить для определенного размера изображений , чтобы не применялись стили к ним.. В самой новости при загрузке изображений, я не применяю оформления, они применяются уже после публикаций новости автоматом, и вот на ряду с ними применяют оформления и смайлы и все подряд.

akafaus
Юзер

akafaus - 22 марта 2019 22:29 -

Я понимаю, скинь содержание shortstory.tlp

SergeyZ
Юзер

SergeyZ - 22 марта 2019 22:38 -

shortstory.tlp


SergeyZ
Юзер

SergeyZ - 22 марта 2019 22:38 -

fullstory.tpl

<div class="short_top1">
<div class="short_top2">
<div class="short_top3">

<div class="short_title"><span id="news-title"><b><font size="2"face="Tahoma">{title}</font></b></span></div>
<div class="short_author"><font size="2"face="Tahoma"><b>{favorites} Автор: <font color="#3881A4" face="Georgia"><b> {author} </b></font> <span>|</span>Комментарии: [com-link]{comments-num}[/com-link] <span>|</span></b></font></div>
<br><center> {include file="engine/modules/newbage.php?thetime={date=U}&int=2"}</center><br>
<center><b>[edit]<img src="{THEME}/images/edit.png" title="Редактировать" alt="Редактировать" />[/edit][edit-date]<br /><br /><span><i>Новость отредактировал: <font color="red"><strong>{editor}</strong></font> - {edit-date}</i></span>[edit-reason]<div class="quote">Причина: {edit-reason}</div>[/edit-reason]<br />[/edit-date]</b></center>
<br> <center>[group=1,2]<span data-er-edit="{news-id}" class="er-btn">Редактировать RG</span>[/group]</center>
</div>
</div>

<style>

.newBage {border-radius:3px;display:inline-block;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.2);font-size:14px;padding:2px 6px;cursor:default;box-shadow:0 1px 3px 0 rgba(0,0,0,.1);margin:0 3px;vertical-align:middle;
background: #0ba500;
background: -moz-linear-gradient(top, #0ba500 0%, #3f5b47 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0ba500), color-stop(100%,#3f5b47));
background: -webkit-linear-gradient(top, #0ba500 0%,#3f5b47 100%);
background: -o-linear-gradient(top, #0ba500 0%,#3f5b47 100%);
background: -ms-linear-gradient(top, #0ba500 0%,#3f5b47 100%);
background: linear-gradient(to bottom, #0ba500 0%,#3f5b47 100%);
}

.title_spoiler img {display:none}
.short_story img {float:center; width:450px;/-/слева, шириной картинки 450px padding:9px;margin:5px 5px 5px 115px; border:7px solid #09B9BC;border-radius: 4px;-moz-border-radius: 6px;-webkit-border-radius: 18px; box-shadow: inset x y blur spread color;box-shadow: 5px 5px 5px #777;
width: 80%;
max-width: 470px;
margin: 10px auto;
padding: 1.1em;
box-shadow:
0 1px 4px rgba(0, 0, 0, .3),
-23px 0 20px -23px rgba(0, 0, 0, .8),
23px 0 20px -23px rgba(0, 0, 0, .8),
0 0 40px rgba(0, 0, 0, .1) inset;

</style>
<br>
<center> [xfgiven_youtube]<iframe width="560" height="350" src="//www.youtube.com/embed/[xfvalue_youtube]" frameborder="0" allowfullscreen></iframe>[/xfgiven_youtube]</center>
<br>
<div class="short_story">{full-story}</div>


<div class="news">
[xfgiven_size]<center><i><font size="4" color="#046B75" face="Georgia"><b>Размер файла: <font color="#A60000">[xfvalue_size]</font></b></font></i></center>[/xfgiven_size]

[xfgiven_link]<center><a href="[xfvalue_link]" class="btn" target="_blank"> <img alt="" src="/img/download.png" /> </a></center> [/xfgiven_link]
<br>
[xfgiven_size2]<center><i><font size="4" color="#1043C0" face="Georgia"><b>Размер файла: <font color="#A60000">[xfvalue_size2]</font></b></font></i></center>[/xfgiven_size2]

[xfgiven_link2]<center><a href="[xfvalue_link2]" class="btn" target="_blank"> <img alt="" src="/img/download2.png" /> </a></center> [/xfgiven_link2]
<style>
a {text-decoration: none;}
a:hover {text-decoration: underline;}
</style>


<style type="text/css">
TD.leftcol {
width: 110px; /* Ширина левой колонки с рисунком */
vertical-align: top; /* Выравнивание по верхнему краю */
}
p {
text-indent: 20px; /* Отступ первой строки в пикселах */
}
</style>
<hr>
<table width="100%" cellspacing="15" cellpadding="0">
<tr>
<td class="leftcol"><img src="{foto}" alt="{login}"/>

<td valign="top"><font color="#07848C" size="3" face="Georgia"><b><i> Добавил мод: {author} </i></b></font><br>
<font color="#07848C" size="3" face="Georgia"><b><i> Рейтинг публикации: [rating]<div style="float:right; width:290px; height:19px">{rating} </div>[/rating]<br>
Дата публикации: [day-news] {date} [/day-news]<br>
Просмотров: {views} </i></b></font><br>
[complaint]<font color="#FF0000" size="3" face="Georgia"><b><i>Пожаловаться</i></b></font> [/complaint]
<h3><center>{include file="engine/modules/thanks.php?news_id={news-id}&login={login}&allow=[xfvalue_thanks]"}</center></h3>
</td> </tr>
</table><hr>

<br>
<br>
<br>


[xfgiven_source]<center><font size="2" color="red"><b>Автор мода: <font color="MidnightBlue">[xfvalue_source]</font></b></font></center>[/xfgiven_source]</div>
</div>
<br>
<br>


<center><h2><font color="#001C62" face="Georgia"><i><p><MARQUEE style="WIDTH: 650px" behavior=alternate scrollamount="3"><img src={THEME}/images/JC_doubleup.gif> Понравился мод? Не забудь поделиться с друзьями! <img src={THEME}/images/JC_doubleup.gif></MARQUEE></p></i></font></h2></center>

<center><script type="text/javascript">(function() {
if (window.pluso)if (typeof window.pluso.start == "function") return;
if (window.ifpluso==undefined) { window.ifpluso = 1;
var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
s.src = ('https:' == window.location.protocol ? 'https' : 'http') + '://share.pluso.ru/pluso-like.js';
var h=d[g]('body')[0];
h.appendChild(s);
}})();</script>
<div class="pluso" data-background="#d9d9d9" data-options="big,square,line,horizontal,counter,theme=03" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print"></div></center>

<br>
<div class="news_btn"><hr /></div>

[tags]
<div class="basetags"><center><font size="2" color="#4682B4" face="Verdana"><b> Метки: {tags} </b></font></center></div>
[/tags]
<br>



<div class="short_bot"><a href="javascript:history.back()"><img src="{THEME}/images/spacer.gif" class="back_link" alt=""></a>
<div class="link_category1">
<div class="link_category2">
<div class="link_category3"><b><font size="2"face="Georgia">{link-category}</font></b></div>

</div>
</div>
</div>

<div class="comm1">
<div class="comm2"><img src="{THEME}/images/related_h.png"><ul class="menulink">[related-news]{related-news}[/related-news]</ul></div>
</div>

[group=5]
<div class="info1"><div class="info_telek"></div><div class="info"><div class="info_top"><div class="info_bot"><b><font size="2"face="Verbana">Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.<br />Мы рекомендуем Вам <a href="/index.php?do=register">зарегистрироваться</a> либо войти на сайт под своим именем.</font></b></div></div></div></div>
[/group]

akafaus
Юзер

akafaus - 22 марта 2019 23:19 -

Я тебя понял, ты хочешь задать стили выборочным картинкам в Новости, к сожалению, я думаю, что это реализовать без правки двига не возможно (моё мнение) !

SergeyZ
Юзер

SergeyZ - 22 марта 2019 23:28 -

Жаль конешно..( Но все же спасибо, что отозвался..

akafaus
Юзер

akafaus - 22 марта 2019 23:31 -


Ты смайлы вставляешь через панель ?? или же вставляешь тоже картинкой ?

SergeyZ
Юзер

SergeyZ - 22 марта 2019 23:38 -

Да!

akafaus
Юзер

akafaus - 22 марта 2019 23:44 -

Попробуй добавить новый стиль

.emoji {background: transparent !important ;border: none !important; vertical-align: middle !important ;width: 22px !important; height: 22px !important;} 


я точно не помню background: transparent !important; либо background: none !important;
должно сработать !

SergeyZ
Юзер

SergeyZ - 23 марта 2019 00:05 -


akafaus,
Ну надо же... )) Сработало)) Вот только они все равно попадают под оформление, но это уже куда лучше, чем то,что было..))

SergeyZ
Юзер

SergeyZ - 23 марта 2019 00:06 -

akafaus,
Спасибо за помощь, с меня + к карме))

akafaus
Юзер

akafaus - 23 марта 2019 00:29 -

На за что !
класс .emoji - это класс, который присваивается смайликам двигателем автоматически. (он находится в engine.css)
Проблема была в том, что стили .short_story img перебивали стили .emoji !
Для того, что бы у вас в дальнейшем не было таких проблем запомните такую вещь как !important, если обратите внимание я её вставил в каждую запись стиля, этот тег читает браузер и делает данный стиль приорететнее всех остальных ! Удачи, пользуйтесь ))

P.S. Возможно этот код избавит от всех стилей !)
.emoji {background: transparent !important ;border: none !important; vertical-align: middle !important ;width: 22px !important; height: 22px !important; padding:0px !important; margin: 0px !important; border: none !important;
  box-shadow: none !important;} 

SergeyZ
Юзер

SergeyZ - 23 марта 2019 00:34 -

Спасибо! И вам удачи! )) Рад за помощь!)

SergeyZ
Юзер

SergeyZ - 23 марта 2019 00:40 -


[quote=akafaus].emoji {background: transparent !important ;border: none !important; vertical-align: middle !important ;width: 22px !important; height: 22px !important; padding:0px !important; margin: 0px !important; border: none !important;


ВО! Вот этот ОНО!! На скрине м изображение новости осталось с оформлением и смайлы стали выводиться как надо..
Вы просто гений...)) Огромное спасибо!)

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх