[Добавить в закладки]    [Мобильная Версия]
Инфо о Сайте: на нашем сайте вы сможете найти всё для вашего
сайта или форума ну или почти...
Меню сайта
Мини чат
200
Главная » Статьи » Мои статьи [ Добавить статью ]
Помощь в функции "Свой стиль"
Я ни в коем случае не претендую на авторство скипа)
Не знаю как вам, а мне он в своё время очень помог!

Итак:
для начала заглядываем в верхнее окно пункта Стиль (Администрирование-Стиль) под названием Структура style.css.
Прокручиваем вниз, пока не увидим вот такой кусочек:
Quote
/* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
font-size: 100.01%;
}

/* A3.2 */
.punbb {
font: normal 68.75% verdana, arial, helvetica, sans-serif;
}

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
font: 1em verdana, arial, helvetica, sans-serif
}

/* A3.6 */
.punbb pre {
font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
}

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

Далее не трогайте следующие пункты и переходите вот к этому:
Quote
/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 90%;
}

Этот пункт задает положение страницы вашего форума. То есть - как (какой будет отступ от начала страницы, как она будет размещатся - справа или слева, а может посередине (margin: 0px auto auto auto;)) она будет отображатся, и какой она будет ширины (width : 90%; - можно задавать в процентах и в пикселях. В процентах надежнее для всех разрешений, но в пикселях удобнее для установки шапки).
Quote
/* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}

Этот кусочек кода регулирует положение сообщения о переадресации.
То есть - margin: 50px 20% 12px 20%; то, на каком расстоянии от границ монитора она будет отображаться.
width: auto; - какой будет ширины
Quote
/* A5.9 */
.punbb .container {
border-style: solid;
border-width: 1px;
}

Это излюбленное место всех администраторов форумов по некам - обводка таблицы форума. Обычно, увы, еще и розовым.
Тут все очевидно - border-style - как именно вы желаете, чтоб отображалась граница основной таблицы форума,
border-width - какой ширины эта несчастная границы должна быть.
Quote
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: solid;
border-bottom: none;
border-width:1px;
}

Этот параметр регулирует то же самое, только относительно границ категорий, полей профиля и.т.д.

Далее обращаете ваше внимание на вот этот параметр:
Quote
/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px solid #888;
width: 250px;
margin: 5px 0;
}

Это настройки отображение границы между постами и подписями ваших пользователей. Упаси вас боги сделать их одного цвета с фоновой заливкой поста - будет жуткая неразбериха. Делайте их контрастным цветом.
border-top: 1px solid #888; - параметр, отвечающих за то, как будет отображаться эта граница и какого она будет цвета.
width: 250px; - ширина этой линии-границы. Не рекомендую делать больше 500px, будет на редкость фигово выглядеть.
margin: 5px 0; - настраивает величину отступа

Далее просто проматываете ваш код, ничего не изменяя, пока не натыкаетесь вот на это. Если вам не нравится ширина граф таблицы форума "Форум", "Тем", "Сообщений", "Последнее сообщение", то используя эти параметры вы можете их изменить.
Если вы задавали ширину форума в процентах, то лучше не прописывайте ширину граф в пикселях, может выйти полная мура. (У меня было, хотя это только единичный случай. Но на MyBB бывает всякое, сами знаете).
Если форум у вас в пикселях - задавайте как хотите, но учитывайте, что ширина вашего форума - это 100%.
Quote
/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}

Первая графа - "Форум".
text-align: left; - отображение текста описания форума.
width: 50%; - ширина данной графы.
Quote
/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
text-align: center;
width: 10%;
}

Вторая и третья графы - "Тем и "Сообщений"
text-align:center; - отображение цифр.
width: 10%; - ширина данной графы.
Quote
/* C2.3 */
.punbb .main .tcr {
overflow: hidden;
text-align: left;
width: 30%;
}

Графа "Последнее сообщение". Не задавайте ей слишком большую ширину, это не очень красиво выглядит. Пройдите по другим форумам - графа "Форум" должна быть самой широкой, это общепринятая практика, и, она наиболее привычна, если вы понимаете о чем я.
Сайты принято затачивать под 1024*768, в крайнем случае 1200*1024, графа "Форум" - самая широкая - это общее правило.
text-align: left; - отображение текста описания форума.
width: 30%; - ширина данной графы.

Находите вот это:
Quote
/* C2.12 */

.punbb .main th {

padding: 7px 1em 7px 1em;

border-left: 1px solid #цвет;

border-bottom: 2px solid #цвет;

border-top: 1px solid #цвет;

}

Этот пункт определяет цвет и стиль обводки вашего punbb .main th, а говоря обычным языком - той графы, где располагаются слова - "Форум", "Тем", "Сообщений", "Последнее сообщение".

