Урок№7. Как поменять контур сайта на okis.ru

Интересное

Некоторые шаблоны конструктора сайтов Окис имеют контур вокруг всей области сайта, и наш шаблон в их числе. В этом уроке Вы узнаете, как поменять контур сайта на okis.ru.

В первую очередь загрузите изображение sheet_s.png на наш сайт, взяв его из архива файлов, который Вы скачали в самом первом уроке. После чего зайдите в редактор CSS и напишите там следующий код:

.art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl {background-image: url(ПУТЬ_К_ФАЙЛУ/sheet_s.png);}

Сохраните изменения.

Обновив страницу сайта, Вы увидите, что в четырёх углах нашего сайта появились частицы нашего контура.

Урок№7. Как поменять контур сайта на okis.ru

Теперь нам нужно, чтобы контур равномерно распределился слева, справа, снизу и сверху.

Для того чтобы контур поменялся слева и справа нам нужно, для начала, загрузить на сайт изображение sheet_v.png. Затем в редакторе CSS нужно написать следующий код:

.art-sheet-cr, .art-sheet-cl {background-image: url(ПУТЬ_К_ФАЙЛУ/sheet_v.png);}

Сохраните изменения в CSS и обновите страницу нашего сайта. Как видите, контур поменялся слева и справа.

Урок№7. Как поменять контур сайта на okis.ru <-> Урок№7. Как поменять контур сайта на okis.ru

Давайте также поменяем верхний и нижний контур. Загрузите файл sheet_h.png, затем в редакторе CSS пропишите следующий код:

.art-sheet-tc, .art-sheet-bc {background-image: url(ПУТЬ_К_ФАЙЛУ/sheet_h.png);}

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

Поздравляю! Вы дошли до завершающего урока по изменению дизайна сайта на ОКИСе. Теперь Вы знаете, как сделать бесплатный сайт на okis.ru, и, как поменять основные составляющие дизайна сайта на ОКИСе. В следующем уроке мы подведём итоги и обсудим все самые важные моменты, связанные с созданием, ведением и продвижением сайта.

Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

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

Перейти в начало к урокам по созданию сайта на OKIS>>>

