Итак, начнем:
Ошибки в словах исправляйте сами, визуально! Текст длинный, за клавишами не успеваю!

Урок №1 - Фон и фоновая картинка:

Для того чтобы изменить фон сайта открываем папку css и в ней ищем файл style.css нажимаем вверху: Файл-Сохранить как... В строке имени пишите style1.css и сохраняйте рядом! Это мы сделаи резервную копию чтобы все вернуть в случае чего. Закрываем то что получилось и работаем с оригиналом : style.css

В нем находим фот такой текст:

body {
background: #ffffff;
color: #000000;
margin: 0;
padding: 0;
font: 14px/1em Arial,Tahoma,Impact,sans-serif;
}

Красным цветом выделена строка отвечающая за фон сайта
#ffffff - это 16-ричный код цвета в системе RGB(сея цвет есть белый)
Чтобы вместо просто цвета поставить картинку удаляем код цвета и лепим туда код картинки:

url(../images/bg.gif) - данная запись означает что ваша фоновая картинка находится в папке images имеет азвание bg и gif-формат

А теперь в полной сборке:

[b]body { 
background: url(../images/bg.gif); 
color: #000000; 
margin: 0; 
padding: 0; 
font: 14px/1em Arial,Tahoma,Impact,sans-serif; 
}[/b]

Урок №2 - Фон блоков:
Скрин:

Он синий, для кого то неприятен, сейчас раскажу как изменить и его и текст и как сделать так чтобы не исчезала оконтовка!

Значит так, все тот же файл style.css все в той же папке css
Листаем его пока не найдем такие вот строки:

fieldset {
background: url(../images/bg2.gif) repeat-x scroll 0% 0%;
border: 2px solid #ccc;
line-height: 1.4em;
padding: 5px;
margin: 0 0 15px 2px;
}

#fieldheader {
font-size:15px;
font-weight:bold;
color:#FFF;
}

Для тех, у кого нумеруются строки то не мучайтесь, а двигайте к 240вой!
А у кого не нумеруются, скачайте notepad2 к примеру тут

2.1 Шапка блока

Так вот, начнем с класса fieldset, он отвечает за оображение блоков скопирую еще раз что бы было понятно:

fieldset {
background: url(../images/bg2.gif) repeat-x scroll 0% 0%;
border: 2px solid #ccc;
line-height: 1.4em;
padding: 5px;
margin: 0 0 15px 2px;
}

Из предыдущего урока вы уже должны знать где находится строка, отвечающая за картинку, выделил красным. Так вот, находим ее запоминаем размеры
Совет: оптимальный размер для такой картинки 1х40(ширинаХвысота)

Переделываем ее на свой вкус и стиль, заменяем на то что было на буксе! если получится плохо, повторяйте операцию хоть до бесконечности

Далее, зеленым выделена строка отвечающая за границы
Правила записи: border:2px solid #cccccc; - расшифровую:
Граница:
2px - ширина 2 пикселя
solid -  тип линии тонкая, одинарная,
#cccccc - цвет серый

Слово solid не трогайте а то наделаете боков, а вот c цифрой 2 можно поэкспериментировать и цвет рамки тоже можно поменять!

И еще 1 нюанс, воможно вы замечали что на буксах пропадают линии на этих вот полях! Это результат полурезинового дизайна(на дивах)

Этого можно избежать добавив в фон помимо картинки код цвета: вернусь позже, когда будет полная версия

2.2 Заголовки блоков

За нах у нас отвечает класс, следующий ниже:

#fieldheader {
font-size:15px;  /* Размер текста*/
font-weight:bold; /* жирность текста(поменяйте на цифры лимиты (100-900)*/
color:#FFF; /*Цвет текста*/
}

Вот и все
Как оно должно выглядеть:

fieldset { 
background: #ffffff url(../images/bg2.gif) repeat-x scroll 0% 0%; 
border: 2px solid #ccc; 
line-height: 1.4em; 
padding: 5px; 
margin: 0 0 15px 2px; 
} 

#fieldheader { 
font-size:15px; 
font-weight:700; 
color:#FFF; 
}

---------------------------------------\\\--------------------------------------------------------

Не забывайте что помимо картинки, на сревере нужно обновит и файл style.css

P.S.
За дополнительной информацией отправляйтесь в мир Google, Яндекс послабее будет, а вот гугл в этом решении самый раз!
Букс - такой же скрипт как и все остальные, для него не придумывали отдельные языки!
Администрация уже нервничает по этим вопросам, вот я и решил немного показать практических оешений

Отредактировано artemmian (2010-04-28 21:24:35)