Перейти к содержимому


Создание Еще Одного Фона


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 60

#1 Quinke

Quinke

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 16 Сентябрь 2013 - 16:02

Возможно ли в теме Вечность наложить еще один фон. В качестве примера можно взять сайт hoodie.me (сама страница с белым фоном и за страницей еще один "полосатый" фон)
Необходимо сделать так:before.jpg after.jpg
В данном случае оранжевым цветом выделен фон, а внешней коричневой чертой - границы экрана. Внутренняя коричневая черта это граница страницы.

#2 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 16 Сентябрь 2013 - 16:47

Просмотр сообщенияQuinke (16 Сентябрь 2013 - 16:02) писал:

Возможно ли в теме Вечность наложить еще один фон. В качестве примера можно взять сайт hoodie.me (сама страница с белым фоном и за страницей еще один "полосатый" фон)
Необходимо сделать так:Прикрепленный файл 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;}

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

Прикрепленные изображения

  • ScreenShot 398.png


#3 Quinke

Quinke

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 16 Сентябрь 2013 - 19:05

Спасибо за ответ!

Хотелось бы добавить отступ от левого края в текстовом блоке "Мы рады видеть Вас" и предусмотреть возможность вставки изображения в фон (вместо оранжевого цвета). Я так понимаю нужно будет вставлять каждое изображения по отдельности: в шапку, подвал и контейнер

#4 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 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._*

Гость_Наталья C._*
  • Гости

Отправлено 23 Сентябрь 2013 - 18:30

Добрый день!
Подскажите, возможно ли реализовать цвет фона, как во вложенном файле?
Напишу подробно:

1) В самом верху должна быть темно-зеленая панель с соц. иконками
2) Причем хорошо бы эту панель закрепить так, чтобы при промотке страницы вниз она бы все равно была сверху
3) Сам фон должен быть серый с текстурой, как на картинке. Эта картинка у меня есть в высоком качестве, можно бы ее разместить, только я не знаю как
4) Подвал сайта должен быть темно-зеленого цвета с текстурой, как на картинке


Хочется, сделать точную копию на своем сайте с такими же разделами. Заранее спасибо!
Аккаунт SL-232611

Прикрепленные изображения

  • пример.jpg


#6 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 23 Сентябрь 2013 - 18:38

Цвета и текстуру можно изменить добавив код в конец файла style.css.
Код:
.global {
	background: url('адрест картинки');
	background-color: цвет фона;
}
И цвета подвала.
footer {
	background: url('адрес картинки');
	background-color: #0F0F0F;
}


#7 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 23 Сентябрь 2013 - 18:43

Просмотр сообщенияKoderhan (23 Сентябрь 2013 - 18:38) писал:

Цвета и текстуру можно изменить добавив код в конец файла style.css.
Код:
.global {
background: url('адрест картинки');
background-color: цвет фона;
}
И цвета подвала.
footer {
background: url('адрес картинки');
background-color: #0F0F0F;
}

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

И что с ответом на первые 2 вопроса?

#8 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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._*

Гость_Наталья 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._*

Гость_Наталья C._*
  • Гости

Отправлено 23 Сентябрь 2013 - 20:07

Просмотр сообщенияНаталья C. (23 Сентябрь 2013 - 20:00) писал:

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

А как же сделать так, чтобы соц кнопки располагались именно в самом верху на специально отведенном для них фоне? (пример во вложении)

Загрузила пример ))

Прикрепленные изображения

  • пример соц сети.jpg


#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Сентябрь 2013 - 05:55

Фон кнопок можно задать обвернув блок кнопок дополнительным блоком с заданным свойством background. Например

<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._*

Гость_Наталья C._*
  • Гости

Отправлено 24 Сентябрь 2013 - 08:23

Просмотр сообщенияVaccina (24 Сентябрь 2013 - 05:55) писал:

Фон кнопок можно задать обвернув блок кнопок дополнительным блоком с заданным свойством background. Например

<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._*

Гость_Наталья C._*
  • Гости

Отправлено 24 Сентябрь 2013 - 08:45

Просмотр сообщенияНаталья C. (24 Сентябрь 2013 - 08:23) писал:

Спасибо. Ответьте на последний вопрос: Не совсем понятно про размер картинок. Дайте, пожалуйста, конкретный размер в пикселях. Уж простите за такую детализацию, мне важно, чтобы сайт быстро загружался

*Размер картинок к этой инструкции я имела ввиду:
Цвета и текстуру можно изменить добавив код в конец файла style.css.
Код:

.global {
background: url('адрест картинки');
background-color: цвет фона;
}
И цвета подвала.

footer {
background: url('адрес картинки');
background-color: #0F0F0F;
}

#14 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 24 Сентябрь 2013 - 08:54

Точный размер фонвых картинок не могу сказать. Не могли бы прислать картинки в хорошом качестве чтобы можно было протестировать их на сайте.

#15 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 24 Сентябрь 2013 - 10:45

Просмотр сообщенияKoderhan (24 Сентябрь 2013 - 08:54) писал:

Точный размер фонвых картинок не могу сказать. Не могли бы прислать картинки в хорошом качестве чтобы можно было протестировать их на сайте.

Хорошо, высылаю картинки.

Прикрепленные изображения

  • фон основной.png
  • фон под подвалом.png
  • фон под слайдер.png
  • фон подвала.png


#16 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 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');
}

Прикрепленные изображения

  • ScreenShot 811.png
  • ScreenShot 812.png

Прикрепленные файлы

  • Прикрепленный файл  images.zip   52,54К   54 Количество загрузок:


#17 Гость_Наталья C._*

Гость_Наталья 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 Quinke

Quinke

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 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 ne_yana

ne_yana

    Активный участник

  • Модератоpы
  • 1 190 сообщений

Отправлено 03 Октябрь 2013 - 18:52

Просмотр сообщенияQuinke (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;}В данном случае меняется цвет рамки у меню, контейнера и подвала на одинаковый
Найдите код в админке в разделе Сайт -> Редактор шаблонов -> HTML

Скрытый текст
заменить на
Скрытый текст

Также найдите
Скрытый текст
и замените его на
Скрытый текст


После этого в файле style.css добавьте
#headBorder {border: 5px solid #CD853F;}
и
#footerBorder {
border: 5px solid #CD853F;
}

Вместо #CD853F установите желаемые цвета.

#20 Quinke

Quinke

    Пользователь

  • Пользователи
  • PipPip
  • 40 сообщений

Отправлено 03 Октябрь 2013 - 19:31

Пересмотрел несколько раз, первый и второй блок одинаковые вроде. Для footerBorder заменил как указано и добавил в style.css (в конец?), но никакого эффекта нет.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных