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


Фон изменить с белого на другой?

Автор mbychkov@inbox.ru, 18 окт. 2010 16:45

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

#21 Koderhan

Koderhan

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

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

Отправлено 04 Март 2013 - 10:41

Просмотр сообщенияComblive (04 Март 2013 - 10:12) писал:

Здравствуйте, помогите, уже все перепробовал, не получается заменить белую заливку между Шапкой и Подвалом на нужную картинку фона, может проще вставить картинку полностью (но не делаю этого, т.к. подвал и шапка рисовались отдельно) фон тоже уникальный, и если можно, то как сделать прокрутку только контекста в середине страницы?
сайт http://boevoyduh.storeland.ru/
В файле "main.csstemplate".
Найти код:
body {
  font-family: Helvetica, Arial, sans-serif;
}
Заменить:
body {
  font-family: Helvetica, Arial, sans-serif;
  background: url(http://boevoyduh.storeland.ru/web/upload/goods/images/81/8098/8097504/malina-eb5c13.jpg);/*фоновое изображение*/
}

Найти код:
#cpages  {
  background: url(http://boevoyduh.storeland.net/cpage-top-bg.jpg) no-repeat 0px 80px;
  padding-top: 10px;
}
Заменить:
#cpages  {
  background: url(http://boevoyduh.storeland.net/cpage-top-bg.jpg) no-repeat 0px 80px;
  padding-top: 10px;
  background-color: white;/*цвет фона контент страницы*/
}

Найти код:
#wrapper {
  background-color: #fff;
  padding-bottom: 10px;
}
Заменить:
#wrapper {
  padding-bottom: 10px;
}

#22 Comblive

Comblive

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

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

Отправлено 05 Март 2013 - 06:27

Koderhan, Спасибо за ответ, помогло фон вставил! Но возникли еще кое какие трудности, помогите, информация о проблемах на скриншоте! Заранее благодарен! B)

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

  • 111.jpg

#23 miyako

miyako

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

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

Отправлено 05 Март 2013 - 07:56

Просмотр сообщенияComblive (05 Март 2013 - 06:27) писал:

Koderhan, Спасибо за ответ, помогло фон вставил! Но возникли еще кое какие трудности, помогите, информация о проблемах на скриншоте! Заранее благодарен! B)

Растянуть подвал:
Найти код в main.csstemplate:
#footer {
background: url(http://boevoyduh.storeland.net/footer_bg.jpg) no-repeat center top;
padding: 10px;
margin-top: 10px;
width: 1320px;
height: 106px;
}
и заменить на:
#footer {
background: url(http://boevoyduh.storeland.net/footer_bg.jpg) no-repeat center top;
padding: 10px;
margin-top: 10px;
width: 100%;
height: 106px;
}

Выровнять меню:
Найти код:
.left {
display: inline;
float: left;
position: relative;
}
и заменить на:
.left {
display: inline;
position: relative;
left: 25%;
}

Надпись в подвале:
Найти код:
.right {
display: inline;
float: right;
position: relative;
text-align: right;
}
и заменить на:
.right {
display: inline;
position: relative;
text-align: center;
}

#24 Comblive

Comblive

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

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

Отправлено 05 Март 2013 - 09:06

Да спасибо за быстрый ответ, все отлично получилось!!! А как на счет картинки фона, как ее подровнять по шапке и подвалу???

#25 miyako

miyako

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

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

Отправлено 05 Март 2013 - 09:35

Просмотр сообщенияComblive (05 Март 2013 - 09:06) писал:

Да спасибо за быстрый ответ, все отлично получилось!!! А как на счет картинки фона, как ее подровнять по шапке и подвалу???

