Отправлено: 05.12.19 13:52. Заголовок: Разные трюки для оформления форумов и гостевых

В стартовом посте будут собираться ссылки на темы с решениями разных задач, связанных с тонкой настройкой внешнего вида форума/гостевой при помощи CSS и HTML (если решение требует пары-тройки строк кода на JS - в порядке исключения тоже можно добавить).
В самой теме предлагаю делиться своими трюками, нашедшими применение на вашем форуме :)

(!) Эта тема - не для вопросов о том, как сделать что-то. Для таких вопросов следует создать отдельную тему и задать их в ней. И, возможно, ответы на них в будущем окажутся здесь.

P.S.: Советы, которые могут быть в этой теме, требуют от администратора форума/гостевой уверенного знания HTML, CSS. Не рекомендуется следовать описанным здесь инструкциям и рекомендациям, если отсутствует чёткое понимание зачем нужны те или иные действия.

- - -
2018.11.23 - Запрещаем растягивать форум, делаем рамки для картинок и мн.другое

 Отправлено: 05.12.19 14:06. Заголовок: По умолчанию, на фор..

Изменение соотношения между шириной столбцов "Автор" и "Сообщение" в темах форума.

По умолчанию, на форумах Борды соотношение между шириной левого столбца темы (краткая информация об авторе) и правого (текст сообщения) составляет 25 / 75%.
Лично мне нравится, когда столбец с аватаром автора занимает не больше 15% от отведённого места.

Соотношение столбцов задаётся в атрибутах width тегов TD, формирующих разметку таблицы с сообщениями, но, чтобы это изменить, можно обойтись без скриптов. Дело в том, что стили, заданные внутри тега STYLE в HTML-верх имеют приоритет над значениями этих атрибутов, поэтому для достижения цели достаточно записать всего несколько стилевых правил для интересующих нас элементов страницы.

Сейчас (2019.12.05) ширины столбцов таблицы с сообщениями задаются:
1) в первом и втором теге TD первой строки таблицы с id "posts-table" (заголовки "Автор" и "Сообщение");
2) в первом теге TD предпредпоследней строки таблицы с id "posts-table" (заголовок "Ответ:" в форме ответа);
3) в первом теге TD предпоследней строки таблицы с id "posts-table". (панелька смайликов в форме ответа)

Соответственно, CSS-правила, помещаемые перед </STYLE>, будут выглядеть так (синим выделены вожделенные 15 процентов, отводимых на столбец с краткой информацией об авторе):

цитата:

/* изменяем ширины столбцов "Автор" и "Сообщение" в темах */ #posts-table > tbody > tr:nth-child(1) > td:nth-child(1) { width:15%; } /*заголовок "Автор"*/ #posts-table > tbody > tr:nth-last-child(3) > td:nth-child(1) { width:15%; } /*заголовок "Ответ:"*/ #posts-table > tbody > tr:nth-last-child(2) > td:nth-child(1) { width:15%; } /*панелька смайликов*/

Правило для второго тега TD в (1) здесь не указано, потому что, как показала практика, это необязательно. Для спокойствия, можно добавить правило и для него
(ширина столбца с сообщениями = 100% - 15% = 85%):

цитата:

#posts-table > tbody > tr:nth-child(1) > td:nth-child(2) { width:85%;} /*заголовок "Сообщение"*/