Если Вы знакомы с основными элементами каскадных таблиц стилей CSS (англ. Cascading Style Sheets - каскадные таблицы стилей), здесь Вы можете переопределить стили отдельного элемента или классов элементов (например шрифты, цвета или отступы).

Спецификацию по языку CSS можно скачать на официальном сайте компании W3C, русский перевод доступен на странице http://www.dp76.com/Style/CSS/. Мы надеемся, что эта спецификация снабдит авторов средствами, необходимыми для создания эффективных, привлекательных и доступных документов без излишнего углубления в детали реализации CSS.

Сделайте необходимые Вам изменения в файле стиля, чтобы применить изменения нажмите кнопку "Сохранить". Чтобы отменить изменения нажмите кнопку "Отменить".

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

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

Основы языка CSS

Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым создаются таблицы стилей. Запомните, в CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.

Как видно из рисунка выше, сначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство. Более подробно о типах селекторов в CSS мы поговорим в 7 уроке, т.к. Вы уже будете знать базовые свойства CSS и с легкостью поймете меня.

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

Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой(см.рисунок) причем после последнего объявления точку с запятой можно не ставить.

Вот - типичное правило стиля для элемента:

P {
font-size: 12px;
font-family: verdana, helvetica, arial, sans-serif;
color: #333333;
margin: 2em;
}

В этом случае, P - селектор, выбирающий элемент, к которому вы хотите применить определенные стили. В фигурных скобках - свойства и значения. Свойство задано заранее. Например, первая строка означает, что я хочу определить свойство "font-size" (размер шрифта). Значение - это то, что назначено данному свойству: в нашем случае это - значение 12 пикселей.

Основные свойства селекторов в CSS

Форматирование

• font-family: тип шрифта
• font-size: размер шрифта
• font-weight: вес шрифта
• font-variant: капель
• text-transform: строчные -- заглавные
• font-style: стиль шрифта
• line-height: расстояние между строками
• text-decoration: оформление текста
• text-align: выравнивание текста
• letter-spacing: расстояние между буквами
• color: цвет шрифта
• text-indent: размер красной строки
• first-line: расстояние между словами
• first-letter: первая буква элемента

Оформление страницы и элементов

• background-color: цвет фона
• background-image: фоновая картинка
• background-repeat: расположение фона
• background-position: размещение фона
• horizontal position: расположение по оси х
• vertical position: расположение по оси у
• border: граница элемента

Позиционирование элементов

• width: ширина
• height: высота
• padding: внутренняя позиция блока
• margin: внешняя позиция блока

изменение цвета текста

Цвет текста в Форуме задается в селекторе body, html

Чтобы изменить цвет текста замените в блоке

body, html {
margin: 0;
padding: 0;
text-align: center; /* needed for IE center bug */
background: #ddd;
color: #8e1831;
} свойство color на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

изменение цвета ссылок

Цвет ссылок в Форуме задается в селекторе a

Чтобы изменить цвет ссылок замените в блоке

a {
text-decoration: none;
color: #8e1831;
}
свойство color на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Цвет ссылок при наведении задается в селекторе a:hover

Чтобы изменить цвет ссылок при наведении замените в блоке

a:hover {
text-decoration: none;
color: #8e1831;
}
свойство color на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

изменение размера ссылок

Размер ссылок задается в селекторе a

Чтобы изменить цвет ссылок добавьте в блок

a {
text-decoration: none;
color: #8e1831;
}
свойство font-size:

Например,

a {
text-decoration: none;
color: #8e1831;
font-size: 14px;
}

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для добавления "курсива" текста или ссылок добавьте
font-style: italic;
в соответствующий блок (селектор)

изменить фон по бокам Форума

Изменить серый фон по бокам Форума можно в селекторе body, html