13 comments

  • Цитата:
    Все так и сделал, НО… Торчат уголки серого цвета, а обводки вообще не видно((( (7nebo.okis.ru)

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

    Также не забывайте, что у нас с Вами разный шаблон, поэтому могут отличаться размеры картинок. Это тоже нужно учитывать.

  • Все так и сделал, НО… Торчат уголки серого цвета, а обводки вообще не видно((( (7nebo.okis.ru)

  • Огромное спасибо за столь подробные разъяснения. Опробую оба варианта.
    С Новым годом Вас! Пусть в новом году сбудутся все Ваши желания!!

  • Цитата:
    Спасибо, что нашли время ответить в предпраздничной суете)
    Контур убрала, это я специально шаблон без изменений установила, думала я внесла изменения не корректно вот и встал криво. Спасибо за «хорошо смотрится», для меня это важно, а то я самоучка да ещё и не слишком одаренная))))

    Я бы на Вашем месте попробовал убрать контуры вообще, чтобы посмотреть, как будет сайт выглядеть.
    Сделать это можно, прописав следующие коды:
    .art-sheet-tr, .art-sheet-tl, .art-sheet-br, .art-sheet-bl {background: none;}
    .art-sheet-cr, .art-sheet-cl {background: none;}
    .art-sheet-tc, .art-sheet-bc {background: none;}

    А если Вы хотите поменять всё-таки контур, то его нужно для начала нарисовать.

    Можно скачать ниже представленные картинки и обработать их, не меняя размеров, слегка в фотошопе, чтобы контур подходил по дизайну:
    kaktusenok-ru.okis.ru/shablons/343/images/sheet_s.png – это контур уголков по умолчанию
    kaktusenok-ru.okis.ru/shablons/343/images/sheet_v.png – это контур слева и справа по умолчанию
    kaktusenok-ru.okis.ru/shablons/343/images/sheet_h.png – это контур снизу и сверху по умолчанию

    Затем закачать новые картинки и использовать их при изменении контура на примере данного урока.

    У Вашего сайта поехал контур, потому что Вы его взяли из этого урока. Но у меня совершенно другой шаблон и размеры контура моего сайта отличаются от размеров контура Вашего сайта.

    Например, в данном уроке размер файла sheet_s.png — 76×76. В Вашем же случае размер квадратика должен быть 64×64 (это размер по умолчанию для уголков kaktusenok-ru.okis.ru/shablons/343/images/sheet_s.png). Вам нужно придерживаться тех размеров, которые установлены по умолчанию в Вашем шаблоне.

  • Спасибо, что нашли время ответить в предпраздничной суете)
    Контур убрала, это я специально шаблон без изменений установила, думала я внесла изменения не корректно вот и встал криво. Спасибо за «хорошо смотрится», для меня это важно, а то я самоучка да ещё и не слишком одаренная))))

  • Цитата:
    Здравствуйте!
    Контур на моем сайте выглядит как бы смещенным на правый бок и вниз, толщина контура получается не одинаковой, выглядит очень не красиво…( Подскажите пожалуйста как это можно исправить.
    Заранее спасибо и с наступающем Вас!
    Мой сайт kaktusenok-ru.okis.ru

    Правильно, что выглядит некрасиво. Во-первых, данный контур не подходит Вашему шаблону по параметрам (размерам) и дизайну. Во-вторых, Вам действительно нужен контур? По-моему и без контура Ваш сайт будет смотреться довольно неплохо. В-третьих, данный урок подходит только тем шаблонам, у которых есть контур по умолчанию. Если у Вас такой шаблон, то верните, какой был контур до этого, т.е. уберите стили, которые Вы взяли из этого урока, и я посмотрю, какой был контур раньше. Тогда смогу Вам что-нибудь посоветовать.

    А так Ваш сайт хорошо смотрится и без всякого контура.

  • Здравствуйте!
    Контур на моем сайте выглядит как бы смещенным на правый бок и вниз, толщина контура получается не одинаковой, выглядит очень не красиво…( Подскажите пожалуйста как это можно исправить.
    Заранее спасибо и с наступающем Вас!
    Мой сайт kaktusenok-ru.okis.ru

  • Цитата:
    память моего блога всеволишь 2 мегабайта, каким образом можно увеличить память? может что то купить надо?

    ОКИС в админке по этому поводу пишут следующее: «Максимальный размер загружаемых файлов — 2 мб. Если нужно загрузить больше, то советуем закачать их на DepositFiles. На сайте достаточно будет поставить ссылку на загруженный файл.»
    Картинок, как я понял, это не касается. Так что фоток можно загружать, наверное, сколько угодно.

  • Цитата:
    forexman.okis.ru вот мой блог, в шапке хотел увеличить текст но увеличилось только слово «форекс» а остальное осталось без изменений , как увеличить остальное?

    Если у Вас есть какой-то вопрос по Окис, то задавайте, пожалуйста, его в соответствующем уроке. Данный урок посвящён изменению контура сайта, сделанного на окисе. Все уроки можно посмотреть на странице https://webcaum.ru/sozdanie-sajta/kak-sdelat-besplatnyj-sajt-na-okis.html – если подходящего урока нет, то вопрос можно задать на данной странице, либо на странице «Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов» — https://webcaum.ru/uroki-sajtostroeniya/izmenenie-dizajna-na-okisru-okisru-obshhij-spisok-css-kodov.html
    Если Вы хотите поменять размер текста под заголовком Форекс (h1), т.е. размер слогана, который на данный момент звучит «Приветствую Вас на моем сайте!!!», то нужно указать стили:
    .art-logo-text {color: #код_цвета_слогана !important; font-size: нужный размер;}
    Как увеличить всё остальное можно также посмотреть на странице https://webcaum.ru/uroki-sajtostroeniya/izmenenie-dizajna-na-okisru-okisru-obshhij-spisok-css-kodov.html или на форуме ОКИС

  • память моего блога всеволишь 2 мегабайта, каким образом можно увеличить память? может что то купить надо?

  • forexman.okis.ru вот мой блог, в шапке хотел увеличить текст но увеличилось только слово «форекс» а остальное осталось без изменений , как увеличить остальное?

  • Цитата:
    у меня слева только меню…а как сделать чтоб меню еще было под шапкой??? я совсем еще новичок в этом деле

    У ОКИСА нет возможности создания меню под шапкой. Разве что можно вставить код пунктов меню там, где должна быть реклама, но смотреться будет не очень хорошо.

  • у меня слева только меню…а как сделать чтоб меню еще было под шапкой??? я совсем еще новичок в этом деле

Добавить комментарий