Я ни в коем случае не претендую на авторство скипа)
Не знаю как вам, а мне он в своё время очень помог!
Итак:
для начала заглядываем в верхнее окно пункта Стиль (Администрирование-Стиль) под названием Структура style.css.
Прокручиваем вниз, пока не увидим вот такой кусочек:
/* 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
}
Регулирует размер шрифта и шрифты вашего форума. Если хотите оформить ваш форум в одном шрифте - поменяйте все семейства шрифтов тут на избранное вами. Но лично я не рекомендую этого делать, так как много шрифтов лучше, чем один.
Далее не трогайте следующие пункты и переходите вот к этому:
/* A5 Basic page layout and borders
-------------------------------------------------------------*//* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 90%;
}
Этот пункт задает положение страницы вашего форума. То есть - как (какой будет отступ от начала страницы, как она будет размещатся - справа или слева, а может посередине (margin: 0px auto auto auto;)) она будет отображатся, и какой она будет ширины (width : 90%; - можно задавать в процентах и в пикселях. В процентах надежнее для всех разрешений, но в пикселях удобнее для установки шапки).
/* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}
Этот кусочек кода регулирует положение сообщения о переадресации.
То есть - margin: 50px 20% 12px 20%; то, на каком расстоянии от границ монитора она будет отображаться.
width: auto; - какой будет ширины
/* A5.9 */
.punbb .container {
border-style: solid;
border-width: 1px;
}
Это излюбленное место всех администраторов форумов по некам - обводка таблицы форума. Обычно, увы, еще и розовым.
Тут все очевидно - border-style - как именно вы желаете, чтоб отображалась граница основной таблицы форума,
border-width - какой ширины эта несчастная границы должна быть.
/* 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;
}
Этот параметр регулирует то же самое, только относительно границ категорий, полей профиля и.т.д.
Далее обращаете ваше внимание на вот этот параметр:
/* 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%.
/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}
Первая графа - "Форум".
text-align: left; - отображение текста описания форума.
width: 50%; - ширина данной графы.
/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
text-align: center;
width: 10%;
}
Вторая и третья графы - "Тем и "Сообщений"
text-align:center; - отображение цифр.
width: 10%; - ширина данной графы.
/* C2.3 */
.punbb .main .tcr {
overflow: hidden;
text-align: left;
width: 30%;
}
Графа "Последнее сообщение". Не задавайте ей слишком большую ширину, это не очень красиво выглядит. Пройдите по другим форумам - графа "Форум" должна быть самой широкой, это общепринятая практика, и, она наиболее привычна, если вы понимаете о чем я.
Сайты принято затачивать под 1024*768, в крайнем случае 1200*1024, графа "Форум" - самая широкая - это общее правило.
text-align: left; - отображение текста описания форума.
width: 30%; - ширина данной графы.
Находите вот это:
/* 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, а говоря обычным языком - той графы, где располагаются слова - "Форум", "Тем", "Сообщений", "Последнее сообщение".
Далее пропускаете несколько строк и видите вот такие строки. Тут вы сможете настроить отображения иконок тем (Есть\нет новых сообщений, закрыто, важно, переадресация)
/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}
Этот параметр регулирует отступ от иконки. То есть то расстояние, в пикселях, которое будет пропущено между иконкой и тестом описания форума. Не ставьте этот параметр в процентах.
Отступ должен быть не меньшим, чем длина вашей иконки, а лучше - чуть большим.
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 30px;
height: 30px;
padding-top: 1px;
margin-top: 1px;
}
Расположение, ширина и высота ваших иконок. Если вы только собираете их делать - пока что оставьте это поле пустым, заполните позже. Заполнять его надо обязательно, скрипты в ХТМЛ-верх, низ и еще куда вас не спасут.
Есть категория дизайнеров, которые мнят себя великими, однако допускают ламерские ошибки. Но вы, мой дорогой читатель, ведь не такой? Таких псевдодизайнеров легко вычислить по вот этому моменту, которого они не знают, и никогда не изменяют. Смешно смотреть, как на черном фоне ярко видна белая, или зеленая палочка, и в голове вертится только одно слово. Догадайтесь сами, какое.
Этот параметр меняет границу между ником пользователя и датой и временем отправки сообщения.
Что бы вы, мой уважаемый читатель, выглядели умным администратором, обязательно заменить вот тут одно значение:
/* 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
-------------------------------------------------------------*/
Находите вот этот момент. Видите его? Тут нужно вставить высоту вашего логотипа.
/* D1.2 */
#pun-title h1 {
display : block;
height : 105px;
padding: 2em 1em 0 1em;
}
Вот это значение - height : 105px; заменяете на значение высоты вашего лого.
#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 - обводка логотипа сверху. Цвет лучше брать либо с основной таблицы форума, либо выбирать основной цвет фона. Избегайте контрастных цветов.
#pun-title TD.title-logo-tdr {
border: none;
width: 468px;
}
Рекламный баннер, который скрывать нельзя. Тут я советую поступить как в Mybb_Cards. Вот кодик для такого перемещения баннера:
#pun-title TD.title-logo-tdr {
border: none;
width: 468px;
vertical-align: top;
padding-top: 2px;
position: absolute;
left: 31%;
top: 0;
}
На забудьте использовав этот кодик, вернутся назад и прописать вот тут:
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 90%;
}
Вот тут:
margin: 64px auto auto auto;
Высота баннера, что тут поделаешь, бесплатный форум.
В принципе, далее можно не трогать, особенно если вы незначительно переделываете форум. Если вы его переделываете значительно, то ищите вот эти моменты:
/* D3.1 */
#pun-navlinks {
border: 1px solid transparent;
margin: 0;
margin-bottom: 10px;
}
И вот тут: border: 1px solid #цвет; Ставите либо основной цвет границ вашего форума, либо параметр прозрачности.
Далее идете вот сюда:
/* D4.2 */
#pun-ulinks .container {
padding: 0.7em 1em;
text-align: center;
border: solid 1px transparent;
}
и делаете то же самое.
так вы поменяли обводку граф с ссылками навигации и пользовательскими ссылками.
Далее ничего не трогаете и сохраняете все изменения.
Разбор пункта Цвета style_cs.css вы увидите в следующем сообщении.
Автор: Ше-Рауф aka Инис Лландуин
Отредактировано Barbakiso4ka (2010-06-23 22:05:29)
