Изменение дизайна

Загрузка ...
 Изменение дизайна на ОКИС.РУ (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