body, html {
margin: 0;
padding: 0;
text-align: center; /* needed for IE center bug */
background: #ddd;
color: #8e1831;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить серый фон по бокам Форума не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

изменение ширины Форума

Ширина Форума задается в селекторе div#pageWrapper

Чтобы изменить ширину Форума замените в блоке

div#pageWrapper {
position: relative;
margin: 0px auto; /* sets margin from top of browser page to start of web page */
width: 90%;
background: #fff;
}
свойство width на свое значение ширины в процентах (width: 100%;) или в точках (width: 800px;)

изменение цвета фона Форума

Изменить фон посередине Форума можно добавив в конец CSS файла блок:

table#mainforum {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета фона в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон посередине Форума не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение цвета фона и текста строки авторизации Форума

Изменить цвет фона строки авторизации Форума можно добавив в конец CSS файла блок:

tr.tablehello td {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон строки авторизации Форума не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение цвета фона блока Рекомендованных товаров и Новинок

Изменить цвет фона блока Рекомендованных товаров и Новинок можно добавив в конец CSS файла блок:

tr.feature td {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон блока Рекомендованных товаров и Новинок не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение цвета фона и текста списка форумов и тем

Изменить цвет фона списка форумов и тем можно добавив в конец CSS файла блок:

td.show, td.forum_props {
background: #dddddd;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон списка форумов и тем не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение цвета внутренего фона Форума

Изменить цвет всего внутренего фона Форума можно добавив в конец CSS файла обєединенн?й блок:

table#mainforum, tr.tablehello td, tr.feature td, td.show, td.forum_props {
background: #dddddd;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить внутренний фон Форума не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

изменение цвета фона и текста светлых чередующихся полос при просмотре темы или списка тем

Изменить фон светлых чередующихся полос при просмотре темы или списка тем можно добавив в конец CSS файла блок:

.light {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон темных чередующихся полос при просмотре темы или списка тем не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение цвета фона темных чередующихся полос при просмотре темы или списка тем

Изменить фон светлых чередующихся полос при просмотре темы или списка тем можно добавив в конец CSS файла блок:

.dark {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон темных чередующихся полос при просмотре темы или списка тем не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

изменение фона темного цвета и текста заголовков

Изменить цвет фона темного цвета заголовков можно добавив в конец CSS файла блок:

td.td_header, tr.td_header td {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон темного цвета заголовков не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение фона и текста для групп форумов

Изменить цвет фона для групп форумов можно добавив в конец CSS файла блок:

td.group_name, tr.topjump td {
background: #dddddd;
font-size: 12px;
color: #цвет;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

Если Вы хотите заменить фон для групп форумов не на однотонный цвет, а на узор (фоновое изображение), то установите путь к фоновому изображению в свойство background-image
Например background-image: url("http://boxstr.com/thumbs/square/4262010_9igih/BS24025.jpg");

установите здесь свое значение цвета текста в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

Для эффекта "курсива" текста добавьте
font-style: italic;

изменение цвета и размера текста в верхнем меню

Чтобы изменить цвет и размер текста в верхнем меню добавьте в конец CSS файла блок

td#navBarTopLT a.headerNavigation {
font-size: 20px;
color: #цвет;
}

установите здесь свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный) свойство font-size: определяет размер шрифта

Для добавления "жирности" текста или ссылок добавьте
font-weight: bold;
в соответствующий блок (селектор)

изменение фонового изображения нижней разделительной линии

Чтобы изменить фоновое изображение нижней разделительной линии найдите в CSS файле селектор описания стиля нижней разделительной линии

td#navBarBottomLT {
background-color: #DDDDDD;
background-image: url(images/backgroundg.gif);
}

здесь вы можете заменить путь к фоновому изображению, например

background-image: url(http://demo.7910.org/templates/templ7910/images/backgroundg.gif);

Скачать руководство пользователя по работе с панелью управления интернет-магазином:
*.chm в формате Microsoft HTMLHelp (10.3Mb)	*.docx в формате Microsoft Word 2007 (19.1Mb)
*.doc в формате Word 97-2003 (22.2Mb)	*.pdf в формате Adobe Acrobat (15.2Mb)