Рамка вокруг форума на css и div

Простейший вариант, только на css

Получите двойной контур. Внутри при желании можно задать особый цвет фона, отличный от цвета фона body.

схематическое изображение.

Ваш скин > редактирование css (расширенный режим)

Найти
#ipbwrapper{
margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
width: 98%;
}
Заменить на

#ipbwrapper{
margin: 20px* auto 20px* auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
width: 98%; border:3px double #желаемый цвет; background: #желаемый цвет; padding:5px; }
* при необходимости можно уменьшить значение margin, например с 20 до 10.

Верстка рамки на div с добавлением новых классов css и использованием графики

Получите рамку с округлыми уголками или уголками любой желаемой формы.

схематическое изображение.

• Создаем 4 уголка для рамки    с названиями top_left .png; top_right.png; bottom_left.png; bottom_right.png. Не забываем положить их в папку графики скина. Картинки, соданные для примера, расчитаны на белый фон body, а внутренний фон будет голубым.
• Ваш скин > редактирование css (расширенный режим)

  Найти
  #ipbwrapper{
margin: 20px auto 20px auto; /* centers the box, no matter the overall width, also applies a 20px gap at the top and bottom of the board */
text-align: left; /* re_aligns text to left second part of two part MSIE centering workaround */
/* EDIT THIS TO CHANGE THE WIDTH OF THE BOARD -> 960px is a common fixed resolution size */
width: 98%;
}
  Заменить на

  #ipbwrapper{
