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

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Гайды и уроки по вебдизайну » Окантовки форумных таблиц для MyBB форумов


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

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

1

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

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

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

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

http://gerda.moy.su/_bl/0/37061187.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]

http://gerda.moy.su/_bl/0/70496597.jpg


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

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

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

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

http://gerda.moy.su/blog-dop/ok1.jpg


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

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

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

http://gerda.moy.su/blog-dop/ok2.jpg

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

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

http://gerda.moy.su/blog-dop/ok3.jpg

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

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

http://gerda.moy.su/blog-dop/ok4.jpg

Шаг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;
}

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

http://gerda.moy.su/blog-dop/ok5.jpg

+1

2

[резерв]

0

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

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


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

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


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Гайды и уроки по вебдизайну » Окантовки форумных таблиц для MyBB форумов