Найдите код:
.content_page {
background: url(http://boevoyduh.storeland.net/content-page-br.gif) no-repeat 710px 68px;
overflow: hidden;
padding-bottom: 2em;
}
и замените на:
.content_page {
background: url(http://boevoyduh.storeland.net/content-page-br.gif) no-repeat 710px 68px;
overflow: hidden;
padding-bottom: 2em;
position: relative;
width: 960px;
margin: 0px auto;
}

Найдите код:
#cpages {
background: url(http://boevoyduh.storeland.net/cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
background-color: black;
opacity: 0.3;
}
и замените на:
#cpages {
padding-top: 10px;
background-color: black;
opacity: 0.3;
background: url(http://files.storeland.ru/web/upload/sitefiles/5/451/450945/background.jpg) no-repeat center top;
width: 100%;
}

Найдите код:
body {
font-family: Helvetica, Arial, sans-serif;
background: url(http://files.storeland.ru/web/upload/sitefiles/5/451/450945/background.jpg) no-repeat center top;
}
и замените на:
body {
font-family: Helvetica, Arial, sans-serif;
}

#26 Comblive

Comblive

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

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

Отправлено 06 Март 2013 - 22:32

Здравствуйте! Решил переделать дизайн полностью, вопрос такой:
Возможно ли сделать фон одной целой картинкой, без шапки и подвала, и осуществить прокрутку не страницы целиком, а прокрутку только контента в середине страницы? примерно как на картинке!!!

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

  • 111111.jpg

#27 miyako

miyako

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

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

Отправлено 07 Март 2013 - 07:15

Просмотр сообщенияComblive (06 Март 2013 - 22:32) писал:

Здравствуйте! Решил переделать дизайн полностью, вопрос такой:
Возможно ли сделать фон одной целой картинкой, без шапки и подвала, и осуществить прокрутку не страницы целиком, а прокрутку только контента в середине страницы? примерно как на картинке!!!

Да, это возможно. Вам поможет статья - http://otvety.google...e87e436cff9fbba

#28 cronid

cronid

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 91 сообщений
  • Городмосква

Отправлено 09 Май 2013 - 16:24

Просмотр сообщенияKoderhan (04 Март 2013 - 10:41) писал:

В файле "main.csstemplate".
Найти код:
body {
font-family: Helvetica, Arial, sans-serif;
}
Заменить:
body {
font-family: Helvetica, Arial, sans-serif;
background: url(http://boevoyduh.storeland.ru/web/upload/goods/images/81/8098/8097504/malina-eb5c13.jpg);/*фоновое изображение*/
}

Найти код:
#cpages {
background: url(http://boevoyduh.storeland.net/cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
}
Заменить:
#cpages {
background: url(http://boevoyduh.storeland.net/cpage-top-bg.jpg) no-repeat 0px 80px;
padding-top: 10px;
background-color: white;/*цвет фона контент страницы*/
}

Найти код:
#wrapper {
background-color: #fff;
padding-bottom: 10px;
}
Заменить:
#wrapper {
padding-bottom: 10px;
}

Спасибо вам огромное Koderhan!
Столько мусолят эту тему на форуме. Пытался много раз поменять фон.
Но всегда тщетно, вроде все разжёвано,а выхлоп - только танцы с бубном.
Еще раз спасибо -  все просто и результат сразу.

#29 Ольга

Ольга

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 20 Июнь 2013 - 11:59

Здравствуйте! Вчера решила поменять фон сайта, прочитав на форуме статьи об этом, и в итоге получилось так, что фон идет в шапке наложением, а весь экран этот фон дублирует. Мой аккаунт SL-168953. Помогите,исправить. Или лучше восстановить тему из бэкапа и все заново сделать по вашим рекомендациям.

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

  • 1.png

#30 Koderhan

Koderhan

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

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

Отправлено 20 Июнь 2013 - 15:00

Просмотр сообщенияОльга (20 Июнь 2013 - 11:59) писал:

Здравствуйте! Вчера решила поменять фон сайта, прочитав на форуме статьи об этом, и в итоге получилось так, что фон идет в шапке наложением, а весь экран этот фон дублирует. Мой аккаунт SL-168953. Помогите,исправить. Или лучше восстановить тему из бэкапа и все заново сделать по вашим рекомендациям.
Можно конечно растянуть фон на всю страницу.

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Найти код:
#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top repeat;
}
Заменить:
#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top repeat;
background-size: 100% 100%;
}
Можно попробовать сделать фиксированный фон:
Найти код:
#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top repeat;
}
Заменить:
#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top fixed;
background-repeat: no-repeat;
}
ScreenShot 704.png
Или такой вариант:

Найти код:

#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top repeat;
}
Заменить:
#backtop {
		background: url("http://design.turbine-jet.ru/bgout.jpg?1920") #adcdd7 center top fixed;
		background-repeat: no-repeat;
		background-size: 100%;
}

Подробности про свойство background
http://htmlbook.ru/css/background

#31 Ольга

Ольга

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 20 Июнь 2013 - 17:22

Здорово! Благодарю!!! Все вышло по второму варианту. Скажите, а как сделать, чтоб фон был неотъемлемой частью страницы и опускался или поднимался вместе со страницей, когда ее скролишь  вниз. ( как на примере  http://www.220-volt....talog/motokosi/). А у меня получается,  что фон на месте, а страница сама по себе.

#32 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 20 Июнь 2013 - 17:35

Просмотр сообщенияОльга (20 Июнь 2013 - 17:22) писал:

Здорово! Благодарю!!! Все вышло по второму варианту. Скажите, а как сделать, чтоб фон был неотъемлемой частью страницы и опускался или поднимался вместе со страницей, когда ее скролишь  вниз. ( как на примере  http://www.220-volt....talog/motokosi/). А у меня получается,  что фон на месте, а страница сама по себе.
#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top fixed;
background-repeat: no-repeat;
}
убрать fixed: 
#backtop {
background: url("{ASSETS_IMAGES_PATH}bgout.jpg") #adcdd7 center top;
background-repeat: no-repeat;
}

#33 Ольга

Ольга

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 20 Июнь 2013 - 17:46