Далее пропускаете несколько строк и видите вот такие строки. Тут вы сможете настроить отображения иконок тем (Есть\нет новых сообщений, закрыто, важно, переадресация)
Quote
/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}

Этот параметр регулирует отступ от иконки. То есть то расстояние, в пикселях, которое будет пропущено между иконкой и тестом описания форума. Не ставьте этот параметр в процентах.
Отступ должен быть не меньшим, чем длина вашей иконки, а лучше - чуть большим.
Quote
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 30px;
height: 30px;
padding-top: 1px;
margin-top: 1px;
}

Расположение, ширина и высота ваших иконок. Если вы только собираете их делать - пока что оставьте это поле пустым, заполните позже. Заполнять его надо обязательно, скрипты в ХТМЛ-верх, низ и еще куда вас не спасут.

Есть категория дизайнеров, которые мнят себя великими, однако допускают ламерские ошибки. Но вы, мой дорогой читатель, ведь не такой? Таких псевдодизайнеров легко вычислить по вот этому моменту, которого они не знают, и никогда не изменяют. Смешно смотреть, как на черном фоне ярко видна белая, или зеленая палочка, и в голове вертится только одно слово. Догадайтесь сами, какое.
Этот параметр меняет границу между ником пользователя и датой и временем отправки сообщения.
Что бы вы, мой уважаемый читатель, выглядели умным администратором, обязательно заменить вот тут одно значение:
Quote
/* C3.3 */

.punbb .post h3 span {

border-left: 1px solid #000;

padding: 0.5em 1em;

display: block;

margin-left: 19em;

}

border-left: 1px solid #000; - вот тут поставьте основной цвет границ таблицы вашего форума - и будет вам и респект, и уважуха.

Далее просто проматываете ваш код вот до этого места:
/* D1 Logo and description
-------------------------------------------------------------*/

Находите вот этот момент. Видите его? Тут нужно вставить высоту вашего логотипа.
Quote
/* D1.2 */
#pun-title h1 {
display : block;
height : 105px;
padding: 2em 1em 0 1em;
}

Вот это значение - height : 105px; заменяете на значение высоты вашего лого.
Quote
#pun-title TABLE {
border: none;
height: 105px;
width: 100%;
border-top: solid 1px #636496
}

Здесь вы можете настроить размер и цвет графы, где будет помещатся ваш логотип.
height: 105px; - высота логотипа - лучше, если будет совпадать с той, которая в D1.2
width: 100%; - ширина графы. Менять не стоит.
border-top: solid 1px #636496 - обводка логотипа сверху. Цвет лучше брать либо с основной таблицы форума, либо выбирать основной цвет фона. Избегайте контрастных цветов.
Quote
#pun-title TD.title-logo-tdr {
border: none;
width: 468px;
}

Рекламный баннер, который скрывать нельзя. Тут я советую поступить как в Mybb_Cards. Вот кодик для такого перемещения баннера:
Quote
#pun-title TD.title-logo-tdr {
border: none;
width: 468px;
vertical-align: top;
padding-top: 2px;
position: absolute;
left: 31%;
top: 0;
}

На забудьте использовав этот кодик, вернутся назад и прописать вот тут:
Quote
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 90%;
}

Вот тут:
margin: 64px auto auto auto;
Высота баннера, что тут поделаешь, бесплатный форум.

В принципе, далее можно не трогать, особенно если вы незначительно переделываете форум. Если вы его переделываете значительно, то ищите вот эти моменты:
Quote
/* D3.1 */

#pun-navlinks {

border: 1px solid transparent;

margin: 0;

margin-bottom: 10px;

}

И вот тут: border: 1px solid #цвет; Ставите либо основной цвет границ вашего форума, либо параметр прозрачности.

Далее идете вот сюда:
Quote
/* D4.2 */

#pun-ulinks .container {

padding: 0.7em 1em;

text-align: center;

border: solid 1px transparent;

}

и делаете то же самое.

так вы поменяли обводку граф с ссылками навигации и пользовательскими ссылками.

Далее ничего не трогаете и сохраняете все изменения.

Конец разбора пункта Структура style.css.

---------------------------------------

Начало разбора пункта Цвета style_cs.css

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

Вы видите это:

Quote
html, body{
background-color: #000;
color: #fff
}

Что это? Этот параметр задает фоновый рисунок вашего форума.
В данном случае фоновый рисунок задан просто как заливка цветом. если вы хотите поставить что-то более интересное - используйте вот такой код:
Quote
body {

background: url(ссылка на ваш фон) #цвет repeat fixed !important;

}

Цвет ставите тот, который вам будет приятно видеть на странице переадресации.

Далее:

Quote
#pun-title TABLE {
background: url(ссылка на шапку вашего форума (или лого)) #цвет заливки no-repeat top center;
}

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

Quote
#pun {

background: url(ссылка на фон) #цвет;

}

