ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Внимание, до 30.09 идёт набор заявок в котолотерею (тур I, "Сентябрьский кот")! Не пропустите!
Внимание! Нужно ваше мнение! Выбираем новый логотип, новую стилистику и новую разметку заявок для проекта ролевых заявок.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Гайд: Окантовки форумных таблиц для MyBB форумов

Сообщений 1 страница 2 из 2

1

Окантовки форумных таблиц: общие принципы

Часто спрашивали на различных ресурсах и у нас на сайте, как делается окантовка для таблиц - это красивое решение для форумов ролевой тематики. В этом топике мы будем постить различные варианты и советы по созданию дизайна с окантовкой.
Если у вас возникают проблемы с вставкой окантовок, то пишите в этом топике - это поможет дописать больше информации в статью. :flag:
Итак, начнем с основных принципов.

При разработке картинок окантовки желательно делать все ее части в JPEG.
Дизайн с окантовками в png-формате очень много весит. Запомните, что любой сайт украсит не только красивый дизайн, но и достаточно быстрый: делайте мало картинок, делайте маленькие картинки, делайте картинки в формате jpg - тогда грузиться будем легко и быстро.
Соответственно, если ваша окантовочка ложится на простой одноцветный фон, то сделайте ее в формате jpg.

Не надо "окантовывать окантованное"
Дизайнеры на форумах не совсем понимают назначение окантовки для интерфейса страницы: просто увидели это, им понравилось, и теперь штампуют красивые картинки к месту и не к месту. На деле окантовка призвана отделить и выделить форумные списки от иной информации на форуме.
Если вы решили окантовать таблицы, то не надо окантовывать что-то внутри них. Иконки тоже должны быть скромными, иначе получится нагромождение лишней красоты. Если же в дизайне уже присутствует сильная, тяжелая окантовка страницы форума (отделение ее от фона бордюрами), то опять получается нагромождение: форумные таблицы и так выделяются, не надо их обрамлять.

Окантовка форумных таблиц не заканчивается на вставке картинок в дизайн.

У майббшных креатившиков патологичная ненависть к созданию удобного интерфейса таблиц. Мы часто можем видеть форумы, обрамленные картинками, но совершенно лишенные какой-либо внутренней верстки: только окантовка и иконки, а сама информация из таблицы ничем не разделена, никак не позиционируется, разделы форумы сливаются в один большой комок категории и не отличаются друг от друга.
Когда вы делаете окантовку, не забывайте о ее практической ценности: продолжайте работу над таблицей, придумайте удобный интерфейс границ внутри окантовки и отображения информации.

Несколько частовстречающихся косяков:
[html]<style>#exz {max-width: 230px !important}</style>


<img src="http://gerda.moy.su/_bl/0/02656249.jpg" class="postimg" id="exz">
<img src="http://gerda.moy.su/_bl/0/14377823.jpg" class="postimg" id="exz">

[/html]


Подготовка графики и способы вставки

Как сделать окантовку

Если вы готовы к использованию окантовки в пользу, а не во вред, приступаем к самим кодам.
Итак, для простейшей окантовки нам потребуется верхняя часть картинки (которая должна включать в себя заголовок таблицы и, если надо, шапку таблицы форум/тем/просмотров/посл.сообщение), центральный фон таблиц (который должен без швов и других проблем повторяться по вертикали) и нижняя часть таблицы (которая будет замыкать окантовку).

По кодам следует сказать, что вариантов вставки окантовки много и они зависят от подготовленных картинок.
Например, если ваши картинки верха и низа предусматривают то, что там должен быть текст таблицы, а не просто являются рамкой, то формат вставки картинок будет иной.


Обрамление форумной таблицы

Шаг1. В категорию упаковываем повторяющуюся часть (+ делаем отступ):

Код:
.category {
  background: url("https://forumstatic.ru/files/0010/f2/5a/xxx.jpg") repeat-y scroll center top transparent;
  margin: 10px 0 30px !important;
}

Шаг2. В заголовок помещаем верхнюю часть:

Код:
.category h2 {
  background: url("/files/0010/f2/5a/ххх.jpg") no-repeat scroll center top transparent;
  height: 169px;
  text-align: center;
  width: 847px;
}

Шаг3. В контейнер контента помещаем верхнюю часть (+ делаем отступ снизу, чтоб таблица не выезжала за окантовку)

Код:
.category .container {
  background: url("/files/0010/f2/5a/ххх.jpg") no-repeat scroll center bottom transparent;
  padding-bottom: 15px;
}

Шаг4. Потом двигаем таблицу:

Код:
.category table {
  margin: -144px auto 0;
  width: 794px !important;
}

И добавляем отступ для верхней части, т.к. у меня получилась кривая картинка:

Код:
.category h2 {
  background: url("/files/0010/f2/5a/xxx.jpg") no-repeat scroll center top transparent;
  height: 169px;
  text-align: center;
  width: 847px;
  margin-left: 1px;
}

Осталось только доверстать саму табличку.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+1

2

[резерв]

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."