no-prof
Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.
Блочная верстка форума на главной
с переносом колонок "тем", "сообщений" и "последние сообщения"
(для фиксированного по ширине стиля)
Автор: Герда
Платформа: MyBB
Сейчас на майбб стало очень модно делать оформление разделов в рамке, а благодаря скрипту от Алекса туда добавлась также и традиция выносить колонки "Тем" и "сообщений" в описание.
Так как часто спрашивают, как такое сделать, в этой статье мы разберем оформление разделов на главной БЕЗ скриптов, на чистом css.
Также сюда же включен набор кодов, влияющий на ВСЁ, что касается форумных таблиц на главной, что позволит вам создать с нуля свой индивидуальный стиль для главной страницы.
Принимаю благодарность путем вкорячивания в любое окно стиля:
/* За помощь с версткой разделов главной страницы благодарим ForumD.ru */
Подготовительные работы. |
Чтобы сделать такое оформление, нам понадобится точно построить все элементы по размеру, т.к. из табличных мы превратим их в блочные, а, как вы знаете (или не знаете) блоки не будут стоять на одной строке, если один из них по размеру в нее не помещается.
Для начала зафиксируйте ширину "тела" форума:
Многие в селектор #pun вставляют картинку-рамку для "тела" форума., которая требует отступов внутренних элементов от нее.
Если это так, то добавьте отступы в ПИКСЕЛЯХ.
Затем нам нужно убрать все стандартные границы форума, чтобы они не мешали нам в дизайне и позиционировании.
Находим и удаляем следующие коды стандартного стиля:В данных кодах удаляем красное (отступы оставляем - нам они пригодятся):
ВНИМАНИЕ ВСЕМ ТЕМ, кто любит юзать чьи-то "шаблоны". Часто вижу, что ТруЪ-дизайнеры с майбб предпочитают "убирать" границы путем border-color: transpatent;
Такой способ НЕ убирает границу, а делает ее прозрачной. Убедитесь, что у данных элементов вообще НЕТ значения border в коде, иначе столкнетесь с проблемой "почему я все ровно посчитал, а блоки все равно уехали".
Также нам нужно, чтобы все внутренние элементы таблицы имели отступы в ПИКСЕЛЯХ. Все это ради того, чтоб когда мы начали позиционировать элементы, у нас все имело точные размеры и точно помещалось в строчки.
находим коды ячеек, откуда мы уже удаляли границы и вставляем отступы в пикселях:
О том, как вставляются иконки, есть отдельные топики, так что я не буду подробно обозревать разные типы селекторов, коснусь только того, что есть в стандартном коде по иконкам (и требует правки)
Нас интересуют этот кусок кода из верхнего окна стиля:Собственно, его мы можем смело удалять и менять на свой:
вместо серого можно вставить свой стиль для иконок, картинки и т.д., а ниже добавить коды для других типов иконок (новые, важные и т.д.)
Декоративная работа с таблицами. |
Удаляем внизу стандартного стиля коды:
Находим вверху код и вставляем всою стилизацию:
можно вставить свою стилизацию, картинку, поиграть с текстом и т.д.
Если вы все делали по текущему гайду, то вы можете наблюдать следующую картинну:
Многим нужно, чтобы заголовок оставался как есть, но таблицы отступали от краев.
Для этого "воскрешаем" селектор .punbb .container и добавляем в любое удобное окно стиля.
Чтобы вычислить ширину и сделать отступы от краев, смотрим на ширину ближайшего родителя (это у нас .punbb, если бы мы не делали для него отступов и ширины, то это был бы #pun)
Цвет контейнера, в котором находится табличка, в стандартном коде находится здесь:
Удалите красное, чтобы сделать его "прозрачным":
Цвет заголовков таблицы (где надписи "форум", "тем", "сообщений"...) находится тут:
Удалите красное (ВМЕСТЕ С ЗАПЯТОЙ) и добавьте свой стиль на отдельной строке:
Цвет ячеек с количеством тем и сообщений находится тут:
аналогично удаляем в вставляем свой вариант стиля:
Чтобы раскрасить ячейки с названием раздела и последним сообщением добавляем:
Отключение элементов таблиц. |
Определитесь, что делаем с ячейками-заголовками, где написан текст "Форум" "Тем" "Сообщений" и "Последнее сообщение".
Если нужно отключить ВСЕ эти ячейки, прописываем в стиле:Если вы хотите отключить конкретные ячейки заголовков:
Лишние строчки этого кода удалите, не используйте.
Например, в случае, если вы хотите передвинуть ТОЛЬКО колонки "Тем" и "Сообщений" в описание форума, можно оставить вот так в заголовке:
Ширину и позиционирование данных ячеек нужно задавать ПОСЛЕ того, как мы спозиционируем остальные строки и ячейки таблицы. На этом этапе можно пока просто отключить лишние ячейки.
Если нужно отключить другие ячейки таблиц, прописываем в стиле:
Лишние строчки этого кода удалите, не используйте.
Позиционирование ячеек с форумами на главной |
Для начала позиционирования разделов необходимо спозиционировать строки таблиц.
Позиционируем ячейку с описанием форума:
Позиционируем ячейку с последним сообщением:
ВНИМАНИЕ! когда задаете ширину ячеек, помните, что отступы от краев padding (которые мы составляли ранее) ВКЛЮЧЕНЫ в их ширину. Если у вас будут проблемы, что ячейки не встают друг напротив друга - значит надо ставить меньше ширину, вы не учли отступы.
Затем добавляем к ячейкам "Тем" и "Сообщений" описания (так как табличных заголовков нет, непонятно что это за цифры)
Иконки и прочие декоративности - на ваш вкус и цвет, лишние строчки можно удалить, текст можно заменить на свой.
Затем позиционируем ячейки:
Для декоративности можно добавить отступы и границы:
Итог:
полный код стиля с такой версткой
!!! НИЖЕ ВАРИАЦИИ БУДУТ ИМЕННО НА ОСНОВЕ ЭТОГО СТИЛЯ !!!в этом коде в первом окне стиля то, что мы делали в ПОДГОТОВИТЕЛЬНЫЕ РАБОТЫ
Во втором окне стиля в самом начале стоят самая важная часть с позиционированием ячеек для удобства встаки/замены при других вариациях.style.css
style_cs.css
Можно отзеркалить позиционирование
Вариация переноса колонок "Тем" и "Сообщений". Тут только изменения в коде, все детали с позиционирования ячеек под в предыдущим спойлером "Стиль с переносом колонками "тем" и "сообщений""
Описание слева
Описание справа
Продолжаем извращаться.
Так как все ячейки у нас "переезжают" под одну, отключаем заголовок таблицы:Позиционируем ячейку с описанием форума:
ВНИМАНИЕ! когда задаете ширину ячеек, помните, что отступы от краев padding (которые мы составляли ранее) ВКЛЮЧЕНЫ в их ширину. Если у вас будут проблемы, что ячейки не встают друг напротив друга - значит надо ставить меньше ширину, вы не учли отступы.
Затем добавляем по желанию добавляем ячейке "Последнее сообщения" (НЕ обязательно)
Иконки и прочие декоративности - на ваш вкус и цвет, лишние строчки можно удалить, текст можно заменить на свой.
Далее позиционируем ячейки с "Тем", "Сообщений" и "Последнее сообщения".
Эффект:
Вариаций может быть великое множество. Например:
Если вы хотите расположить какие-либо ячейки справа от описания поверх этой ячейки, чтобы они не "заезжали" на описание, то добавьте отступ справа в ячейку с описанием (или слева, если нужно спозиционировать слева):
Примеры:
Колонки "Последнее сообщение" "Тем" "Сообщений" в столбик справа от описания
"Тем" и "Сообщений" под иконкой форума, а "Последнее сообшение" Справа от описания
Для того, чтобы поставить ячейки с описаниями в ряд, необходимо сделать это с СТРОКАМИ таблицы.
Поэтому добавляем в Позиционирование строк:Затем настраиваем ячейку с описанием раздела:
Получаем:
Для удобства и наглядности в коде выше выключены ячейки "Тем", "Сообщений" и "Последнее сообщение"
Но они также могут занять свое место в блоках аналогично тому, как мы это делали, когда описание раздела занимало всю строчку.
Например:
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.