![[=Мир фотошопа и дизайна=]](https://forumupload.ru/uploads/0007/45/85/33878-3.gif)
Здравствуйте! Хочу вас предупредить, что урок пишу впервые, поэтому сильно не ругаемся, если понравилось ставим + и помните любое копирование этого урока запрещено, ибо я запрещаю это делать! Ну с приступим)
Лично я всегда начинаю не с структуры, а с цвета, то есть с Администрирование----Стиль-----Цвета style_cs.css. Значит давайте сначала разберем это второе окошко. Я лично, чтобы выбрать подходящий и цвет, внешние границы и т.д. все это делаю на генераторе: http://0pk.ru/generator/
Очень полезная программка и быстро и просто. Так вот, вы все пункты по своему вкусу выбираете, а дальше нажимаете "Сохранить стиль", у вас вылезает окошко с разными буковками и циферками, это все вы копируете в наше с вами второе окно, то есть цвета. Но перед тем как сохранять, на верху есть вопрос: "Хотите ли Вы использовать собственный стиль оформления?" вы нажимаете "Да" и "Сохранить". Пойдем дальше:
Теперь переходим к первому окошка, то биш к структуре. Именно здесь можно настроить ширину, выстоту шапки и самого форума. Да, на первый взгляд можно подумать, что это вообще не разбираемо, но мы с вами сейчас все очень хорошо разберем. Для начала найдите этот код:
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 890px;
position: relative;
}[
То, что я выделили красным это ширина форума в пикселях. Значения могут изначально быть разными. Так вот, вы можете экспериментировать и пробовать на ваш вкус, как вам нравится, узко и широко. Все? Закончили, тогда перейдем к самой шапке. Для новичков, говорю, что шапка это, то что находится в самом верху, то есть: 
то что красным выделано!
За это отвечает код:
/* D1 Logo and description
-------------------------------------------------------------*//* D1.1 */
#pun-title {
margin: 0;
margin-top: 0px;
border-style: double;
border: none;
margin-bottom: 0px;}
/* D1.2 */
#pun-title h1 {
display : block;
height: 480px;
margin-bottom: -1px;
}/* D1.3 */
#pun-title .container {
border-style: none ;
padding: 0.2em 1em 0.8em 1em;
}/* D1.4 */
#pun-title h1 span {
display: none;
}#pun-title TABLE {
border: none;
height: 480px;
width: 100%; margin-bottom: 0px; margin-top: 0px;
}#pun-title TD.title-logo-tdl {
border: none;
width: 100%; height: 350px;
}#pun-title TD.title-logo-tdr {
border: none;
width: 480px;
vertical-align: top;
padding-right: 10px;
padding-top: 2px;}
Все, что я выделила красным, это и есть высота шапки, также в пикселях. Спросите а где же ширина? То напоминаю, что ширину мы ставили, как для самого форума, так и для шапки одновременно. Ставите размеры, ориентируясь на саму шапку. Поставили, теперь переходим к самой шапке, для этого надо перейти в наше с вами второе окно, то есть цвета и поискать вот это:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-color: #000000;
color: #333333;
}
Поправка, значения, то есть цифры могут быть разными. Здесь ничего не трогаем, просто нажимаем два раз enter после самого кода и вставляем это:
#pun-title .title-logo{background: url(адрес шапки) no-repeat top center; padding: 0px;}
#pun-title table {
background: url() repeat-x;
background-position: 0px 1px;
}
Здесь, то что выделено красным собственно и есть куда вы должны вставить шапку, только не убирайте скобочки.
Теперь перейдем к заднему фону. Чтобы вставить фон надо перейти во второе окно опять же цвета и найти это:
/* CS1 Background and text colours
-------------------------------------------------------------*/
Это мы удаляем, а вставляем вот это:
html, body{
background: url(картинка);
}
Вот вам фон. Только там где красное, нужно вставить ссылку на картинку. НО вам может не понравится результата, есть еще масса способов вставки фона, кот например:
html, body {background-color: #ffffff; background-image: url(картинка); background-repeat: repeaty; background-attachment: fixed; background-position: center; color: black;}
BODY {background:fixed;}
Это фон с фиксированной картинкой
html, body {
background: url(картинка) repeat center #000700;
}
Это фон с картинкой повторяющийся только вниз от центра.
body {background: url(картинка) repeat;
}
Это повтор во все стороны
html {
background: url(картинка) #fff7e7 repeat-y left;
}
Фон слева и повтор вниз. Вот это пожалуй все. Советую создавать тестовик и там экспериментировать, а потом уже готовый дизайн переставлять на форум.
Пока все, но я вам еще дальше расскажу еще много интересного! Желаю удачи!