margin: 20px auto 20px auto;

  width: 98%;

  background: #e6f0ff;
  }

  div.top-left{

  background-image: url(style_images/<#IMG_DIR#>/top_left.png);

  background-repeat: no-repeat;

  background-position: top left;

  height: 13px;

  }

  div.top-right{

  background-image: url(style_images/<#IMG_DIR#>/top_right.png);

  background-repeat: no-repeat;

  background-position: top right;

  height: 13px;

  }

  div.bottom-left{

  background-image: url(style_images/<#IMG_DIR#>/bottom_left.png);

  background-repeat: no-repeat;

  background-position: bottom left;

  height: 13px;

  }

  div.bottom-right{

  background-image: url(style_images/<#IMG_DIR#>/bottom_right.png);

  background-repeat: no-repeat;

  background-position: bottom right;

  height: 13px;

  }
  #ipbwrapper1{
  margin: 0px auto 0px auto;

  width: 98%;

  padding:5px;

  }

  Не забудьте выставить свое значение высоты картинок, если оно отлично от 13px.

• Ваш скин > общий шаблон форума (Editing the Board Header and Footer Wrapper)

  Найти

  <div id="ipbwrapper">

  Ниже добавить

  <div class="top-left"><div class="top-right"></div></div>

  В самом низу найти

  </div>
  Выше добавить

  </div>
<div class="bottom-left"><div class="bottom-right"></div></div>

Нет связанных статей.

Шапка форума IPB из трех картинок

Вариант для стандартных параметров (высота 68px)

1. Создание графики
Создаем три картинки и градиент для фона.
Назовем их logo1.gif (центральная), logo2.gif (левая), logo3.gif (правая) и tile_back.gif (градиент для фона)

2. Редактирование css

Свойства стиля > расширенный режим редактирования css
Находим

#logostrip{
background: #3860BB url(style_images/<#IMG_DIR#>/tile_back.gif);
border: 1px solid #FFF;
height: 68px;
margin: 0;
padding: 0;
}

и заменяем на:

#logostrip1{
background: #3860BB url(style_images/<#IMG_DIR#>/tile_back.gif);
border: 1px solid #FFF;
height: 68px;
margin: 0;
padding: 0;
}
#logostrip{
background: transparent url(style_images/<#IMG_DIR#>/logo1.gif) no-repeat center;
height: 68px;
margin: 0;
padding: 0;
}

3. Редактирование HTML
Свойства стиля > редактирование HTML шаблонов > skin_board_header

Находим

<div id=”logostrip”><a href=’{$this->ipsclass->base_url}’><!–ipb.logo.start–><img src=’style_images/<#IMG_DIR#>/logo4.gif’ style=’vertical-align:top’ alt=’IPB’ border=’0′ /><!–ipb.logo.end–></a></div>

Заменяем на

<div id="logostrip1">
<div style="float:right;padding:0"><img src='style_images/<#IMG_DIR#>/logo3.gif' style='vertical-align:top' alt='' border='0' /></div><div id="logostrip"><a href='{$this->ipsclass->base_url}'><!--ipb.logo.start--><img src='style_images/<#IMG_DIR#>/logo2.gif' style='vertical-align:top' alt='IPB' border='0' /><!--ipb.logo.end--></a></div></div>
Примечания:
Высоту 68px замените на свою и при необходимости измените цвета фона и контура в #logostrip1.
Для IPB 1.x-2.1.x:
<a href='{$this->ipsclass->base_url}'>
замените на
<a href='{ipb.script_url}'>

Связанные статьи:

1. Масштабируемый (резиновый) логотип для IP.Board 3.0 1. Готовим длинную картинку (примерно 1200 на 150px). Сохраняем ее...

Один из множества курьезов всех версий форумов IPB линеек 2.0 – 2.3 – это потеря класса row3 в css, при том, что в коде шаблонов он продолжает существовать.
Пример – форма регистрации. Поля для Username, Password, Email Address прописаны с классом row3, но при его отсутствии выглядят пустыми прямоугольниками с грубым контуром.
Не поленитесь восполнить потерю, допишите row3 с желаемыми параметрами в стилях.
Пример можно посмотреть в скине по дефолту на форуме в форме регистрации.

Нет связанных статей.

Этот совет пригодится создателям текстовых скинов, в стилях IPB с графическими кнопками в темах и сообщениях он неэффективен.

Обычно подчеркивание ссылок убирается изменением общих классов для ссылок
a:,
a:links,
a:visited,
a:active
с заменой параметра text-decoration: underline; на text-decoration: none;

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

Открываем расширенный режим редактирования css, внизу добавляем:
Для кнопок тем:
td.nopad a:link,
td.nopad a:visited,
td.nopad a:active {
text-decoration: none;
}
Для кнопок в сообщениях:
td.formbuttonrow a:link,
td.formbuttonrow a:visited,
td.formbuttonrow a:active{
text-decoration: none;
}

Нет связанных статей.

Масштабируемый (резиновый)   логотип, все версии IPB

Пример: стиль Mystic Cafe Skin
Эффект станет понятен при изменении размера окна.

1. Папки форума на сервере */style_images/, */cache/ и  */cache/skin_cache/ должны быть доступны для записи и изменения, CHMOD (права доступа) должен иметь значение 0777.

2. Подбираем картинку размером приблизительно 1000-1200 на 100-200 px и заменяем ею файл logo4.gif (или свое название и расширение, допустимо также jpg и png). Кириллические символы в имени файла недопустимы. Также следите за регистром. Если в имени файла есть ПРОПИСНЫЕ символы, то и в коде его название должно быть соответствующим. Иначе Unux сервера файл не узнают.

3. Открываем расширенный режим редактирования css
Находим id #logostrip
Где

height: 68px;

Заменяем на

height: auto;

4. Теперь открываем редактирование HTML шаблонов  > skin global  > global_board_header

Находим

img src=’style_images/<#IMG_DIR#>/logo4.gif’ style=’vertical-align:top’ alt=’IPB’ border=’0′

Заменяем на

img src=’style_images/<#IMG_DIR#>/logo4.gif’ style=’vertical-align:top’ alt=’IPB’ border=’0′ width=’100%’

И проверяем эффект на экране

Связанные статьи:

1. Масштабируемый (резиновый) логотип для IP.Board 3.0 1. Готовим длинную картинку (примерно 1200 на 150px). Сохраняем ее...