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

Изменение дизайна на ОКИС.РУ (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: #цвет_заголовка_над_текстом; fontsize: необходимый_размерpx;}

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

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

Если Вы ещё не знаете, как сделать бесплатный сайт на OKIS, то Вы можете приступить к урокам прямо сейчас!

Уроки по созданию сайта на OKIS

Урок№1. Как сделать бесплатный сайт за 2 минуты на okis.ru
Урок№2. Урок по наполнению сайта, сделанного на okis.ru
Урок№3. Как поменять оформление меню сайта на okis.ru
Урок№4. Как поменять шапку сайта на okis.ru
Урок№5. Как поменять низ сайта на okis.ru
Урок№6. Как поменять фон сайта на okis.ru
Урок№7. Как поменять контур сайта на okis.ru
Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

Ссылка на основную публикацию