10.08.2015

Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

На этой странице собраны основные CSS-коды, которые необходимо использовать при изменении дизайна сайта на ОКИС.РУ (OKIS.RU).

• Меню

Меняет оформление основного меню

.art-vmenublockcontent-body ul.art-vmenu li a span.t {
font-size: размер_текста_менюpx;
color:#цвет_текста_меню;
margin-top: отступ_меню_сверхуpx;
background: #цвет_фона_меню;
border: 1px solid #цвет_границы_меню;
}

Меняет оформление основного меню, при наведении на него курсора мышки

.art-vmenublockcontent-body ul.art-vmenu li a:hover span.t {…}

Меняет оформление активного меню

.art-vmenublockcontent-body ul.art-vmenu li a.active span.t {…}

• Подменю

Меняет оформление подменю

.art-vmenublockcontent-body ul.art-vmenu li ul li a {
font-size: размер_текста_подменюpx;
color:#цвет_текста_подменю;
margin-top: отступ_подменю_сверхуpx;
background: #цвет_фона_подменю;
border: 1px solid #цвет_границы_подменю;
}

Меняет подменю, при наведении на него курсора мышки

.art-vmenublockcontent-body ul.art-vmenu li ul li a:hover {…}

Меняет активное подменю

.art-vmenublockcontent-body ul.art-vmenu li ul li a.active {…}

• Шапка

Меняет шапку

div.art-header-jpeg {background: url(адрес_ссылки_на_шапку);}

Меняет контур шапки, если он есть в Вашем шаблоне

div.art-header-png {background: url(адрес_ссылки_на_контур_шапки);}

• Низ сайта

Меняет низ сайта

.art-footer .art-footer-background {
background: url(адрес_ссылки_на_низ_сайта);
height: высота_нижней_части_сайтаpx;
width: ширина_нижней_части_сайтаpx;
}

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

• Фон сайта

Меняет фон нижней половины сайта

body {background: url(адрес_ссылки_на_фон_сайта);}

Меняет фон верхней половины сайта

#art-page-background-gradient {background: url(адрес_ссылки_на_фон_сайта);}

Меняет фон вокруг содержимого страницы

.art-content-layout {background-color: #цвет_фона;}

• Контур с закругленными углами вокруг области сайта

Меняет углы контура

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl {
background-image: url(адрес_ссылки_на_угол_контура);
}

Меняет верхнюю и нижнюю часть контура

.art-sheet-tc, .art-sheet-bc {
background-image: url(адрес_ссылки_на_контур_с_нижней_и_верхней_частями);
}

Меняет левую и правую часть контура

.art-sheet-cr, .art-sheet-cl {
background-image: url(адрес_ссылки_на_контур_с_левой_и_правой_частями);
}

Примечание: Данные CSS-коды следует использовать только в тех шаблонах, где есть контур с закругленными углами вокруг области сайта.

• Оформление текста ссылки

Меняет оформление ссылки в обычном состоянии

.art-postcontent a {color: #цвет_ссылки; text-decoration: none;}

Примечание: text-decoration: none — означает, что ссылка не должна быть подчёркнутой

Меняет оформление ссылки при наведении на неё курсором мышки

.art-postcontent a:hover {color: #цвет_ссылки; text-decoration:underline;}

Примечание: text-decoration: underline — означает, что ссылка должна быть подчёркнутой, когда на неё наводят курсор мышки.

• Заголовок в шапке

Меняет заголовок в шапке

h1.art-logo-name, h1.art-logo-name a, h1.art-logo-name a:link, h1.art-logo-name a:visited, h1.art-logo-name a:hover {
color: #цвет_заголовка_в_шапке !important;
font-size: размер_текста_заголовкаpx;
}

Примечание: Обязательно ставьте !important после указания цвета заголовка в шапке, иначе цвет не поменяется. !important — означает, что если для одного и того же элемента в таблице CSS указываются разные данные, то отображаться будут те данные, где указан !important. По всей видимости в шаблонах окис так и происходит, поэтому при изменении цвета заголовка в шапке обязательно указывайте !important.

• Заголовок над текстом

Меняет заголовок над текстом

.art-post h2.art-postheader {color: #цвет_заголовка_над_текстом; font-size: необходимый_размерpx;}

Примечание: В уроке по наполнению сайта, сделанного на okis.ru рассказывалось о том, что данный заголовок является тэгом h1, но это не так. На самом деле, это тэг h2, но в админке сайта, сделанного на окисе, почему-то указано, что это тэг h1. Видимо это ошибка создателей сервиса okis.ru. Может быть, в скором времени эту ошибку исправят. А тэг h1 в находится в шапке сайта (см. предыдущий пункт «Заголовок в шапке»)

Пожалуй, я на этом остановлюсь. Если Вам нужно изменить ещё какие-нибудь элементы сайта на okis.ru, которые Вы не нашли на данной странице, тогда задайте мне свой вопрос в комментариях, и я укажу на этой странице, как изменить интересующий Вас элемент.

Взято webcaum.ru

---

Наш интернет-магазин картин WEB-Gallery предлагает на продажу картины. В картинной галерее можно купить картину недорого и непосредственно у художника. А поиск по сайту поможет выбрать картины, подходящие именно Вам. Все картины написаны маслом на холсте.

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