Картинки в горизонтальну лінію
Додано: 02 листопада 2013 14:07
Типово прикріплені до повідомлень у phpBB3 картинки- вкладення відображаються стовпчиком. До того ж, навколо них йде різна додаткова інформація , така як ім'я файлу , кількість скачуваннь вкладення і т.д. Деяким користувачам це не подобається , вони вважають такий вид невдалим і шукають спосіб зробити інакше . Іноді картинки намагаються вибудувати в ряд , задавши блокам з картинками властивість float . Це рішення , на мій погляд , невдало , тому що оформлені за допомогою float елементи - нестабільні і будуть розповзатися при кожному зручному випадку. Але є спосіб зробити більше культурно , в цьому нам допоможе чудове CSS- властивість display : inline . Інструкція буде дана для тих випадків , коли картинка вставлена в текст і до неї не заданий коментар .
Відкриваємо файл styles/prosilver/theme/content.css, шукаємо там код:
Додаємо ПЕРЕД ним:
Тепер потрібно відредагувати шаблон attachment.html, що знаходиться в папці styles/prosilver/template знайти:
Замінити на:
знайти:
Замінити на:
Також потрібно буде прибрати додаткову інформацію у звичайних картинок (НЕ мініатюр) у стилі prosilver, щоб вона не спотворювала нове оформлення. Для цього в шаблоні attachment.html потрібно видалити рядок:
У мініатюр у стилі prosilver додаткової інформації немає за замовчуванням , тому що вона знаходиться в атрибуті title тега img і показується тільки при наведенні миші. При бажанні цю інформацію можна додати в title і звичайним картинок , раз вже прибрали її з тексту.
Оновлюємо шаблони і тему для prosilver , і очищаємо кеш браузера , якщо не видно результат.
Ось , власне , і все. Просто і зі смаком. Всі вставлені в текст картинки будуть йти один за одним горизонтально , якщо тільки ви не захочете зробити перенесення між ними вручну.
Робити картинку в ряд , коли до неї є коментар , по-моєму , не має сенсу , тому що якщо картинка маленька або вузька , то коментарю , особливо довгому , буде ніде поміститися. Він або скулиться по горизонталі до такої міри , що блок з картинкою розтягнеться у висоту , і це буде виглядати непривабливо , або заїде на що стоять поруч вкладення.
Інструкцію для стилю subsilver2 я доклав у вигляді текстового файлу в архіві :
Відкриваємо файл styles/prosilver/theme/content.css, шукаємо там код:
Код: Виділити все
div.inline-attachment p {
Код: Виділити все
div.inline-attachment, dl.thumbnail dt, dl.file dt.attach-image {
display: inline;
}
Код: Виділити все
<dl class="thumbnail">
Код: Виділити все
<dl class="thumbnail"<!-- IF not _file.COMMENT --> style="display: inline;"<!-- ENDIF -->>
Код: Виділити все
<!-- IF _file.S_IMAGE -->
<dl class="file">
Код: Виділити все
<!-- IF _file.S_IMAGE -->
<dl class="file"<!-- IF not _file.COMMENT --> style="display: inline;"<!-- ENDIF -->>
Код: Виділити все
<dd>{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}</dd>
Оновлюємо шаблони і тему для prosilver , і очищаємо кеш браузера , якщо не видно результат.
Ось , власне , і все. Просто і зі смаком. Всі вставлені в текст картинки будуть йти один за одним горизонтально , якщо тільки ви не захочете зробити перенесення між ними вручну.
Робити картинку в ряд , коли до неї є коментар , по-моєму , не має сенсу , тому що якщо картинка маленька або вузька , то коментарю , особливо довгому , буде ніде поміститися. Він або скулиться по горизонталі до такої міри , що блок з картинкою розтягнеться у висоту , і це буде виглядати непривабливо , або заїде на що стоять поруч вкладення.
Інструкцію для стилю subsilver2 я доклав у вигляді текстового файлу в архіві :