Как создать свой сайт
Блог сайтостроителя

Обучающий курс по сайтостроению и web-дизайну для начинающих Money Master часть 2
Обучающий курс по сайтостроению и web-дизайну для начинающих Money Master часть 2

Рубрика «Вопрос? Ответ!»





Изменение дизайна на ОКИС.РУ (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, которые Вы не нашли на данной странице, тогда задайте мне свой вопрос в комментариях, и я укажу на этой странице, как изменить интересующий Вас элемент.

Если Вы ещё не знаете, как сделать бесплатный сайт на 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 и работать с содержимым страницы

Популярность заметки: 3%

Опубликовал admin 17 июля, 2011 | 12 комментариев | Просмотров: 13,201

Рейтинг заметки:

1 звезда2 звезды3 звезды4 звезды5 звезд (4 голосов, средний: 5.00 из 5)
Loading ... Loading ...

Размещено в рубрике: Сайт на OKIS

Метки:

Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.

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

  • Мария
    17 января, 2012, 17:37
    Цитировать

    Спасибо вам , я многому научилась!

  • admin
    17 января, 2012, 17:40
    Цитировать

    Цитата:

    Спасибо вам , я многому научилась!

    Рад, что мои уроки Вам пригодились

  • Gold_Den
    16 февраля, 2012, 9:51
    Цитировать

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

  • admin
    18 февраля, 2012, 21:05
    Цитировать

    Цитата:

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

    Да, можно. Попробуйте прописать стили для .art-post {… }. Если не получится, то напишите, что именно Вы хотите изменить в месте, где находится содержимое сайта. Тогда я смогу Вам больше помочь.

  • Mike999
    5 марта, 2012, 10:12
    Цитировать

    А как сделать на Окисе так, чтобы пункты подменю выпадали вправо, а не вниз — мучаюсь уже второй день со своим сайтом goloka108.ru Помогите, если сможете.

  • admin
    8 марта, 2012, 18:21
    Цитировать

    Цитата:

    А как сделать на Окисе так, чтобы пункты подменю выпадали вправо, а не вниз — мучаюсь уже второй день со своим сайтом goloka108.ru Помогите, если сможете.

    Если честно, вот так сразу решение данной задачи сказать не могу. Для этого нужно долго разбираться. Я так понял, что Вы хотите сделать так, чтобы при наведении курсора мыши на пункт меню показывались подпункты меню справа. Правильно? Тогда, как должны будут отображаться подпункты меню, если посетитель сайта зашел непосредственно на страницу, которая объединяет все эти подпункты? В данном случае подпункты меню будут отображаться или нет? И если будут, то они также должны будут отображаться справа от основного меню? В таком случае подпункты будут залезать на содержимое страницы. Значит, надо будет ещё сужать содержимое страницы, чтобы подпункты меню не залезали на текст. Подумайте, так ли сильно Вам нужны эти выпадающие подпункты справа? Если Вы хотите сложный сайт, то для этого нужно хорошо знать HTML и CSS. Но поскольку Вы выбрали платформу ОКИС для создания сайта, то значит, Вы выбрали простое решение. Так зачем всё усложнять? Чтобы ответить на Ваш вопрос, нужно написать целый достаточно сложный урок не для новичков. Если Вы всё-таки одержимы идеей сделать выпадающие подменю справа, то можно поискать информацию в интернете про «выпадающее меню на CSS». Если Вы разбираетесь в CSS, то у Вас всё получится, если нет, то тогда надо сначала изучить CSS.

  • Yuri
    15 декабря, 2012, 19:21
    Цитировать

    Здравствуйте,

    Во-первых, огромное спасибо: благодаря Вам наш сайт sunflat.okis.ru начал что-то человеческое напоминать, а то кошмар какой-то был.

    Вопрос: как ввести изображения в область справа и слева от текста, например под Меню, чтобы избавиться от пустых мест? Или это невозможно?

    Заранее спасибо

  • admin
    18 декабря, 2012, 0:18
    Цитировать

    Цитата:

    как ввести изображения в область справа и слева от текста, например под Меню, чтобы избавиться от пустых мест? Или это невозможно?

    Зайдите в раздел «Размещение рекламы» -> Вставьте код картинки в поле, где написано «Нижеследующий код будет отображаться под меню сайта» и нажмите «Обновить». Таким образом можно вставлять картинку под меню.

  • Юрий
    24 января, 2013, 18:26
    Цитировать

    Здравствуйте, я хотел бы узнать, как Вы установили «Облако меток»? Как Вы нанесли теги на страницы, что они появляются в «Облаке меток»? Я создал свой сайт и тоже хотел бы разместить его у себя на сайте. Я знаю как создать «Облако меток», но не знаю как разместить теги на странички, что бы они появлялись в нём... Подскажите, пожалуйста, буду Вам признателен, с ув. Юрий

  • admin
    3 февраля, 2013, 18:54
    Цитировать

    Цитата:

    Здравствуйте, я хотел бы узнать, как Вы установили «Облако меток»? Как Вы нанесли теги на страницы, что они появляются в «Облаке меток»? Я создал свой сайт и тоже хотел бы разместить его у себя на сайте. Я знаю как создать «Облако меток», но не знаю как разместить теги на странички, что бы они появлялись в нём... Подскажите, пожалуйста, буду Вам признателен, с ув. Юрий

    А у Вас какой движок? Если у Вас движок wordpress (у меня wordpress), то для облака меток есть специальный плагин WP-Cumulus. Его надо уставновить на сайт, и у Вас будет такое же Облако меток, как на моём сайте. Для каждого движка есть свои решения.

  • Сергей
    9 июня, 2014, 8:27
    Цитировать

    Не могу поменять в шапке размер шрифта, помогите.

  • admin
    21 июня, 2014, 11:29
    Цитировать

    Цитата:

    Не могу поменять в шапке размер шрифта, помогите.

    Чтобы поменять заголовок в шапке используйте следующие коды:

    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: #0000CC !important; /* цвет заголовка */

    font-size: 18px; /* размер заголовка */

    font-family: Arial, Helvetica, sans-serif; /* шрифт заголовка */

    }

    Чтобы поменять текст в шапке (описание сайта), которое, как правило, располагается под заголовком, используйте следующие коды:

    .art-logo-text {

    color: #666666 !important; /* цвет заголовка */

    font-size: 14px; /* размер заголовка */

    font-family: Arial, Helvetica, sans-serif; /* шрифт заголовка */

    }

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

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

© 2011 Все права защищены законодательством РФ.
Автор разрешает использовать материалы сайта только при одном условии – на страницу сайта webcaum.ru, от куда был скопирован материал (или частично скопирован), должна быть проставлена индексируемая ссылка Поднять страницу вверх