Если не хотите заливать - просто сотрите все параметры отсюда, если они тут есть, пропишите background:none и оставьте этот кусочек кода в покое.

Далее вы видите параметр, отвечающий за заливку всех основных элементов вашего фора. Тут и фон поста, и фон строки приветствия, и фон граф "Форум" и "Последнее сообщение" и многое, много другое.

Quote
.punbb .main .container,
.punbb .section .container,
.punbb .section .formal .container,
.punbb .formal fieldset,
#viewprofile li strong, #viewprofile li div,
#setmods dd,
.punbb .post-body,
.post-box,
.punbb .post-links,
.punbb-admin #pun-admain .adcontainer,
.punbb .info-box, .punbb #pun-main .info-box .legend {background: url(ссылка на фон) #цвет repeat;
color: #000;
}

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

Этот параметр:

Quote
/* CS1.2 */
#pun-ulinks .container {
background: url(ссылка на фон) #000 repeat;
color: #000;
}

Изменит заливку фона пользовательских ссылок форума. Можно вставлять туда как картинку, так и фоновый цвет.
Вот этот параметр color: #000; отвечает за то, каким цветом будут написаны эти ссылки в спокойном состоянии.

Эти параметры

Quote
.punbb .post .container,
.punbb .post h3 {
background: url(ссылка на фон) #цвет repeat;
color: #000;
}

.punbb .post h3 span {
background: url(ссылка на фон) #цвет repeat;
color: #000;
}

определяют заливку графы с именем пользователя, информацией о нем, строки с номером и временем отправки поста. Можно его заливать как фоновым рисунком, так и цветом.
color: #000; - тут прописываете цвет текста.

Чтобы окрасить колонки Тем и Сообщений нужно прописать ссылку на фон, или цвет заливки вот в этом месте:

Quote
.punbb td.tc2, .punbb td.tc3 {
background: #цвет заливки;
color: #000;
}

Если хотите использовать фон - выделите backgroung: и вставьте на его место - background: url(ссылка на фон)
color: #000; - тут прописываете цвет текста.

Для заливки фоном категорий используйте вот этот отрезок кода:

Quote
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background: url(ссылка на фон) #цвет заливки repeat-x;
color: #000;
text-align: center;
font-size: 1.2em;
font-family: Arbat;
font-weight: normal;
letter-spacing: 1px;
}

color: #000; - это цвет текста.
text-align: center; - расположение текста названия категории
font-size: 1.2em;
font-family: Arbat;
font-weight: normal; - это размеры шрифта, семейство шрифтов и способ начертания.

Далее

Quote
/* CS1.4 */
.punbb .modmenu .container {
background: url(ссылка на фон) #цвет заливки;
color: #000;
}

Этот параметр задает фон заливки меню модератора и поля активных в данной теме.
color: #000; - это цвет текста, который будет использоватся в меню модератора, а также при отображении пользователей, которые просматривают данную тему.

Quote
/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
background: url(ссылка на фон) #фоновый цвет repeat-x;
color: #fff;
}

Этот параметр определяет как будут залиты категории в профиле, обычно его можно заливать каким-то фоновом рисунком, будет достаточно забавно смотреться.
color: #fff; - этот цвет текста, которым это будет написано. Если вы желаете изменить шрифт, то добавляйте
text-align: center; - расположение текста названия категории
font-size: 1.2em;
font-family: Arbat;
font-weight: normal; - это размеры шрифта, семейство шрифтов и способ начертания.

Просматривая следующий отрезок, мы видим, что этот кусочек кода

Quote
.punbb .post h3 strong {
font-size: 0.9em;
color: #000;
}

Определяет то, каким размером будет написано время и дату написания поста, а также его номер.
color: #000; - это цвет текста, который будет использоваться

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

Quote
/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
background: url(ссылка на фон) #цвет фоновой заливки;
color: #000;
border: 1px solid #цвет границы;
}

.punbb textarea, .punbb select, .punbb input {
background: url(ссылка на фон) #цвет фоновой заливки;
color: #000;
border: 1px solid #цвет границы;
}

color: #000; - цвет текста кода, цитаты и в форме быстрого ответа.

/* CS1.8 */
#pun-navlinks .container {
background: url(ссылка на фон) repeat;
color: #000;
}

Этот параметр изменяет цвет фона под ссылками навигации.
Тем, кто желает, чтоб "при нажатии лапка выпускала когти" тут нужно прописать фоновый рисунок лапки в спокойном состоянии, то есть "без когтей".
color: #000; - цвет текста ссылок навигации.

Quote
.punbb th {
color: #fff;
background: url(ссылка на фон) #цвет фоновой заливки repeat;
}

