Стили PunBB

Материал из Flazy wiki

Перейти к: навигация, поиск

Вы можете использовать стили написанные для PunBB слегка их отредактировав и добавив новые селекторы. Давайте же посмотри что нужно добавлять и какие селекторы заменить. Приведём пример с подробными комментариями.

P.S: Заведомо разбиты на позиции и размеры элементов и их вид и цвет.

/* Личные сообщения (добавить)
-------------------------------------------------------------*/
table.pm-list {
        border-collapse: collapse;
        margin-bottom: -0.1em;
}
table.pm-list tr td, table.pm-list tr th {
        margin: 0;
        padding: 0.3em !important;
        border-style: solid;
        border-color: #e2e2e4;
}
table.pm-list tr.pm_new td, table.pm-list tr.pm_new td span {
        font-weight: bold;
}
table.pm-list tr .td1, table.pm-list tr .td2 {
        width: 2.3em;
        text-align: center;
        vertical-align: middle;
}
table.pm-list tr .td5, table.pm-list tr .td3 {
        width: 20%;
}
table.pm-list tr .td4 span {
        overflow: hidden;
        display: block;
        height: 1.3em;
}
table.pm-list tr .td4 a.mess {
        text-decoration: none;
        color: #999;
}
#brd-wrap #brd-profile-pm .post-entry {
        margin: 0;
        padding: 0;
        margin-bottom: 1.5em;
}
#brd-wrap #brd-profile-pm .post-entry .entry-content {
        margin: 1em 0.7em;
        width: auto !important;
}
/* Панель ББ-тегов (добавить)
----------------------------------------------------------------*/
#bbcode {
        height: 20px;
        margin: 0;
        padding: 0 1em;
}
#bbcode li {
        background-repeat: no-repeat;
        cursor: pointer !important;
        float: left;
        line-height: 0;
        list-style-type: none;
        width: 5%;
}
.bbm {
        background: #F3F5F6;
        border: 1px solid #DBE1E4;
        z-index: 2;
}
#font-area, #size-area, #color-area {
        width: auto;
        padding: 0.5em;
}
#color-area * {
        border: none;
}
#color-area table, #color-area td img {
        width: 256px;
        height: 14px;
        padding: 0;
        margin: 0;
}
#color-area td {
        margin: 0;
        padding: 0;
        line-height: 0;
}
#smilies-area {
        width: 450px;
        padding: 0.5em;
}
#font-area, #size-area {
        width: 200px;
}
#font-area, #size-area, #color-area, #smilies-area {
        position: absolute;
        right: 2%;
        top: 42px;
}
#font-area div, #size-area div, #color-area div, #smilies-area div, #smilies-area img {
        cursor: pointer !important;
}
#font-area span, #font-area img, #size-area span, #size-area img {
        display: block;
        position: relative;
        top: 0;
        left: 0;
}
#font-area span, #font-area img {
        height: 15px;
}
#size-area span, #size-area img {
        height: 22px;
}
#font-area span, #size-area span {
        padding: 0.1em 0;
}
#font-area img {
        margin-top: -15px;
        width: 100%;
}
#size-area img {
        margin-top: -24px;
        width: 100%;
}
/* Блоки рекламы (добавить)
----------------------------------------------------------------*/
.brd #brd-adbox, .brd #brd-guestbox {
        padding: 0.5em 1.5em;
        margin: 1em 0;
}
 
/* Индикаторы числа сообщений (добавить)
----------------------------------------------------------------*/
.info-replies .p1, .info-views .p1, .info-topics .p1, .info-posts .p1 {
        color: #303030;
}
.info-replies .p2, .info-views .p2, .info-topics .p2, .info-posts .p2 {
        font-size: 110%;
        color: #1a1a1a;
}
.info-replies .p3, .info-views .p3, .info-topics .p3, .info-posts .p3 {
        font-size: 120%;
        color: #000;
}
/* Опрос, индикатор голосования (добавить)
----------------------------------------------------------------*/
.count-poll {
        width: 100%;
        height: 8px;
}
.count-poll {
        background-color: #44bbe6;
}
/* Низ (Изменить\Добавить)
-------------------------------------------------------------*/
#brd-about #qjump {
        padding: 0.5em 0;
        margin-right: 1em;
}
#querytime {
        text-align: center;
        font-size: 0.9em;
}
/* Значки справа от темы (Добавить)
----------------------------------------------------------------*/
.subject-right {
        float: right;
        margin: 0.5em -0.8em 0 1.5em;
        position: relative;
        width: 12px;
        height: 12px;
}
/* Споилер, Хайд (Добавить)
----------------------------------------------------------------*/
#brd-wrap .entry-content .spoiler-text, #brd-wrap .entry-content .hide-text {
        border-style: solid;
        border-width: 1px;
        margin: 0.75em 1em;
        padding: 1em 0.75em;
}
.spoiler-head, .hide-head {
        border-style: solid;
        border-width: 1px;
        margin: 0 1em;
        padding: 0 1em;
        padding-left: 20px;
        background: url(toggle.gif) no-repeat;
}
#brd-wrap .entry-content .spoiler-text, #brd-wrap .entry-content .hide-text {
        margin: 0 1em;
}
.show {
        background-position: 0px -17px;
        border-bottom: none;
}
.spoiler-head, .hide-head {
        cursor: pointer;
        color: #00569c;
        font-weight: bold;
}
.spoiler-head span, .hide-head span {
        font-weight: normal;
}
.spoiler-text, .hide-text {
        display: none;
        color: #333;
        cursor: auto;
}
/* Блок с иконками месаджеров (Добавить)
----------------------------------------------------------------*/
.brd .postfoot .post-identity {
        float: left;
        padding: 0.5em 1em 0.5em 1em;
        text-align: left;
        display: block;
}
/* Всплывающие титлы (Добавить)
----------------------------------------------------------------*/
#tooltip {
        position: absolute;
        font-size: 0.7em;
        font-family: Verdana, Helvetica, Arial, sans-serif;
        z-index: 3;
        padding: 5px;
}
#tooltip h3, #tooltip div {
        font-size: 1.074em;
        font-weight: bold;
        margin: 0;
}
#tooltip h3 {
        color: #000;
}
#tooltip {
        border: 1px solid #060505;
        color: #292D2A;
        background: #c5e8fb;
}
/* Статистика на главной (Добавить)
----------------------------------------------------------------*/
.brd .index-stat {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        border-top: 0;
}
.brd .index-stat .hn, .brd .index-stat p {
        padding-bottom: 0;
        padding-top: 0;
}
.brd .index-stat .hn {
        float: left;
        margin-right: 0.5em;
}
#brd-statlist p {
        text-align: center;
}
/* Эти поля обязательно надо скрыть (Добавить)
----------------------------------------------------------------*/
#lolfld1, #lolfld2, #lolfld4 {
        display: none;
}
/* Остальное (Добавить)
----------------------------------------------------------------*/
.brd .user-on {
        float:left;
}
a.toggle {
        position: relative;
        float: right;
        z-index: 3;
        margin: 7px 10px 0 0;
        display: none;
        width: 17px;
        height: 17px;
        background-image: url(toggle.gif);
        text-decoration: none;
}
a.hide {
        background-position: 0px 17px;
}

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

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url ?>/style/imgs.css" />

Источник — «https://flazy.ru/wiki/%D0%A1%D1%82%D0%B8%D0%BB%D0%B8_PunBB»

Категория: Стили

Стили PunBB

Материал из Flazy wiki

Просмотры

Личные инструменты

Навигация

Поиск

Инструменты