Фон прикрепился к странице, но внизу страницы уже нет фона моей картинки, а фон синего цвета, который не нужен . Помогите.

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

  • 1.png

#34 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 20 Июнь 2013 - 18:02

Просмотр сообщенияОльга (20 Июнь 2013 - 17:46) писал:

Фон прикрепился к странице, но внизу страницы уже нет фона моей картинки, а фон синего цвета, который не нужен . Помогите.
Можно конечно растянуть фон до конца вниз, но картинка получится весьма смазанной. Я бы порекомендовал все-таки оставить вариант с позицией fixed , чтобы фон оставался на экране в одном положении. Но если вы настаиваете, у вас код
#backtop {
				background: url("http://design.turbine-jet.ru/bgout.jpg?1920") #adcdd7 center top;
				background-repeat: no-repeat;
				background-size: 100%;
}
Здесь строка background-size: 100%; говорит о том, что картинка будет растянута по горизонтали, чтобы растянуть и по вертикали, надо изменить ее так:  background-size: 100% 100%; Т.е. :
#backtop {
				background: url("http://design.turbine-jet.ru/bgout.jpg?1920") #adcdd7 center top;
				background-repeat: no-repeat;
				background-size: 100% 100%;
}

#35 Ольга

Ольга

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 20 Июнь 2013 - 18:21

Спасибо Вам, большое. Благодарю!!! Видимо это я и хотела, раз мне понравилось.  Можно я еще к вам пристану. :) Пока вы "колдовали" над фоном, я уже поменяла цветовую гамму в верхней панели сайта, а вот как изменить оставшийся синий цвет в левой и правой частях сайта, а так же в строке поиска "поиск по товарам" я не знаю. Подскажите.

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

  • 1.png

#36 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 20 Июнь 2013 - 18:40

Просмотр сообщенияОльга (20 Июнь 2013 - 18:21) писал:

Спасибо Вам, большое. Благодарю!!! Видимо это я и хотела, раз мне понравилось.  Можно я еще к вам пристану. :) Пока вы "колдовали" над фоном, я уже поменяла цветовую гамму в верхней панели сайта, а вот как изменить оставшийся синий цвет в левой и правой частях сайта, а так же в строке поиска "поиск по товарам" я не знаю. Подскажите.
Все эти синие цвета вставляются как фон, беря ту или иную часть загруженного у вас изображения с именем block-bg.jpg, а фон поиска - это картинка searchbg.jpg. Я рекомендую отредактировать эти изображения в любом графическом редакторе (поменять цвета) и залить на сайт. Главное только, чтобы их имена и занимаемые пространства остались прежними.
Есть конечно другой вариант - так как вы делали с верхним меню, но это займет больше времени. Но выбор, конечно, остается за Вами.

Забыл добавить, картинку-фон поиска все-равно придется менять в графическом редакторе.

Сообщение отредактировал sengun: 20 Июнь 2013 - 18:51
дополнение

#37 Ольга

Ольга

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 21 Июнь 2013 - 10:04

Здравствуйте! Посмотрите, пожалуйста, почему у меня видны остатки синего цвета по концам строки поиска. Я сохранила это файл уже прямойгольный и редактировала его прямоугольным, а полукруглость не была по концам.

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

  • 1.png

#38 miyako

miyako

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

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

Отправлено 21 Июнь 2013 - 10:12

Просмотр сообщенияОльга (21 Июнь 2013 - 10:04) писал:

Здравствуйте! Посмотрите, пожалуйста, почему у меня видны остатки синего цвета по концам строки поиска. Я сохранила это файл уже прямойгольный и редактировала его прямоугольным, а полукруглость не была по концам.

Вы не изменили изображение - panel-bg.png

#39 Ольга

Ольга

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 96 сообщений
  • ГородМосква

Отправлено 21 Июнь 2013 - 10:28

Спасибо. Получилось. Скажите, пожалуйста, а почему у меня не обновился редактированный файл  headline-bg.jpg  Он в изображениях уже с серым цветом, а на главной он все еще синий. Я и Ctrl+F5, никак не меняется.

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

  • 1.png

#40 miyako

miyako

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

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

Отправлено 21 Июнь 2013 - 10:49

Просмотр сообщенияОльга (21 Июнь 2013 - 10:28) писал:

Спасибо. Получилось. Скажите, пожалуйста, а почему у меня не обновился редактированный файл  headline-bg.jpg  Он в изображениях уже с серым цветом, а на главной он все еще синий. Я и Ctrl+F5, никак не меняется.

Найдите код в main.css:
#content .headline { margin:0 10px 10px 10px; background:url(http://design.turbine-jet.ru/headline-bg.jpg) top center no-repeat;
В конце кода припишет !important
Должно получиться так:
#content .headline { margin:0 10px 10px 10px; background:url(http://design.turbine-jet.ru/headline-bg.jpg) top center no-repeat !important;

Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Вопросы общие для всех шаблонов
  5. → Изменение общей стилистики
  6. Privacy Policy