Этот параметр определяет как будут залита графа "Форум, Тем, Сообщений, Последнее сообщение", обычно его можно заливать каким-то фоновом рисунком, будет достаточно забавно смотреся.
color: #fff; - этот цвет текста, которым это будет написано. Если вы желаете изменить шрифт, то добавляйте
text-align: center; - расположение текста "форум, тем, сообщений, последнее сообщение"
font-size: 1.2em;
font-family: Arbat;
font-weight: normal; - это размеры шрифта, семейство шрифтов и способ начертания.

/
Quote
* CS2 Border colours
-------------------------------------------------------------*/
#pun-title, #pun-navlinks {
border-color: #цвет границы;
}

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
border-color: #цвет границы
}

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
border-color: #цвет границы;
}

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
border-color: #цвет границы;
}

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
border-color: #цвет границы;
}

/* CS2.5 */
.punbb th {
border-color: #цвет границы;
}

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
border-color: #цвет границы;
}

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
border-color: #цвет границы
}

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
border-color: #цвет границы
}

.punbb .divider {
border-color: #цвет границы
}

.punbb .formal fieldset .post-box, .punbb .info-box {
border: 1px solid #цвет границы;
}

li.pa-online {
border-left-color: #цвет прямоугольничка слева от надписи "Активен";
}

Эти параметры изменяют цвет и начертание границы. Границы можно заливать одним цветом, в принципе, это достаточно просто. Если хотите, можете поинспериментрировать с схожими цветами.

/
Quote
* CS3 Links

-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
color: #000;
}

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
color: #000;
}

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

Quote
/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active, .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
color: #000;
}

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

Quote
/* CS3.3 */
#pun-navlinks a {
color: #000;
text-decoration: none
}

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

Quote
/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #000;
text-decoration: underline
}

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

Quote
#pun-pagelinks a:active, #pun-pagelinks a:focus {
background-color: #000;
color: #000;
}

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

Quote
.post h3 span a:link, .post h3 span a:visited {
font-weight: normal;
font-size: 0.9em;
text-decoration: none;
}

Цвета всех ссылок на форуме.
В основном заливаются одним цветом, однако, если вы хотите, чтоб "при нажатии лапка выпускала когти", то вам следует обратить внимание на вот эти пункты:

Quote
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #000;
text-decoration: underline;
background: url("ссылка на фон") repeat-x;
}

#pun-pagelinks a:active, #pun-pagelinks a:focus {
background: url("ссылка на фон") repeat-x;
color: #000;
}

И проставить тут необходимый вам фон.

Едем далее - установка иконок

Quote
/* CS4 Post status icons
-------------------------------------------------------------*/
div.icon {
background: url(Иконка старой темы) no-repeat;
}

Иконка нет новых сообщений

Quote
tr.inew div.icon {
background: url(новой темы) no-repeat;
}

Иконка есть новые сообщения

Quote
tr.iclosed div.icon {
background: url(закрыто) no-repeat;
}

Иконка закрытой темы

Quote
tr.iredirect div.icon {
background: url(Переадресация) no-repeat;
}

Иконка форума с переадресацией

Quote
tr.isticky div.icon {
background: url(важно) no-repeat;
}

Иконка важной темы.
Просто подставляете ссылки на ваши изображения и все.

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

Quote
.punbb .main h2 span, #pun-stats h2 span {
background: none;
padding-left: 10px;
padding-top: 9px;
padding-bottom: 8px;
margin-left: -12px;
}

background: none; - в данном случае этот момент отключен, но если он вам нужен - просто поставьте ссылку на ваш фон.
padding-left: 10px;
padding-top: 9px;
padding-bottom: 8px;
margin-left: -12px; - расположение данного рисунка. Точно сказать - какое значение нужно - практически нереально, так что придется экспериментировать.

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

Quote
td.tcr a{
background: transparent url(ссылка на картинку) no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 4px;
pading-top: 7px;
}

Два следующих параметра я рекомендую заливать одним цветом, если у вас в качестве фона для статистики форума используется цвет. Если же у вас изображение, то задайте background: none для первого и работайте со вторым.

Quote
#pun-stats ul.container {
color: #000000;
background-color: #D3A45C;
}

#pun-crumbs2 .container, #pun-about .container {
color: #000000;
background-color: #D3A45C;
}

Вот это иконка статистики.

Quote
#pun-stats div.statscon {

color: #000000;
background url(ссылка на иконку) #цвет no-repeat 10px 10px;;
padding-left: 66px;
}

10px 10px; - эти параметры задают отступ слева и сверху
padding-left: 66px; - а вот этот - справа. Его необходимо расчитывать по принципу - ширина иконки + как минимум 10 пискселей до начала строки "Активны".
Категория: Мои статьи | Добавил: admin (31.05.2011) | Автор: Barbariso4ka
Просмотров: 837 | Теги: стиль, настройка, разбор стиля, Помощь со стилем, настройка стиля | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]