Если Вы знакомы с основными элементами каскадных таблиц стилей 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");

изменение цвета текста в боксах по бокам

Цвет текста в боксах по бокам можно изменить, добавив в конец CSS файла:

.boxTextLT {
color: #цвет;
}

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

изменение размера шрифта текста в боксах по бокам

Цвет текста в боксах по бокам можно изменить, добавив в конец CSS файла:

.infoBoxLT td.boxTextLT {
font-size: 14px;
}

свойство font-size: определяет размер шрифта

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

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

.infoBoxHeadingLT2 div, .infoBoxHeadingLT2 div a {
color: #цвет;
}

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

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

Цвет ссылок в боксах по бокам можно изменить, добавив в конец CSS файла:

.boxTextLT a {
color: #цвет;
}

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

изменение ширины магазина

Ширина интернет-магазина задается в селекторе 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;)

изменение фона посередине интернет-магазина

Изменить фон посередине интернет-магазина можно в селекторе table#mainLayoutLT

table#mainLayoutLT {
margin: 0px auto;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #ffffff;
padding: 0;
}
замените свойство background на свое значение цвета в HEX представлении (#FFFFFF-белый, #000000 - черный)

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

изменение фона описания товара

Изменить фон описания товара в интернет-магазине можно добавив в конец CSS файла блок div.tabcontent

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

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

изменение ширины блока описания товара

Изменить ширину блока описания товара в интернет-магазине можно добавив в конец CSS файла блок div.tabcontent

div.tabcontent {
width: 50%;
background: #fff;
}
замените свойство width на свое значение ширины в процентах (width: 80%;) или в точках (width: 400px;)

изменение ширины боксов

Увеличить ширину всех левых боксов в интернет-магазине можно добавив в конец CSS файла блок:

#columnLeftLT table {
width: 500px;
}

замените свойство width на свое значение ширины в точках

Увеличить ширину всех правых боксов в интернет-магазине можно добавив в конец CSS файла блок:

#columnRightLT table {
width: 500px;
}

замените свойство width на свое значение ширины в точках

изменение ширины шапок боксов

Если в одном из боксов находится широкое неразрывное содержимое (большое изображение или длинное название раздела), то остальные боксы будут иметь меньшую ширину по сравнению с широким боксом:

Увеличить ширину шапок всех левых боксов в интернет-магазине можно добавив в конец CSS файла блок:

#columnLeftLT table.infoBoxLT td.infoBoxHeadingLT, table.infoBoxLT td.boxTextLT,
#columnLeftLT table.infoBoxLT td.infoBoxHeadingLT2 {
width: 380px;
}

замените свойство width на свое значение ширины в точках

Увеличить ширину шапок всех правых боксов в интернет-магазине можно добавив в конец CSS файла блок:

#columnRightLT table.infoBoxLT td.infoBoxHeadingLT, table.infoBoxLT td.boxTextLT,
#columnRightLT table.infoBoxLT td.infoBoxHeadingLT2 {
width: 380px;
}

замените свойство width на свое значение ширины в точках

изменение цвета и размера комментариев

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

.main em {
font-size: 12px;
color: #цвет;
}

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

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

Для отмены "курсива" текста добавьте
font-style: none;

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

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

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

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

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

изменение цвета и размера текста в меню "Разделы" (раскрывающиеся разделы)

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

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

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

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

изменение цвета и размера текста в меню "Разделы" (простые разделы)

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

#categoriesBoxLT, #categoriesBoxLT a {
font-size: 20px;
color: #цвет;
}

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

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

изменение цвета и размера ссылок в блоке "Информация"

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

table#informationBoxLT .boxTextLT a {
font-size: 14px;
color: #цвет;
}

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

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

Для отмены "курсива" текста добавьте
font-style: none;

изменение цвета и размера цены

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

добавьте в конец CSS файла блок

td#contentLT h2 {
font-size: 30px;
color: #цвет;
}

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

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

изменение цвета и размера списка подкатегорий

Чтобы изменить цвет и размер шрифта списка подкатегорий странице категории

добавьте в конец CSS файла блок

.categoryText a {
font-size: 30px;
color: #цвет;
}

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

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

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

Чтобы изменить фоновое изображение вкладок на странице описания товара войдите в панели управления: Настройки-> Установка счетчиков посещений и добавьте в нижнюю часть магазина такой код:

<style type="text/css">
#mainnavtabbed1 li a.tabon,#mainnavtabbed1 li a.tabon:hover {
background-image: url(путь к файлу);
white-space: nowrap;
}
</style>

Задайте в блоке background-image: правильный путь к фоновому изображению, например

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

изменение цвета и размера текста ссылки на форум в боксе форума

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

.forumboxtitle {
font-size: 20px !important;
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)