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

mozilla firefox — браузер
firebug — плагин для браузера
adobe photoshop, или любая другая программа, в которой можно выбирать цвета
текстовый редактор с поиском, например notepad++
собственный головной мозг

Прежде чем перейти к активным действиям немного теории

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



каждый блок обычно содержит какие-то буквы или картинки — собственно контент сайта.

обычно, у блоков есть правила, благодаря которым они выглядят так как нам нужно.
правила эти это не что иное как css
css можно задать тремя способами через style, id или class

Свойства style указывается непосредственно в блоке, их мы трогать не будем
для class или id в блоке указывается только идентификатор, название класса или айди, а свойства хранятся в отдельном css файле, вот его и будем менять

И таааак, погнали

1. устанавливаем firefox, устанавливаем firebug, устанавливаем photoshop, устанавливаем notepad++, устанавливаем brain

2. включаем мозг и начинаем активно думать, а что нам собственно надо. надо нам может быть всё что угодно, но я сейчас расскажу о нескольких самых основных вещах

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

а в правом верхнем такая

если не появилась, значит вы что-то делаете неправильно и я вам помочь не смогу

Пару слов о файрбаге. это очень-очень удобная утилита, которая помогает десяткам тысяч разработчиков в отладке сайтов. она позволяет на лету прикинуть, что и где надо поменять и куда что подвинуть, но это клиентский скрипт и на сам сайт он никакого влияния не оказывает. он просто показывает, что будет, если поменять «это» на «то». следовательно после нажатия ф5 все внесённые изменения пропадут.

при нажатии на нижнюю открывается панель файрбага
вот такая

обратите внимание на стрелочки. они показывают на самую важную для нас кнопку inspect
при нажатии на неё мы можем посмотреть свойства любого блока на странице, просто кликнув на него

при нажатии кнопки инспект можно возюкать мышкой по странице, и тот блок на который мы наводим курсор будет подсвечиваться
при этом в панеле файрбага снизу слева будет «бегать» «выделение», будут показывать код этого блока в ДОМе, а справа свойства блока т.е. все подключенные к нему стили. При клике на понравившемся блоке выделение бегать перестаёт и можно перейти к редактированию этого блока.

допустим нам нам надо изменить цвет и размер «логотипа», кликаем инспектом в него, как на скриншоте чуть выше
идём в правую часть файрбаговской панельки и внимательно смотрим на те свойства, которые применяются к этому блоку
впринципе, если вы хотя бы чуть-чуть знаете английский язык, то все строчки очень понятны
color:, font-family:, font-size:… цвет, тип шрифта, размер шрифта

мы тут решили что нам надо поменять размер шрифта и цвет
значит кликаем в значение цвета(color:#77D115;) и меняем его на любое другое например на желтенький #ffff00
потом кликаем в значение размеров шрифта(font-size:20px;) и меняем его скажем на 26px



можно добавить какой нибудь новый стиль, для этого кликаем по последнему значению свойств и нажимаем энтер
пишем название свойства, энтер, пишем значение свойства
можно добавить нижнюю границу border:1px solid #ff0000

посмотрели что получилось? нравится? теперь надо закрепить изменения в файлах

4. На предпоследнем скриншоте есть стрелочка с подписью «файл стилей» если нажать по этой ссылке правой мышкой можно узнать адрес, где лежит файл стилей… это примерно тут \%LSFOLDER%\templates\skin\%SKINNAME%\css\style.css
лезем на свой сайт через фтп, сфтп или просто открываем его папку, если он у вас на локалхосте, открываем основной файл стилей, ищем там название класса, в который мы вносили изменение на сайте через файрбаг, повторно вносим изменения. кстати, скорее всего порядок стилей будет немного другой, какие то стили будут отсуствовать, а какие то будут объединены, это связано с тем, что в файрбаг получает данные уже после загрузки страницы в браузере, а браузер подгоняет информацию «под себя», так что бы это больше соответствовало стандартам

в нашем случае нам надо найти "#header h1 a" и исправить color: и font-size: внутри {}
сохраняемся, закачиваем файл на сервер. вуаля.

5. бонусы

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

background: #rrggbb url(../images/image.gif) no-repeat|repeat-x|repeat-y LEFTpx TOPpx; фон — бэкграунд, может быть цветом и (или) картинкой. Если указана картинка, то ей можно выбрать положение и повторение. положение указывается или left|right|center и top|bottom|center или в пикселях. если не указано повторение, то картинка повторяется во все стороны, если не указаны координаты, то картинка в левом верхнем углу.

border: 1px solid|dotted|dashed|outset|inset #rrggbb; границы блока, толщина в пикселях, тип границы, цвет. есть отдельные теги для каждой границы border-left; border-right; border-top; border-bottom;

font-size: 12px; размер шрифта, например в пикселя

font-family:arial; тип шрифта, рекомендуется указывать только системные шрифты

text-decoration:underline|none; разное подчеркивание текста есть\нет

font-weight:normal|bold; толщина текста нормальна\жирная

margin: px px px px; внешний отступ блока. значения указываются в пикселях или используется значение auto. если указано одно значение применяется ко всем сторонам блока, если два, то первое к верхнему и нижнему, а второе к левому и правому. если 4, то как часы верхнее, правое, нижнее, левое.

padding: px px px px; внутренний отступ блока. принцип тот же. насколько внутренности блока будут отступать от его границы

6. вот в общем то и всё. отвечу на любые вопросы. сложные и интересные вопросы добавлю в топик. на тупак реагирую зло никак