Урок№4. Как поменять шапку сайта на okis.ru
Прежде чем приступить к изменению шапки сайта, сделанного на okis.ru, скачайте файлы для дальнейшей работы.
Итак, как поменять шапку сайта на okis.ru? Для начала разархивируйте файл, который Вы скачали и найдите там шапку сайта, которая имеет название shapka.png. Нам нужно её загрузить на наш сайт. Как это сделать? Зайдите в пункт «Загрузка фото» в панели управления сайта.
Здесь Вы можете загружать изображения на сайт.
Прежде чем загружать шапку нашего коктейльного сайта, обязательно снимите галочку с «Уменьшить размер изображение до 500 х 500 px», так как шапка шире чем 500 px. Галочку сняли, теперь жмем «Обзор», затем находим файл shapka.png и нажимаем «Открыть».
Далее нажмите на кнопку «Загрузить изображение на сервер»
После того, как Вы загрузили изображение, ниже Вы увидите ссылку, где находится шапка нашего сайта.
Эту ссылку мы будем использовать при замене старой шапки на новую.
Зайдите в редактор CSS -> Редактировать CSS. На этот раз мы воспользуемся вспомогательными кнопками. Нажмите на кнопку «Шапка сайта» и введите тот адрес ссылки на картинку с шапкой, который показан в админке Вашего сайта, после чего нажмите «Сохранить».
Нажмите «Обновить». Вы увидите, что в поле, где пишутся все стили, появился новый код:
div.art-header-jpeg {background: url(/ПУТЬ_К_ФАЙЛУ/shapka.png);}
Это и есть стили для шапки сайта.
В моём случае путь к файлу такой: /img/cocktail60/shapka.png
Значит в моей админке написан следующий код:
div.art-header-jpeg {background: url(/img/cocktail60/shapka.png);}
У Вас же ПУТЬ_К_ФАЙЛУ к шапке другой, поэтому Вы копируете ту ссылку, которая показывается у Вас в админке.
Обновите главную страницу сайта, и Вы увидите, что шапка поменялась. Но есть небольшой недочёт, который мы сейчас исправим — если Вы приглядитесь, то увидите, что в верхних уголках немного вылезает контур шапки, который не вписывается в наш дизайн.
Дело в том, что во всех шаблонах сайта okis.ru, где есть закругленные углы, шапка состоит из двух частей: из основной картинки, которую мы загрузили и из контура шапки. Давайте поменяем контур шапки. Зайдите снова в пункт «Загрузка фото» в панели управления сайта и загрузите там файл shapka_kontur.png. Перед загрузкой контура шапки не забудьте снять галочку с «Уменьшить размер изображение до 500 х 500 px». В админке нет кнопки «Контур шапки», поэтому мы добавим стили вручную для данного элемента. В редакторе CSS с новой строчки нам нужно прописать следующий код:
div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/shapka_kontur.png);}
В моем случае путь к файлу контура шапки такой: /img/cocktail60/shapka_kontur.png
Поэтому я прописываю следующий код:
div.art-header-png {background: url(/img/cocktail60/shapka_kontur.png);}
Не забывайте о том, что Ваш путь к файлу отличается от моего.
Сохраните изменения.
Если Вы обновите наш сайт, то увидите, что синих уголков больше не наблюдается.
Теперь Вы знаете, как поменять шапку сайта в конструкторе сайтов ОКИС. В следующем уроке Вы узнаете, как поменять низ сайта на 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 и работать с содержимым страницы
35 comments
Для данного шаблона Вам нужна шапка 986×420 px. Вы же загрузили слишком большую шапку – 1920x619px. Поэтому и не умещается.
Кнопки должны быть, возможно, вы заходите не в «Редактировать CSS», а в «шаблон», который находится рядом с данном разделом. Кликните точно по ссылке «Редактировать CSS», и вы перейдёте в нужный раздел. Либо попробуйте через другой браузер зайти в админку. Может быть ошибка у браузера.
Нашла в библиотеке кодов, что прописывать. Вот только теперь картинка не влезла в шапку, как исправить? Ссылка на сайт: castricumvirgo.okis.ru.
Здравствуйте. У меня такая проблема. Когда я захожу в раздел «Редактировать CSS», то справа, как показано у вас на примерах, у меня отсутствуют вспомогательные кнопки. Что делать?
Спасибо за ценные советы!!!
Чтобы поменять шапку сайта следуйте инструкциям, которые представлены на данной странице.
Чтобы поменять низ сайта следуйте инструкциям, представленным на странице https://webcaum.ru/kak-pomenyat-niz-sajta-sdelannogo-na-okisru.html
Сначала внесите изменения на сайт, а потом, если не получится, я посмотрю, что не так.
Помогите, пожалуйста, у меня не получается поменять шапку и низ сайта.
Я не знаю, как подвинуть название страниц влево, чтобы увеличить шрифт названия страниц.
Мой сайт business.okis.ru
Попробуйте переименовать файл, который Вы загружаете, и всё у Вас получится.
Я так понимаю, Вы уже сами сделали шапку по той ширине, которая нужна была.
Добрый день! Подскажите, как сделать шапку по ширине?
вот мой сайт izuminka.okis.ru
Спасибо за подсказку. Я изменила размеры шапки на 988 х 230, но грузится картинка с предыдущими размерами (272 х 230), Я почистила куки, но это не помогло. Кстати, если гружу картинку через Фото (загрузить фото ) упорно появляются коктейли, загружается правильная шапка только через файлы (загрузить файлы). Но только не те размеры. Подскажите, пожалуйста, как это исправить.
Спасибо.
В Вашем случае нужна шапка 988 x 250 пикселей, как у шаблона сайта по умолчанию healthyfood.okis.ru/shablons/334/images/header.jpg
У вашей же шапки сейчас размеры 972 x 230 пикселей, поэтому шапка и неправильно разместилась.
Добрый день! Мой сайт Healthyfood. Пытаюсь который раз поменять шапку сайта. Шапка, которая загрузилась мала и получилась срезанная снизу. Нашла подходящую по теме картинку, изменила формат (на png) и загружаю ее на сервер. В результате вижу шапку с коктейлями. Так происходило несколько раз. Подскажите, пожалуйста, что не так?
healthyfood.okis.ru/img/healthyfood/shapka.png
Спасибо
Вам нужно просто сделать шапку, размеры которой соответствуют шаблону. Скиньте ссылку на сайт, и Вам скажу, какие размеры должны быть у шапки.
Помогите, в общем, всё сделал как вы, но картинка не полностью влазит в шапку. Как сделать, чтобы она растянулась по всему размеру шапки.
В заметке https://webcaum.ru/izmenenie-dizajna-na-okisru-okisru-obshhij-spisok-css-kodov.html собраны основные CSS-коды, которые необходимо использовать при изменении дизайна сайта на ОКИС.РУ (OKIS.RU). Пользуйтесь на здоровье:) . Там же есть информация о том, как поменять заголовок в шапке:
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.
а как можно в шапке цвет надписи поменять? а то сливается с картинкой, выглядит не очень красиво))) mountain-dress.okis.ru
Вам нужно подогнать размер шапки под шаблон. В данном случае шапка состоит из двух частей – контур шапки и логотип шапки.
Как выглядит контур шапки стандартного шаблона можно посмотреть на странице big-shot.okis.ru/shablons/309/images/header.png
Как выглядит логотип шапки стандартного шаблона можно посмотреть на странице big-shot.okis.ru/shablons/309/images/header.jpg
Соответственно нужны те же самые размеры, чтобы шапка нормально отображалась, т.е. код должен быть таким:
div.art-header-jpeg {background: url(ПУТЬ_К_ЛОГОТИПУ_ШАПКИ); width:958px; height: 120px;}
div.art-header-png {background: url(ПУТЬ_К_КОНТУРУ_ШАПКИ); width: 988px; height: 150px;}
,где width и height – это ширина и высота. Их указывать необязательно, но желательно.
Теперь о том, как сделать круглые верхние углы. Чтобы белые уголочки не показывались нужно создать контур шапки в формате png (пример названия файла: header.png), и там, где углы закруглены, нужно острые уголочки сделать прозрачными. Смотрите пример на странице big-shot.okis.ru/shablons/309/images/header.png – можете скачать этот файл и открыть его в фотошопе, и Вы увидите, что эти уголочки прозрачны.
Как сделать круглые верхние углы, и я что то не могу разобраться с размером, то оно очень широкое и короткое то просто короткое, big-shot.okis.ru вот ссылка
div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat;}
У стиля div.art-header-jpeg прописана команда position: absolute;, поэтому в данном случае нужно сделать отступ с помощью команды left или right, например, так:
div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat; left:150px; }
а потом подравнять, подставив значение либо больше чем 150px, либо меньше
а чтоб картинка по центру была,не подскажите?
Проще сделать шапку такого же размера, как у исходника. Как видите, шапка начинает повторяться по горизонтали, т.к. она меньше по размеру, чем у шаблона сайта. Чтобы шапка не повторялась, нужно добавить команду no-repeat. В Вашем случае нужно прописать так div.art-header-jpeg{background:url(/file/helppc/robo-mon.jpg) no-repeat;}
helppc.okis.ru помогите сделать шапку по центру
Ширина и длина шапки такие:
width: 972px;
height: 200px;
Размер шапки я не указал намеренно, дабы не усложнять урок. Имейте ввиду, что уроки рассчитаны на новичков, которые даже CSS не знают. Да, по-хорошему, нужно указывать ширину, длину шапки, а также background-repeat: no-repeat; . Но все эти значения уже указаны в общей таблице CSS, которые находятся по адресу coctail60.okis.ru/shablons/327/style.css (если мы говорим о представленной на данном сайте серии уроков по созданию сайтов на окис). В данном уроке мы просто меняем одну шапку на другую.
Можно было бы написать в CSS для большей надёжности так:
div.art-header-jpeg {background: url(ПУТЬ_К_ФАЙЛУ/shapka.png) no-repeat; width: 972px; height: 200px;}
div.art-header-png {background: url(ПУТЬ_К_ФАЙЛУ/shapka_kontur.png) no-repeat; width: 972px; height: 200px;}
, где no-repeat означает, что шапка не будет дублироваться.
какой размер шапки?
Нет скайпа, у меня нет, и индивидуальными консультациями я не занимаюсь. На все вопросы я всё равно не смогу Вам ответить. Изучайте HTML, CSS, а также научитесь работать с программой Photoshop. Это не сложно. Всё равно при создании сайтов эти знания НЕОБХОДИМЫ! Могу посоветовать Вам новый курс Евгения Попова, который я сам недавно приобрёл. Подробнее почитать об этом курсе Вы можете, перейдя по следующей ссылке:
https://webcaum.ru/kursy-sajtostroeniya/novyj-videokurs-vse-texnicheskie-momenty-onlajn-biznesa-v-videoformate-2011.html
у вас есть скайп?
В таком случае Вам нужно загрузить изображение 986 x 225 пикселей. Изображение deva1.jpg слишком маленькое для шапки.
Да это мой сайт, на примере которого я сделал уроки по созданию сайта на окис
да и ёщё это ваш сайт admin coctail60.okis.ru
нет не совсем но всё ровно спасибо
мне надо именно чтобы deva1 был по середини и растянутый
Как я понял, Вы хотите, чтобы в шапке показывалось изображение deva1.jpg, которое будет размножено. В таком случае попробуйте добавить ещё такой код:
div.art-header-jpeg {background: url(img/tonus-club/deva1.jpg);}
Также рекомендую Вам внимательно изучить ещё раз этот урок, а также все остальные, начиная с первого (https://webcaum.ru/sozdanie-sajta/kak-sdelat-besplatnyj-sajt-na-okis.html). Что-то Вы уже умеете, а что-то нет. Изучив все уроки, многие вопросы отпадут сразу же в дальнейшем.
мой сайт tonus-club.okis.ru помогите
помогите мне, я сменил шапку, но только старая шапка на новой, что делать подскажите мне, буду благодарен
Попробуйте в CSS прописать следующий код:
.art-sheet {margin-top: 0px !important;}
Должен работать
Здравствуйте.
Подскажите как подтянуть шапку вверх, что бы не было отступа