Alexis Brendon
Как делишки?)
Флуд vol-1 аля ля открытие ролки
Сообщений 61 страница 90 из 113
Поделиться612011-01-10 22:18:27
Поделиться622011-01-11 01:17:01
Catherine Birs
всё замечательно,ты как?*)
Поделиться632011-01-11 20:24:03
Alexis Brendon
Прекрасно, хотя просто нормально)
Поделиться652011-01-25 15:17:26
Melrose McKenzie
Приветствуем тебя на нашем форуме)
очень рады пополнению)
Поделиться662011-01-25 18:32:20
Alexis Brendon
блин дизайн то со старой ролки,так ведь:?
Поделиться672011-01-26 14:54:16
Melrose McKenzieтак ,так,а ты откуда знаешь?
Поделиться682011-01-26 21:24:22
Alexis Brendon
ну так я знаю кто делал диз.кто делал он-лайн оф-лайн.
короче Дашка.я знаю всё:)
Поделиться692011-01-28 10:31:05
Melrose McKenzie
хахаха засранка ты моя))
я так и подумала,что это ты))
Поделиться702011-01-28 20:06:57
Всем привеТ!
Поделиться712011-01-28 20:09:42
Catherine Birs
привет солнце)))
как дела?)
Поделиться722011-01-28 20:22:27
Alexis Brendon
Приветик ляля моя)
Ну всё нормик)))) У тя как дела солнце моё???
Поделиться732011-01-28 20:40:15
Alexis Brendon
о да. меня узнают:))
Catherine Birs
Поделиться742011-01-28 21:02:02
Catherine Birs
у меня отлично))
Melrose McKenzie
тебя звезду не узнаешь))
Поделиться752011-01-28 21:23:56
Alexis Brendon
приятноо:)
Поделиться762011-01-28 22:01:25
как вам падающий снежок)))хД
не холодно...
хаах
Поделиться772011-01-28 22:32:36
здарсте.
Поделиться782011-01-29 14:04:39
Nikki Broke
привет)))
Поделиться792011-01-29 15:02:55
ты как мил?
Поделиться802011-01-29 16:23:03
Nikki Broke
Поделиться812011-01-29 18:05:00
Nikki Broke
нормально,ты как??держишься?)
Поделиться822011-01-29 18:07:04
Оля ля,всем внимания..Кхммм...решила попробовать сделать дизайн,но мне нужны картинки большого размера от 1200Х1500 и в этих пределах вообщем большие,может у кого на компе завалялись и вы бы их хотели видеть в дизайне и т.д..да и вообще высказывайтесь,что хотим?Чего нет??может идеи какие-нибудь??светлый?тёмный?мне интересно ваше мнение)
Поделиться832011-01-29 18:29:47
Оля ля,всем внимания..Кхммм...решила попробовать сделать дизайн,но мне нужны картинки большого размера от 1200Х1500 и в этих пределах вообщем большие,может у кого на компе завалялись и вы бы их хотели видеть в дизайне и т.д..да и вообще высказывайтесь,что хотим?Чего нет??может идеи какие-нибудь??светлый?тёмный?мне интересно ваше мнение)
это тебе для фона:?
Поделиться842011-01-29 18:41:45
Melrose McKenzie
да мне вообще для всего нужно,лучше когда большие размеры,да и для фона...я столько всего перепробовала...пфф.бошка уже трещит
Поделиться852011-01-29 18:52:58
Alexis Brendon
А может просто раскадировать на нужный размер:? я и со средними не плохо делала:)
Поделиться862011-01-29 19:15:23
Melrose McKenzie
мне кажется,расплывчато сильно бедет и не поставишь же одну картинкукстати ты как в кода,хорошо???просто нужен помошник,я хочу сделать слитный дизайн
Поделиться872011-01-29 19:22:08
Alexis Brendon
оо)
вот со слитным дизайном я вчера мучалась:)
мне кинули объяснение,и вот я пытаюсь его сделать:)
пока только графику сделала..)
ну в кодах...со слитным..)это так себе...)
мне кинули скелет..)
но я там немного кое чего не поняла:)
Поделиться882011-01-29 19:48:04
Melrose McKenzie
вот скорее всего склет мне и нужен
вообщем мне кинули так,тоесть сама
для этого надо сделать 2 картинки. 1 - большое целое лого, то есть фон, и вторая - часть лого, которая находится непосредственно над таблицей.
пример:
фон
логои вставляем это в самый верх кода:
body { background-color: #цвет вашего основного фона; background-image: url(картинка фона); background-position: top center; background-repeat: no-repeat; }
а это в самый низ, после картинок иконок:
#pun-title table {background-color: #цвет таблицы форума ; background-image : url(картинка логотипа); background-repeat : no-repeat; background-position: bottom center; height: высота вашего логотипа в px; }
Поделиться892011-01-29 19:50:24
и ещё на фёлинге было,но он у меня не открывается
Поделиться902011-01-29 19:55:03
Alexis Brendon
как замудренно блин.
щас я тебе кину че мне кидали.но там тоже муторно.))
Делаем свой дизайн
Пропишу все поэтапно
Приступим.
Для начала я расскажу, как делать прокручивающийся фон и как правильно вырезать, чтобы не было пробелов между фоном и шапкой.
Создаем новый файл в фотошопе размером для желаемого разрешения экрана.
Обычно я создаю для широкоформатных мониторов, поскольку так удобнее для всех.
И смотрится красивее. Иногда, зайдя на форум, видишь полу обрезки.
(1920х1080)
Заливаем файл тем цветом, который Вы сделать фоновым для своего форума.
Далее создаем еще один файл размера соответствующего ширине Вашего форума.
Файл->Создать-> Ширина 850 Высота 1080
Выделяем файл (ctrl+a) и копируем (ctrl+c) затем закрываем его и переходим на файл с размером 1920 на 800
уже с залитым фоном. Делаем масштаб (панель "навигатор") 33,33% (это для того чтобы объект был по центру)
Затем вставляем объект (ctrl+v), аналогично заливаем нужным цветом.
Специально создаем для шапки еще один новый файл. К примеру, высотой 500 пикселей и в ширину форума (мы выбрали 850).
Файл->Создать-> ширина 850 высота 500
Выделяем файл (ctrl+a) и копируем (ctrl+c), затем закрываем его и переходим на файл с размером 1920 на 800.
Делаем масштаб (панель "навигатор") 33,33% (это для того что бы объект был по центру).
Двигаем стрелочками вверх ^ что бы файл стал не просто по центру фона, а там где у нас обычно шапка (здесь повнимательнее чтобы не сдвинуть файл за пределы фона)
Далее делаем все, как Вам нужно. налаживаем на предыдущии слои фон, на шапку любой коллаж
подходящей для вас тематики.
Как сделать форум с закругленными углами?
Берем инструмент прямоугольник со скругленными углами.
Накладываем его чуть выше шапки, чтобы затем сохранить вместе с ней.
Естественно, увеличив масштаб. Вот, что должно получиться:
Белый слой шапки просто вспомогательный. Вы можете пока что убрать его видимость, нажав на глазик.
Как правильно вырезать шапку?
Включаем вспомогательный слой для шапки.
Выделяем файл, выключаем вспомогательный слой, переходим на слой где фон с шапкой совмещен, копируем, создаем новый файл, нажимаем ок и вставляем шапку. Сохраняем. Готово!
Перейдем к кодам html и css
Структура style.css
/************************************************************* A - SETUP **************************************************************/ /* A1 Import the colour scheme -------------------------------------------------------------*/ /* A1.1 */ @import url(style_cs.css); /* A2 Deal with browser defaults and wonkiness -------------------------------------------------------------*/ /* A2.1 */ html, body {margin: 0; padding: 0} /* A2.2 */ .punbb * { margin: 0 } /* A2.3 */ .punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt { padding: 0; list-style: none; } /* A2.4 */ .punbb img { border:none } /* A2.5 */ .punbb .main table { table-layout: fixed; width: 100%; } /* A2.6 */ .checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;} /* A2.7 */ p[class="checkfield"] *, div[class="checkfield"] *, fieldset[class="radiofield"] * { height: 1.7em; vertical-align: middle } /* A3 Text setup -------------------------------------------------------------*/ /* A3.1 */ body { font-size: 100%; } /* A3.2 */ .punbb { font: normal 68.70% verdana, arial, helvetica, sans-serif; } /* 3.3 */ .punbb textarea, .punbb input, .punbb select, .punbb optgroup { font: 1em verdana, arial, helvetica, sans-serif } /* A3.4 */ .punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th { font-size: 1em; font-weight: normal; } /* A3.5 */ .punbb h1 span, .punbb h2 span, .punbb legend span { font-size: 1.1em; } /* A3.6 */ .punbb pre { font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace } /* A3.7 */ .punbb address, .punbb em { font-style: normal } /* A3.8 */ .punbb .post-content em { font-style: italic } /* A3.9 */ .punbb .post-content em.bbuline { font-style: normal; text-decoration: underline; } /* A3.10 */ .punbb a { text-decoration: underline } /* A3.11 */ .punbb optgroup { font-weight: bold; } /* A4 Float clearing and hidden items -------------------------------------------------------------*/ /* A4.1 */ #pun:after, .punbb .container:after, .punbb .post-links ul:after, .punbb .main div.inline:after, .punbb .post-box:after, .punbb .linksb:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; overflow:hidden; line-height: 0.0; font-size: 0; } /* A4.2 */ .acchide, #pun-index #pun-main h1, #pun-navlinks h2, #pun-pagelinks h2, #pun-status h2, #pun-ulinks h2, .punbb .forum h2, .punbb .multipage .topic h2, .punbb dl.post-sig dt span, .punbb p.crumbs strong, .punbb .divider hr, .punbb .required label em, .punbb .formsubmit label, .punbb .submitfield label, .punbb .modmenu label, #pun-userlist .main h2 { font-size: 0; height: 0; width: 0; line-height: 0.0; position:absolute; left: -9999px; overflow: hidden } /* A5 Basic page layout and borders -------------------------------------------------------------*/ /* A5.1 */ #pun { margin: 0px auto auto auto; width : 852px; padding: 0px 0px 0px 0px; border: none; border-top: none; } /* A5.2 */ .punbb { float: left; width: 100%; height: auto; } /* A5.3 */ #pun-redirect, #pun-maint { margin: 50px 20% 12px 20%; width: auto; float: none; } /* A5.4 */ .punbb .section, .punbb .main { margin-bottom: 1em; } /* A5.5 */ .punbb .category, .punbb .post { margin-top: 0.4em; } /* A5.6 */ .punbb #pun-category1, .punbb .toppost, .punbb .topicpost { margin-top: 0; } /* 5.7 */ #pun-post .topic { margin-top: 1em; } /* A5.8 */ .punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post { border-style: none none none none; border-width: 0px 0px 0px 0px } /* A5.9 */ .punbb .container { border-style: none; border-width: 0; } /* A5.10 */ #pun-main h1, .punbb .section h2, #pun-stats h2, #pun-debug h2 { padding: 10px 1em 10px 1em; border-style: none none none none; border-width: 0 0 0 0; } #pun-main h2 { padding-bottom: 12px; font-weight: bold; color: #adadad; text-align: center; font-size: 12px; font-family: Times New Roman; height : 12px;} /************************************************************* B - MAIN CONTENT - GENERAL **************************************************************/ /* B1 Parsed Content, Signatures and Scroll Boxes -------------------------------------------------------------*/ /* B1.1 */ .punbb .post-content { padding: 0; margin: 0; width: 100%; overflow: hidden; } /* B1.2 */ .punbb .post-sig dt { display: block; border-top: 0px none #adadad; width: 250px; margin: 5px 0; } /* B1.3 */ .punbb .post-content p { margin: 0; padding: 0 0 1em 0; line-height: 150%; } /* B1.4 */ .punbb .post-content img { vertical-align: text-bottom } /* B1.5 */ .punbb .post-content img.postimg { vertical-align: middle; } /* B1.6 */ .punbb .post-content .blockcode, .punbb .post-content blockquote { width: 100%; overflow: hidden; } /* B1.7 */ .punbb .post-content .scrollbox { width: 100%; overflow: auto; } /* B1.8 */ .punbb .post-content .quote-box, .punbb .post-content .code-box { margin: 0.4em 1.8em 1.4em 1.8em; padding: 1em; border-style: none; border-width: 0px; } /* B1.9 */ .punbb .quote-box cite, .punbb .code-box strong.legend { display: block; padding-bottom: 0.7em; font-size: 1.1em; font-weight: bold; font-style: normal; margin: 0; } /* B2 Information boxes -------------------------------------------------------------*/ /* B2.1 */ .punbb .info-box { padding: 1.1em 1.7em 1em 1.7em; border-style: none; border-width: 0px; margin: 0 0 1.1em 0; } /* B2.2 */ .punbb .info-box * { padding: 0 0 0.7em 0; } /* B2.3 */ .punbb #pun-main .info-box .legend { font-size: 1.1em; font-weight: bold; } /* B3 Pagination and posting links -------------------------------------------------------------*/ /* B3.1 */ .punbb .linkst { float: left; position: relative; width: 100%; font-size: 1.1em; height: 0; } /* B3.2 */ .multipage { margin-top: 3em; } /* B3.3 */ .linkst .pagelink { position: absolute; top: -4em; left: 1em; width: 24em; } /* B3.4 */ .linkst .postlink { position: absolute; top: -4em; right: 1em; width: 16em; text-align: right; font-weight: bold; } /* B3.5 */ .punbb .linksb { text-align: right; padding: 0.4em 1em 0.5em 1em; font-size: 1.1em; } /* B3.6 */ .linksb .pagelink { float: left; width: 24em; text-align: left; } /* B3.7 */ .linksb .postlink { float: right; width: 16em; font-weight: bold } /* B3.8 */ .subscribelink { clear:both; padding-top: 0.3em; padding-bottom: 0.5em; } /************************************************************* C - MAIN CONTENT - SPECIFIC **************************************************************/ /* C1 Form layout -------------------------------------------------------------*/ /* C1.1 */ .punbb .formal .container { padding: 1.7em 2.3em 1.1em 2.3em; } /* C1.2 */ .punbb .formsubmit { padding: 0 0 0 1.7em; margin: 1em 0 0 0; } /* C1.3 */ .punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span { margin: 0 0.6em 0 0 } /* C1.4 */ .punbb fieldset { border-style: none; border-width: 0px; padding: 0 18px 0 18px; margin: 0 0 1em 0 } /* C1.5 */ .punbb fieldset legend { padding: 0; margin: 0 0 0 11px; font-size: 1.1em } /* C1.6 */ .punbb fieldset legend span { padding: 0 5px; margin: 0 0 0 -15px; } /* C1.7 */ .punbb fieldset fieldset { border-style: none; margin: 0; padding: 0 0 8px 0 } /* C1.8 */ .punbb .fs-box { padding: 1em 0 0.8em 0; } /* C1.9 */ .punbb .fs-box p, .punbb .fs-box fieldset { padding: 0 0 0.8em 0 } /* C1.10 */ .punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield { float: left; margin-right: 1em; } /* C1.11 */ .punbb .inline .infofield { clear:both } /* C1.12 */ .punbb .datafield br { display: none } /* C1.13 */ .punbb .required label, .punbb .datafield span.input { font-weight: bold } /* C1.14 */ .punbb .datafield span.input a { font-weight: normal; } /* C1.15 */ .punbb .areafield span.input, .punbb p.longinput span.input { display: block; padding: 0 12em 0 0; height: 100%; /* For IE */ } /* C1.16 */ .punbb textarea, .punbb .longinput input { width: 64%; margin: 0; } /* C1.17 */ .punbb .hashelp { position: relative; } /* C1.18 */ .punbb .helplinks { display: block; position: absolute; top: 1em; right: 0; font-weight: normal; width: 36%; } /* c1.19 */ .punbb #profile .helplinks { top: 1.5em; } /* C1.20 */ .punbb .helplinks span { display: block; padding-bottom: 0.2em; } /* C1.21 */ #pun-post .formal .info-box li { padding-left: 4px; list-style-type: square; list-style-position: inside; line-height: 1.5; margin: 0; } /* C2 Table layout -------------------------------------------------------------*/ /* C2.1 */ .punbb .main .tcl { overflow: hidden; text-align: right; width: 50%; padding-right: 1px; } /* C2.2 */ .punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod { text-align: center; width: 10%; } /* C2.3 */ .punbb .main .tcr { overflow: hidden; text-align: left; width: 30%; } /* C2.4 */ #pun-userlist .main .tcl, #pun-searchtopics .main .tcl, #pun-modviewforum .main .tcl { width: 40% } /* C2.5 */ #pun-userlist .main .tc2, #pun-searchtopics .main .tc2 { text-align: left; width: 20%; } /* C2.6 */ #pun-debug table .tcl { width: 15%; white-space:normal; } /* C2.7 */ #pun-debug .tcr { width: 90%; white-space: normal; } /* C2.8 */ #pun-index .tcl h3 { font-size: 1.2em; font-weight: bold; } /* C2.9 */ .punbb td span.youposted { font-weight: bold; margin-left: -1em; position: absolute; } /* C2.10 */ .punbb td .modlist { display: block; padding-top: 0.3em } /* C2.11 */ .punbb .main td { border-style: none none none none; border-width: 0px 0 0 0px; padding: 0.8em 1em; } /* C2.12 */ .punbb .main th { border-style: none none none none; border-width: 0 0 0 0px; padding: 0.4em 1em 0.4em 1em; } /* C2.13 */ .punbb .main .tcl { border-left-style: none; border-left-width: 0 } * html .tclcon {height: 1px} /* C2.14 */ .punbb td div.tclcon { margin-right:20px; } /* C2.15 */ .punbb div.icon { float: right; display: block; width: 70px; height: 70px; margin-left: 25px;} /* C3 Topics -------------------------------------------------------------*/ /* C3.1 */ .punbb .post .container { border-style: none none none none; border-width: 0px; margin-top: -1px; padding-bottom: 1px; } /* C3.2 */ .punbb .post h3 { border-style: none none none none; border-width: 0px; } /* C3.3 */ .punbb .post h3 span { padding: 0.5em 1em; display: block; margin-left: 19em; border-left-style: none; border-left-width: 0px } /* C3.4 */ .punbb .post h3 strong { float: right; width: 5em; text-align: right; font-weight: normal; padding-right: 30 px; } /* C3.5 */ .punbb .post .post-author { float: left; width: 19em; margin-top: -1.5em; overflow: hidden; } /* C3.6 */ .punbb .post .post-author ul, .punbb .post .post-author p { padding: 0 1em 1em 1em; line-height: 140%; text-align: right; } /* C3.7 */ .pa-author { font-size: 1.1em; font-weight: bold; } /* C3.8 */ .pa-author a { text-decoration: none } /* C3.9 */ li.pa-title { padding-bottom: 0.4em; font-weight: bold; } li.pa-online { line-height: 0.8em; border-left-style: solid; border-left-width: 0.7em; padding-left: 0.4em; margin-top: 0.7em; } /* C3.11 */ .punbb .post-body { margin-left: 19em; border-left-style: none; border-left-width: 0px; padding: 0 0 1px 0; padding-right: 20px; } /* C3.12 */ .punbb .post-box { padding: 1em; } /*C3.13 */ .punbb fieldset .post-box { margin-bottom: 0.8em } /* C3.14 */ .punbb .post-links { margin-left: 19em; border-left-style: solid; border-left-width: 1px; } /* C3.15 */ .punbb .post-links ul { padding: 0 1em 0 0; height: 2em; line-height: 2em; margin-left: -19em; border-top-style: none; border-top-width: 0px; background: transparent; text-align: right; } /* C3.16 */ .punbb .post-links li { display: inline; padding-left: 1em; } /* C3.17 */ .pl-email, .pl-website { float: left; } /* C3.18 */ .punbb .clearer { clear: both; height: 0; font-size: 0; } /* C4 Moderator menu -------------------------------------------------------------*/ /* C4.1 */ .punbb .modmenu .container { padding: 0.5em 1em; text-align: right; } /* C4.2 */ .punbb .modmenu strong, .punbb .modmenu a { height: 1.8em; line-height: 1.8em; } /* C4.3 */ .punbb .modmenu .container strong { float: left; } /* C4.4 */ .punbb .modmenu input { margin-left: 1em; } /* C5 Message boxes -------------------------------------------------------------*/ /* C5.1 */ .punbb .info .container { padding: 0.8em 1em } /* C5.2 */ .punbb .info .container .backlink { padding-top: 0.8em; } /* C6 Profile -------------------------------------------------------------*/ /* C6.1 */ #profile .container { padding-left: 18.6em; } /* C6.2 */ #profilenav { float: left; width: 14em; margin-left: -16.3em; display: inline; } /* C6.3 */ #profilenav li { padding-bottom: 0.8em; font-weight: bold; } /* C6.4 */ #viewprofile ul, #profilenav ul { border-style: solid; border-width: 1px; padding: 1.5em 18px 0.8em 18px; margin: 0 0 1em 0; } /* C6.5 */ #viewprofile h2, #profilenav h2 { background: transparent; border: none; padding: 0 0 0 0; margin: 0 14px -0.6em 14px; } /* C6.6 */ #viewprofile h2 span, #profilenav h2 span { padding: 0 5px; position: relative; } /* C6.7 */ #viewprofile li, #setmods dl { padding: 0 0 0 16em; margin-bottom: 0.2em; } /* C6.8 */ #viewprofile li span { float: left; width: 14em; margin-left: -16em; padding: 0.5em 1em; font-weight: bold; } /*C6.9 */ #setmods dt { float: left; width: 14em; margin-left: -16em; padding: 0.8em 1em; font-weight: bold; display: inline; } /* C6.10 */ #viewprofile li strong, #viewprofile li div, #setmods dd { display: block; padding: 0.5em 1em; font-weight: normal; } /* C6.11 */ .punbb img.avatardemo { float: right; margin: 0 0 0.8em 1.8em } /* C7 User list -------------------------------------------------------------*/ /* C7.1 */ #pun-userlist .formal, #pun-userlist .formal .container { border-bottom: none; margin-bottom: 0; } /* C7.2 */ #pun-userlist .usertable .container { padding: 0 2.3em 2.3em 2.3em; border-top: none; } /* C7.3 */ #pun-userlist .usertable table { border-style: solid; border-width: 1px; } /************************************************************* D - PUNBB SECTIONS OTHER THAN MAIN CONTENT **************************************************************/ /* D1 Logo and description -------------------------------------------------------------*/ /* D1.1 */ #pun-title { margin: 0; border-style: none none none none; border-width: 0px 0px 0 0px; } /* D1.2 */ #pun-title h1 { display : block; height : 40px; padding: 2em 1em 0 1em; } /* D1.3 */ #pun-title .container { border-style: none none none none; } /* D1.4 */ #pun-title h1 span { font-size: 1.5em; } #pun-title table { border: none; height: 514px; width: 100%; } #pun-title td.title-logo-tdl { border: none; width: 100%; } #pun-title td.title-logo-tdr { border: none; width: 514px; position: relative; left: 100px; top: 20; } /* D2 Page navigation -------------------------------------------------------------*/ /* D2.1 */ #pun-pagelinks { position: absolute; top: -15px; left: 0; margin: 0; border: none; padding: 0; width: 100%; } /* D2.2 */ #pun-pagelinks .container { background: transparent; border: none; padding: 0} /* D2.3 */ #pun-pagelinks .container li { display: inline } /* D2.4 */ #pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover { height: 2em; line-height: 2em; padding: 0; font-size: 1.2em; margin-left: -9999px; display: block; float:left; width: 100%; } /* D2.5 */ #pun-pagelinks a:active, #pun-pagelinks a:focus { position:relative; margin: 0; } #pun-pagelinks li a span { display:block; margin: 0 1em } /* D3 Forum navigation -------------------------------------------------------------*/ /* D3.1 */ #pun-navlinks, #pun-navlinks .container { border-style: none; border-width: 0; margin: 0; text-align: center; } /* D3.2 */ #pun-navlinks .container { font-weight: bold; text-align: center; font-size: 13px; font-family: arial; background-color: transparent; color: #adadad; background-repeat: no-repeat; background-position: center; height : 35px;} /* D.3 */ #pun-navlinks li { display: inline; padding-right: 1em; } /* D3.4 */ #pun-navlinks li a { font-size: 1.1em; } /* D4 User links -------------------------------------------------------------*/ /* D4.1 */ #pun-ulinks { margin-top: 0; text-align: center; } /* D4.2 */ #pun-ulinks .container { border-top: none; padding: 0.7em 1em; } /* D4.3 */ #pun-ulinks li, #pun-ulinks li a { display: inline; border-left-style: solid; border-left-width: 1px; white-space: nowrap; } /* D4.4 */ #pun-ulinks li a { padding: 0 0.3em 0 0.6em } /* D4.5 */ #pun-ulinks li.item1, #pun-ulinks li.item1 a { border-left-style: none; border-left-width: 0; padding-left: 0 } /* D5 Welcome box and Top Breadcrumbs -------------------------------------------------------------*/ /* D5.1 */ #pun-status, #pun-status .container { border-bottom: none; margin-bottom: 0; width: 890px; } /* D5.2 */ #pun-status .container { padding: 0.8em 1em 1em 1em; width: 890px; } /* D5.3 */ #pun-status span { white-space: nowrap; margin-right: 0.5em; } /* D5.4 */ #pun-crumbs1 { font-weight: bold; overflow: hidden; margin-top: 0; } /* D5.5 */ #pun-crumbs1 p.container { border-top: none; padding: 1em 1em 0.8em 1em; font-size: 1.1em; margin-right: 35px; } /* D5.6 */ #pun-break1 { margin: 0 1em; border-style: solid none; border-width: 1px 0; height: 0; margin: -2px 1em; position: relative; z-index: 1; } /* D6 Announcement -------------------------------------------------------------*/ /* D6.1 */ #pun-announcement h2 { padding: 0; margin: 0 1em -3.5em 1em; border-style: none none solid none; border-width: 0 0 1px 0; position: relative; font-weight: bold; } /* D6.2 */ #pun-announcement h2 span { display: block; padding: 1em 0 0.8em 0; border-bottom-style: solid; border-bottom-width: 1px; } /* D6.3 */ #pun-announcement .container { padding: 4.3em 1em 1em 1em; } /* D7 Statistics -------------------------------------------------------------*/ /* D7.1 */ #pun-stats .container { padding: 0.8em 1em } /* D7.2 */ #pun-stats li.item1, #pun-stats li.item2 { float: left; clear: both; line-height: 150%; } /* D7.3 */ #pun-stats li.item3, #pun-stats li.item4 { text-align: right; line-height: 150%; } /* D7.4 */ li#onlinelist { margin-top: 1em; border-top-style: solid; border-top-width: 1px; float: left; width: 100%; line-height: 130%; } /* D7.5 */ li#onlinelist div { border-top-style: solid; border-top-width: 1px; padding: 0.7em 0 0 0; } /* D8 Quick Jump - About - Bottom Breadcrumbs -------------------------------------------------------------*/ /* D8.1 */ #pun-qjump { margin: 0; border: none; width: 50%; position: relative; float: left; } /* D8.2 */ #pun-qjump .container { border: none; background: transparent; padding: 0.8em 1em; } /* D8.3 */ #pun-about { margin-top: 0; } /* D8.4 */ #pun-about .container { border-top-style: none; text-align: right; line-height: 150%; padding: 0.8em 1em; } /* D8.5 */ #pun-about p span { display:block; padding-left: 50%; } /* D8.6 */ #pun-crumbs2 { font-weight: bold; overflow: hidden; margin-bottom: 0; border-bottom: none; } /* D8.7 */ #pun-crumbs2 .container { border-bottom: none; padding: 0.8em 1em; font-size: 1.1em; } /* D8.8 */ #pun-break4 { margin: -2px 1em; border-style: solid none; border-width: 1px 0; position: relative; height: 0; z-index: 1; } /* D8.9 */ div.punbb-admin #pun-about .container { border-top-style: solid; border-top-width: 1px; } /* D9 Help file -------------------------------------------------------------*/ /* D9.1 */ #pun-help .formal .info-box h3.legend { border-bottom-style: none; border-bottom-width: 0px; padding-bottom: 0; margin-bottom: 0.8em; } /* D9.2 */ #pun-help .formal .info-box h3.legend span { padding-bottom: 0.6em; display: block; border-bottom-style: none; border-bottom-width: 0px; font-size: 1.1em; } /* D9.3 */ #pun-help .formal p, #pun-help .formal dd { margin-bottom: 1em } /* D9.4 */ #pun-help .formal ul, #pun-help .formal dl { padding: 0 0 0 1em } /* D9.5 */ #pun-help .formal li { padding: 0; line-height: 130% } /* D9.6 */ #pun-help .formal li * { vertical-align: text-top } /* D9.7 */ #pun-help .formal dt span { font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace } /* D9.8 */ #pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode { padding-bottom: 0; }
/* A5 Basic page layout and borders
-------------------------------------------------------------*/
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 848px;
padding: 0px 0px 0px 0px;
border: none;
border-top: none;
}
Находим в структуре этот код и значение 848px меняем на значение, соответствующее ширине Вашего форума.
Примечание: 850 пикселей, прописываем 848. Чтобы дизайн ваш не заходил за пределы форума.
У фш и форума немного разные понятия о пикселях х)))
далее Цвета style_cs.css
/* CS1 Background and text colours ------------------------------------------------------------- */ #pun-title TABLE { background : transparent url(http://savepic.ru/1926464.png) no-repeat left top; margin-left : 0px; } body {background-color: #ad3a32; background-image : url("http://savepic.ru/1930560.png"); background-repeat: no-repeat; background-position : top center; } #pun { background-image : url(""); background-color: #beb9a7; background-position : center; background-attachment : fixed; } /* CS1.2 */ .punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer { background-color: transparent; color: #8e8e8e; } /* CS1.3 */ #pun-stats h2,.punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, #pun-stats .statscon, li#onlinelist, li#onlinelist div { background-color: transparent; color: #8e8e8e; font-weight: bold; font-style: normal; } /* CS1.4 */ #pun-title, #pun-title .container, .punbb .modmenu .container { background-color: transparent; color: #8e8e8e; } /* CS1.5 */ .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span { background-color: transparent; color: #8e8e8e; } /* CS1.6 */ .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl { background-color: transparent; color: #8e8e8e; } /* CS1.7 */ .punbb .quote-box, .punbb .code-box { background-color: #8e8e8e; color: #8e8e8e; } /* CS1.8 */ #pun-navlinks .container, #pun-ulinks .container { background-color: transparent; color: #8e8e8e; text-align: center; } .offline li.pa-online strong { color: #8e8e8e; font-weight: normal } .punbb textarea, .punbb select, .punbb input { background-color: #1a2537; color: #8e8e8e; } /* CS2 Border colours -------------------------------------------------------------*/ /* CS2.1 */ .punbb .container, .punbb .post-body, .post h3, #pun-title { border-color: transparent; } /* CS2.2 */ .punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post { border-color: transparent; } /* CS2.3 */ #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 { border-color: transparent; } /* CS1.3 */ #pun-stats h2 .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin{ color: transparent; } /* 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:transparent; } /* CS2.5 */ .punbb th { border-color: transparent; } /* CS2.6 */ .punbb .quote-box, .punbb .code-box { border-color: #1a2537; } #pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span { border-color: transparent; } #pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend { border-color: transparent; } .punbb .divider { border-color: transparent; } .punbb .formal fieldset .post-box, .punbb .info-box { border: 1px solid #dedfdf } li.pa-online { border-left-color: transparent; } .punbb .post-sig dt { border-top-color: transparent !important; } /* 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: #8e8e8e; border-bottom: 0px none #8e8e8e; text-decoration: none; } .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited { color: #8e8e8e; } /* 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: #8e8e8e; border-bottom: 0px none #8e8e8e; text-decoration: none; } /* CS3.3 */ #pun-navlinks a { color: #8e8e8e; border-bottom: 0px none #8e8e8e; text-decoration: none; } /* CS3.4 */ #pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active { color: #8e8e8e; font-weight: normal; font-style: normal; border-bottom: 0px none #8e8e8e; text-decoration: none; } #pun-pagelinks a:active, #pun-pagelinks a:focus { background-color: #8e8e8e; color: #8e8e8e; } /* CS4 Post status icons -------------------------------------------------------------*/
/* CS1 Background and text colours
-------------------------------------------------------------
*/
#pun-title TABLE {
background : transparent url(ссылка на картинку шапки,лого) no-repeat left top;
margin-left : 0px;
}
body {background-color: #цвет заднего фона;
background-image : url("http://xmages.net/storage/10/1/0/1/6/upload/e557e6da.jpg");
background-repeat: no-repeat;
background-position : top center;
}
#pun {
background-image : url("");
background-color: #цвет самого форума(внутренность );
background-position : center;
background-attachment : fixed;
}
***
CS1.7
.punbb textarea, .punbb select, .punbb input {
background-color: #цвет самого форума(внутренность ) ;
***
Остальные цифры цветов, что есть во второй структуре цвета ксс, прописываем на те, каким бы мы хотели видеть цвет текста на всем форуме.
+
Дополнения в хтмл
вверх:
<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 400px; top: 440px
}
</style><style>
#pun-title .title-logo {
display : none;
}
</style>
сдвигаем рекламу с шапки,убираем название форума с шапки на главной странице
<style>
#pun-main .code-box, #pun-main .quote-box, #pun-main .hide-box {
background: url(ссылка на изображение в цитату и форму ответа);
}
</style><style>
.punbb .post-sig dt {
background:url(http://xmages.net/upload/200dc293.jpg);
height: 1px;width: 800px; border: none;
}
</style><style type="text/css">#pun .tc2 {
text-align: center;
}
</style><style type="text/css"> #pun-main h2 {
text-align: center;
}
</style><style type="text/css">
#pun-ulinks .container {
text-align: center;
}
</style><style type="text/css">
#pun-navlinks .container {
text-align: center;
}
</style><style type="text/css">
#pun-main .post-author ul {text-align: center;}
</style><style type="text/css">
.punbb table Div.icon {float: right; display: block; width: 60px; height: 60px; border-style: none;
background-image: url("http://xmages.net/storage/10/1/0/f/b/upload/602aaec6.png");
background-repeat: no-repeat;
position: relative; margin-right: 10px;}
TR.inew Div.icon {
background: url("http://xmages.net/storage/10/1/0/f/b/upload/8bf86a69.png") no-repeat;}
TR.isticky Div.icon {
background: url("http://xmages.net/storage/10/1/0/f/b/upload/ac0300a3.png") no-repeat;}
TR.iclosed Div.icon {
background: url("http://xmages.net/storage/10/1/0/f/b/upload/91c791f7.png") no-repeat;}
</style><style>
#pun-stats ul.container {
background: transparent url(http://xmages.net/storage/10/1/0/f/2/up … f1da3c.png) no-repeat 17px 12px;
padding-left:87px;
}
</style>
Скрипт на изображение в цитату и форму ответа, скрипт отделяющий сообщение от подписи картинкой,
весь форум по центру, а так же скрипт на иконки (закрытое,открытое,старое,важное,24).