Это руководство поможет вам понять различные переменные величины виджет, который имеет каждая форма форума в CSS.


Панель Управления ► Оформление ► Картинки и цвета ► Цветы ► Каскадная таблица стилей CSS

Переменные

Следующие коды представлены и рекомендуется использовать опытным пользователям. Используйте переменные, которые указаны для вашей версии форума.

PhpBB2
#right .forumline, #left .forumline	Весь виджет
#right td.catHead .genmed, #lefttd.catHead .genmed, #righttd.catLeft .genmed, #left td.catLeft .genmed	Текст заголовка
#right td.catHead, #left td.catHead,#right td.catLeft, #left td.catLeft	Фон заголовка
#right .forumline .row1, #left.forumline .row1	Ячейка 1 виджет
#right .forumline .row2, #left.forumline .row2	Ячейка 2 виджета
#right .forumline .row3, #left.forumline .row3	Ячейка 3 виджета
PhpBB3
.module	Весь виджет
.module .h3	Текст заголовка
.module .inner	Содержание виджета
PunBB
.module	Весь виджет
.module .main-head	Текст заголовка
.module .main-content	Содержание виджета
Invision
.module.borderwrap	Весь виджет
.module .maintitle	Текст заголовка
.module .box-content	Содержание виджета
PhpBB3, PunBB, Invision
.module .row1	Ячейка 1 виджет
.module .row2	Ячейка 2 виджета
.module .row3	Ячейка 3 виджета

Трюки

Вид исходной формы названия виджета для PhpBB3
(т. е. из ГЛАВ в обычном режиме)

Код:

.module .h3 { text-transform:none }

Добавьте тени в виджеты
КОД:Выбор Содержимого

Код:

#right .forumline, #left .forumline, .module { box-shadow:2px 2px 2px rgba(0,0,0,0.4) }

Готовые Предложения

Предложение 1


PhpBB2:

Код:

#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft {
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-radius:6px 6px 0 0; /* rounds the borders */
  border-bottom:1px solid #CCC; /* border size and color */
}
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed {
  color:#666; /* color of the title font */
  font-size:12px; /* size of the title font */
  padding:6px; /* Inner padding */
}
#right .forumline, #left .forumline {
  background:#EEE; /* background color */
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
#right .forumline .row1, #left .forumline .row1, #right .forumline .row2, #left .forumline.row2, #right .forumline .row3, #left .forumline .row3 { background:none /* removes the background color on the rows */ }

PhpBB3:

Код:

.module .h3 {
  color:#666; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #CCC; /* border size and color */
  border-radius:6px 6px 0 0; /* rounds the borders */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#EEE; /* background color */
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

PunBB:

Код:

.module .main-head {
  color:#666; /* color of the title font */
  font-size:11px; /* size of the title font */
  font-weight:700; /* boldness of the title */
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #CCC; /* border size and color */
  border-radius:6px 6px 0 0; /* rounds the borders */
  padding:6px; /* Inner padding */
}
.module .main-content { background:#EEE; /* background color */ }
.module {
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

Invision:

Код:

.module .maintitle {
  color:#666; /* color of the title font */
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #CCC; /* border size and color */
  border-radius:6px 6px 0 0; /* rounds the borders */
  padding:6px; /* Inner padding */
}
.module .box-content { background:none /* removes background color */ }
.module.borderwrap {
  background:#EEE; /* background color */
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

Предложение 2

Phpbb2:

Код:

#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft {
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-radius:12px 3px 0 0; /* rounds the borders */
  border-bottom:1px solid #39C; /* border size and color */
}
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed {
  color:#FFF; /* color of the title font */
  font-size:12px; /* size of the title font */
  padding:6px; /* Inner padding */
}
#right .forumline, #left .forumline {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3PX; /* rounds the borders */
}
#right .forumline .row1, #left .forumline .row1, #right .forumline .row2, #left .forumline.row2, #right .forumline .row3, #left .forumline .row3 { background:none /* removes the background color on the rows */ }

PhpBB3:

Код:

.module .h3 {
  color:#FFF; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

PunBB:

Код:

.module .main-head {
  color:#FFF; /* color of the title font */
  font-size:11px; /* size of the title font */
  font-weight:700; /* boldness of the title */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  padding:6px; /* Inner padding */
}
.module .main-content { background:#DEF; /* background color */ }
.module {
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

Invision:

Код:

.module .maintitle {
  color:#FFF; /* color of the title font */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  border-radius:12px 3px 0 0; /* rounds the borders */
  padding:6px; /* Inner padding */
}
.module .box-content { background:none /* removes background color */ }
.module.borderwrap {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

Предложение 3

PhpBB3 только

Код:

.module .h3 {
  margin-top: 8px;
  text-align: center;
  margin-bottom: 10px;
  color: red !important; /*Change to whatever suits your forum style*/
  border-bottom-color:red;
}
.module .row1, .module .row2 { background:none }
.module {
  margin-left: 10px;
  background-image: url('http://i57.servimg.com/u/f57/18/80/95/58/module11.png');
  border: 1px solid #444;
  background-position: center bottom;
  background-repeat: repeat-x;
  box-shadow: inset 0px 15px 5px #1B1B1B, 2px 2px 5px #000;
  color:#CCC !important;
  border-radius: 4px;
  background-color:#0F0F0F;
  color: #536482;
  margin-bottom: 4px;
  border: 1px dashed #444;
  margin-top: 15px;
}