Создание Еще Одного Фона
#1
Отправлено 16 Сентябрь 2013 - 16:02
Необходимо сделать так:
В данном случае оранжевым цветом выделен фон, а внешней коричневой чертой - границы экрана. Внутренняя коричневая черта это граница страницы.
#2
Отправлено 16 Сентябрь 2013 - 16:47
Quinke (16 Сентябрь 2013 - 16:02) писал:
Необходимо сделать так: before.jpg after.jpg
В данном случае оранжевым цветом выделен фон, а внешней коричневой чертой - границы экрана. Внутренняя коричневая черта это граница страницы.
в файле main.css вместо
.global {background: #CDB38B;padding: 20px}вставьте
.global {background: #fc7f26;padding-bottom: 2px;}
вместо
.summary a {color: #FFFFFF; background: #CDB38B;padding: 1.75em 1em 1.5em; position: absolute; right: 0; top: -4.2em; display: block; text-align: center; width: 13.333em;}вставьте
.summary a {color: #FFFFFF; padding: 1.75em 1em 1.5em; position: absolute; right: 0; top: -4.2em; display: block; text-align: center; width: 13.333em;}
вместо
.container {margin: 0 auto;width: 90%;position: relative; max-width: 1280px;overflow: visible;}вставьте
.container {z-index: 999;margin: 0 auto;width: 90%;position: relative; max-width: 1280px;overflow: visible;background: #FFDEAD;border: 5px solid #b57b51;}
вместо
.bg {background: #FFDEAD;}вставьте
.bg {background: #fc7f26;}
вместо
.head {width: 100%;font-size:13px;position: relative;}вставьте
.head {width: 100%;font-size:13px;position: relative;background: #ccb48d;}
вместо
footer {clear: both;background: #8B8970;overflow: hidden;padding: 1.5em 0;color: #e6e4da;width: 100%;}вставьте
footer {clear: both;background: #fc7f26;overflow: hidden;padding: 1.5em 0;color: #e6e4da;width: 100%;}
вместо
footer {clear: both;background: #8B8970;overflow: hidden;padding: 1.5em 0;color: #e6e4da;width: 100%;}вставьте
footer {clear: both;background: #fc7f26;overflow: hidden;padding: 1.5em 0; padding-top:2px; color: #e6e4da;width: 100%;} footer .container { background: #ccb48d !important; color: #fff;} footer .container a {color: #fff;} footer .container a:hover {text-decoration: underline !important;}
получилось не совсем так, как Вы указали, но по-другому закрасить блоки не получится. Также я немного изменила подвал, цвет Вы сможете потом другой поставить. Напишите, если что не понравится.
#3
Отправлено 16 Сентябрь 2013 - 19:05
Хотелось бы добавить отступ от левого края в текстовом блоке "Мы рады видеть Вас" и предусмотреть возможность вставки изображения в фон (вместо оранжевого цвета). Я так понимаю нужно будет вставлять каждое изображения по отдельности: в шапку, подвал и контейнер
#4
Отправлено 16 Сентябрь 2013 - 19:11
Quinke (16 Сентябрь 2013 - 19:05) писал:
Хотелось бы добавить отступ от левого края в текстовом блоке "Мы рады видеть Вас" и предусмотреть возможность вставки изображения в фон (вместо оранжевого цвета). Я так понимаю нужно будет вставлять каждое изображения по отдельности: в шапку, подвал и контейнер
в style.css замените
section[role="main"] {margin-bottom: 6em;z-index: 10;}на
section[role="main"] {margin-bottom: 6em;z-index: 10;padding: 20px;}
можно и одной картинкой все сделать. Найдите строчку
footer {clear: both;background: #f4a460;overflow: hidden;padding: 1.5em 0; padding-top:30px; color: #e6e4da;width: 100%;}замените на
footer {clear: both; overflow: hidden;padding: 1.5em 0; padding-top:30px; color: #e6e4da;width: 100%;}
далее строчку
.global {background: #F4A460;padding-bottom: 15px;padding-top: 20px;}замените на
.global {padding-bottom: 15px;padding-top: 20px;}
и теперь уже вместо строчки
.bg {background: #F4A460;}вставьте
.bg {background: url({ASSETS_IMAGES_PATH}header.png);}осталось только загрузить изображение header.png в раздел сайт -> редактор шаблонов
#5 Гость_Наталья C._*
Отправлено 23 Сентябрь 2013 - 18:30
Подскажите, возможно ли реализовать цвет фона, как во вложенном файле?
Напишу подробно:
1) В самом верху должна быть темно-зеленая панель с соц. иконками
2) Причем хорошо бы эту панель закрепить так, чтобы при промотке страницы вниз она бы все равно была сверху
3) Сам фон должен быть серый с текстурой, как на картинке. Эта картинка у меня есть в высоком качестве, можно бы ее разместить, только я не знаю как
4) Подвал сайта должен быть темно-зеленого цвета с текстурой, как на картинке
Хочется, сделать точную копию на своем сайте с такими же разделами. Заранее спасибо!
Аккаунт SL-232611
#6
Отправлено 23 Сентябрь 2013 - 18:38
Код:
.global { background: url('адрест картинки'); background-color: цвет фона; }И цвета подвала.
footer { background: url('адрес картинки'); background-color: #0F0F0F; }
#7 Гость_Наталья C._*
Отправлено 23 Сентябрь 2013 - 18:43
Koderhan (23 Сентябрь 2013 - 18:38) писал:
Код:
.global { background: url('адрест картинки'); background-color: цвет фона; }И цвета подвала.
footer { background: url('адрес картинки'); background-color: #0F0F0F; }
Подскажите, а каким размером лучше загружать картинки для фона и подвала, чтобы они легко грузились?
И что с ответом на первые 2 вопроса?
#8
Отправлено 23 Сентябрь 2013 - 18:56
Соц кнопки можно поставить от yandex. http://api.yandex.ru/share/
В файле "html".
После кода:
<div class="bg">Добавить:
<div class="social-but"> <div class="social-center"> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir" ></div> </div> </div>
В файле "style.css".
Добавить в конец файла код:
.social-but { width: 100%; display: block; height: 25px; } .social-center { display: block; width: 90%; margin: 0 auto; height: 100%; }
#9 Гость_Наталья C._*
Отправлено 23 Сентябрь 2013 - 20:00
Koderhan (23 Сентябрь 2013 - 18:56) писал:
Соц кнопки можно поставить от yandex. http://api.yandex.ru/share/
В файле "html".
После кода:
<div class="bg">Добавить:
<div class="social-but"> <div class="social-center"> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir" ></div> </div> </div>
В файле "style.css".
Добавить в конец файла код:
.social-but { width: 100%; display: block; height: 25px; } .social-center { display: block; width: 90%; margin: 0 auto; height: 100%; }
Не совсем понятно про размер картинок. Дайте, пожалуйста, конкретный размер в пикселях. Уж простите за такую детализацию, мне важно, чтобы сайт быстро загружался
А как же сделать так, чтобы соц кнопки располагались именно в самом верху на специально отведенном для них фоне? (пример во вложении)
#10 Гость_Наталья C._*
Отправлено 23 Сентябрь 2013 - 20:07
Наталья C. (23 Сентябрь 2013 - 20:00) писал:
А как же сделать так, чтобы соц кнопки располагались именно в самом верху на специально отведенном для них фоне? (пример во вложении)
Загрузила пример ))
#11
Отправлено 24 Сентябрь 2013 - 05:55
<div style="background: #611770;"> <div class="social-but"> <div class="social-center"> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div> </div> </div> </div>
#12 Гость_Наталья C._*
Отправлено 24 Сентябрь 2013 - 08:23
Vaccina (24 Сентябрь 2013 - 05:55) писал:
<div style="background: #611770;"> <div class="social-but"> <div class="social-center"> <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script> <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div> </div> </div> </div>
Спасибо. Ответьте на последний вопрос: Не совсем понятно про размер картинок. Дайте, пожалуйста, конкретный размер в пикселях. Уж простите за такую детализацию, мне важно, чтобы сайт быстро загружался
#13 Гость_Наталья C._*
Отправлено 24 Сентябрь 2013 - 08:45
Наталья C. (24 Сентябрь 2013 - 08:23) писал:
*Размер картинок к этой инструкции я имела ввиду:
Цвета и текстуру можно изменить добавив код в конец файла style.css.
Код:
.global {
background: url('адрест картинки');
background-color: цвет фона;
}
И цвета подвала.
footer {
background: url('адрес картинки');
background-color: #0F0F0F;
}
#14
Отправлено 24 Сентябрь 2013 - 08:54
#15 Гость_Наталья C._*
#16
Отправлено 24 Сентябрь 2013 - 11:27
Вот стили с для установки фоновых изображений.
Вам нужно будет скачать архив с изображениями. Загрузить все изображения в редактор шаблонов. затем прописать в коде ссылки на изображения в виде:
{ASSETS_IMAGES_PATH}название_изображения.pngПример:
.global { background: url('{ASSETS_IMAGES_PATH}fon_pod_slajder2.png'); }
В файле "main.css".
Добавить в конец файла код:
.global { background: url('{ASSETS_IMAGES_PATH}fon_pod_slajder2.png'); } footer { background: url('{ASSETS_IMAGES_PATH}fon_podvala2.png'); } html { background: url('{ASSETS_IMAGES_PATH}fon_pod_podvalom2.png'); } .bg { background: url('{ASSETS_IMAGES_PATH}fon_osnovnoj2.png'); }
Прикрепленные файлы
#17 Гость_Наталья C._*
Отправлено 24 Сентябрь 2013 - 19:29
Koderhan (24 Сентябрь 2013 - 11:27) писал:
Вот стили с для установки фоновых изображений.
Вам нужно будет скачать архив с изображениями. Загрузить все изображения в редактор шаблонов. затем прописать в коде ссылки на изображения в виде:
{ASSETS_IMAGES_PATH}название_изображения.pngПример:
.global { background: url('{ASSETS_IMAGES_PATH}fon_pod_slajder2.png'); }
В файле "main.css".
Добавить в конец файла код:
.global { background: url('{ASSETS_IMAGES_PATH}fon_pod_slajder2.png'); } footer { background: url('{ASSETS_IMAGES_PATH}fon_podvala2.png'); } html { background: url('{ASSETS_IMAGES_PATH}fon_pod_podvalom2.png'); } .bg { background: url('{ASSETS_IMAGES_PATH}fon_osnovnoj2.png'); }
Спасибо Вам огромное за проделанную работу!
#18
Отправлено 03 Октябрь 2013 - 18:30
.container {z-index: 999;margin: 0 auto;width: 90%;position: relative; max-width: 1280px;overflow: visible;background: #FFDEAD;border: 5px solid #b57b51;}
В данном случае меняется цвет рамки у меню, контейнера и подвала на одинаковый
#19
Отправлено 03 Октябрь 2013 - 18:52
Quinke (03 Октябрь 2013 - 18:30) писал:
Также найдите
После этого в файле style.css добавьте
#headBorder {border: 5px solid #CD853F;}и
#footerBorder { border: 5px solid #CD853F; }
Вместо #CD853F установите желаемые цвета.
#20
Отправлено 03 Октябрь 2013 - 19:31
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных