Задать нужные размеры картинкам в полной краткой новости

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Задать нужные размеры картинкам в полной краткой новости

Сделать красивый вывод новостей с картинками одного размера, опрятным и интересным видом с возможностью автоматического изменения размера как например с размерами: shortstory-150x200; fullstory-300x420; можно с помощью данного dle хака. Вывод картинок будет одного размера, а не маленькая в первой новости, большая во второй, в другой средняя и т.д.
Задать нужные размеры картинкам в полной краткой новости
Установка:
1. Открываем shortstory.tpl выбранного шаблона.
Внимание у шаблона может быть разное название класс стилей , главное что бы класс DIV идет до тега {short-story}
Нам нужны вот эти строки например :
<div class="content clear"><h1 class="title_h">[full-link]{title}[/full-link] {approve}</h1>{short-story}[edit-date]


Здесь мы видим, что тег "{short-story}" управляется с помощью класса
 <div class="content clear" />  


Значит нам нужен css стиль "content". Открываем блокнот и ищем нужный блок настроек стилей.

2. Заходим в css и ищем стили с content.
Вот что нам нужно:

.#shortstory .content { padding-bottom: 1em; }#shortstory .content img {margin-right: 1em;margin-bottom: 0.5em;}


Теперь нам надо добавить стиль картинки к этому блоку.
Ниже добавляем:

#shortstory .content img:first-child {display: block !important;float: left;width: 150px; /* здесь размер ширины изображения в краткой новости. */height: 200px; /* Здесь размер высоты изображения в краткой новости. */}


У нас должно получиться:

#shortstory .content { padding-bottom: 1em; }#shortstory .content img {margin-right: 1em;margin-bottom: 0.5em;}#shortstory .content img:first-child {display: block !important;float: left;width: 150px; /* здесь размер ширины изображения в краткой новости. */height: 200px; /* Здесь размер высоты изображения в краткой новости. */}


3. Смотрим картинки в краткий новостях. Они автоматически уменьшаются до выбранной высоты и ширины в CSS благодаря стиле
 #shortstory .content img:first-child. 


Откроем полную новости, если не чего не изменилось значит там идут другие стили можно добавить этот же стиль и у вас будут картинки одинаковы в краткой и полной новости.

1. Смотрим код полной новости full-story.tpl ключевое слово {full-story}, до него идет класс CSS ( div ) , который нас интересует

<div class="content clear">{full-story}{pages}</div>


2. Тег {full-story} заключаем в

<div class="content_full"></div>


У нас должно получиться следующие:

<div class="content clear"><div class="content_full">{full-story}</div>{pages}</div>


Теперь в CSS ниже нашего #shortstory .content img:first-child добавляем:

#shortstory .content_full img:first-child {display: block !important;float: left;width: 300px; /* здесь размер ширины изображения в краткой новости. */height: 420px; /* Здесь размер высоты изображения в краткой новости. */}


У нас должно получиться следующие:

#shortstory .content { padding-bottom: 1em; }#shortstory .content img {margin-right: 1em;margin-bottom: 0.5em;}#shortstory .content img:first-child {display: block !important;float: left;width: 150px; /* здесь размер ширины изображения в краткой новости. */height: 200px; /* Здесь размер высоты изображения в краткой новости. */}#shortstory .content_full img:first-child {display: block !important;float: left;width: 300px; /* здесь размер ширины изображения в краткой новости. */height: 420px; /* Здесь размер высоты изображения в краткой новости. */}

Вот собственно и все.

Использовано в хаке.
Идея CSR. Шаблон protube (2 версия). CSS коды.
Написал статью Nimor.
Версия дле 9.2, 9.3, 9.4

Наш http://www.dle9.com/ веб-портал советуем хак DLE задать нужные размеры картинкам в полной краткой новости скачать
  • 60
Рубрика: DLE хаки » Хак для DLE
Ранее » NEW Сaptcha DLE новая версия каптча для дле« Далее Шаблон 404 ошибка DLE хак прикольное оформления страницы
Добавление комментарияОставить комментарий
  • № :4
  • 18 августа 2016 05:40
Цитата: maxno
а можна сделать так же Dle 10.0 ?
если да то как
я нашел такой код в
shortstory.tpl
<div class="post-title">[full-link] {title} [/full-link]</div>


а в style.css
этот код
.post-title{
width:556px;
height:18px;
padding: 6px 10px;
font-size:13px;
color:#00baff;
font-weight:bold;
text-decoration:none;
background: #000 url(../images/post_h.png) top center no-repeat;
font-family:"Tahoma";
}
.post-title a{
color:#FFFFFF ;
font-size:13px;
text-decoration:none;
}
.post-title a:hover{
color:#ebebeb;
text-decoration:underline;
}

можно от версии движка не зависит, в новости всё описано как ...
  • № :3
  • 17 августа 2016 20:15
а можна сделать так же Dle 10.0 ?
если да то как
я нашел такой код в
shortstory.tpl
<div class="post-title">[full-link] {title} [/full-link]</div>


а в style.css
этот код
.post-title{
width:556px;
height:18px;
padding: 6px 10px;
font-size:13px;
color:#00baff;
font-weight:bold;
text-decoration:none;
background: #000 url(../images/post_h.png) top center no-repeat;
font-family:"Tahoma";
}
.post-title a{
color:#FFFFFF ;
font-size:13px;
text-decoration:none;
}
.post-title a:hover{
color:#ebebeb;
text-decoration:underline;
}
  • № :2
  • 16 января 2016 15:58
Цитата: Sergey
Подскажите пожалуйста, как можно в полной новости увеличить блоки! А то они фиксированные и не влазиет иногда все описание, взаранее спасибо

Зависит от шаблона
Смотрим код полной новости full-story.tpl
<div class="название стиля"> ближайший код для тега {full-story} отвечает за вывод новости

далее идет закрывающий тег он всегда с div слеш (/)
</div>
то есть у кода управляющего стилей есть начало и конец, все что между не трогаем

Методом тыка : удаляем <div class="название стиля"> и </div> обновляем страницу смотрим результат... если новость изменилась в размере. Значит именно этот кода отвечает за фиксированный размер новости, ищем в файлах стилях .CSS шаблона class="название стиля" только название стиля, находим
смотрим код пример это ширина
width: 550px;

делаем так

width: auto;

смотрим результат
  • № :1
  • 16 января 2016 15:22
Подскажите пожалуйста, как можно в полной новости увеличить блоки! А то они фиксированные и не влазиет иногда все описание, взаранее спасибо