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


Вопросы По Фоновым Изображениям В Шаблоне Сияние


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

#1 Елена1

Елена1

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

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

Отправлено 19 Февраль 2013 - 22:52

Добрый день!
Пыталась разобраться самостоятельно при помощи форума и ответов на вопросы других пользователей, не получилось. Поэтому прошу совета именно для моего случая.


Вопросы:
1. Нужно немного приподнять название страницы (чтобы оно было ближе к главному меню). Как это сделать?
2. В теме Сияние есть картинки content_top_bg и cpage_top_bg. Внешне они одинаковые! в чем смысл того, что их две?
3. В теме Сияние есть картинка content_home_bg. Она по умолчанию белого цвета. Вроде по смыслу эта картинка должна заполнять собой контентную часть страницы. Но  на деле этого не происходит. Для эксперимента поменяла ее цвет на другой, но при отображении сайта ничего не изменилось. Как сделать чтобы она реально отображалась как фон контентной части?
4. Если я хочу вставить картинку которая по вертикали начиналась бы сразу после header_page_png  и растягивалась до подвала. Как это сделать? Что и где подкрутить?
5. Шапка сайта слишком широкая, хочется ее укоротить на несколько пикселей снизу и соответственно чтобы весь остальной контент сайта подтянулся вверх. Где и что поменять для этого.
6. Как сделать чтобы слева и справа от контентной части (там где сейчас белый фон) отображалсь картинка от шапки до подвала (при этом контентую часть чтобы она не затрагивала, там будет своя фоновая картинка.
7. Как сделать так чтобы от заголовка до самого низа сайта шла фоновая картинка (растягивалась из картинки-полосы) при этом чтобы она не перекрывала фоновую картинку центральной части и footer_bg?

#2 Koderhan

Koderhan

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

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

Отправлено 20 Февраль 2013 - 05:53

Цитата

1. Нужно немного приподнять название страницы (чтобы оно было ближе к главному меню). Как это сделать?
В файле "main.csstemplate".
Найти код:
.page-headline {height: 81px;position:relative;}
/* было .page-headline {height: 81px;position:relative;}  */
.page-headline h1 {
  position:absolute;
  width:940px;
  font: 30px/70px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #772217; /* цвет названия страницы был черный #000000 заменили на бордовый 952B1D */
  padding-left: 20px;
  /*padding-top: 10 px!important;*/
  height: 2em;overflow:hidden;
}
Заменить:
.page-headline {
height: 81px;/*высота блока*/
position:relative;
}
/* было .page-headline {height: 81px;position:relative;}  */
.page-headline h1 {
  position:absolute;
  width:940px;
  font: 30px/70px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #772217; /* цвет названия страницы был черный #000000 заменили на бордовый 952B1D */
  padding-left: 20px;
  /*padding-top: 10 px!important;*/
  height: 2em;overflow:hidden;
  margin-top: -10px;/*отступ сверху*/
}

Цитата

2. В теме Сияние есть картинки content_top_bg и cpage_top_bg. Внешне они одинаковые! в чем смысл того, что их две?
Разница в размерах изображения.

Цитата

4. Если я хочу вставить картинку которая по вертикали начиналась бы сразу после header_page_png  и растягивалась до подвала. Как это сделать? Что и где подкрутить?
6. Как сделать чтобы слева и справа от контентной части (там где сейчас белый фон) отображалсь картинка от шапки до подвала (при этом контентую часть чтобы она не затрагивала, там будет своя фоновая картинка
Можно заполнить определенной текстурой из изображений.
В файле "main.csstemplate".
Найти код:
body {
  font-family: Helvetica, Arial, sans-serif;
}
Заменить:
body {
  font-family: Helvetica, Arial, sans-serif;
  background: url(http://dollsecret.ru/web/upload/goods/images/72/7177/7176920/foto-1-afacdb.jpg);
}
Найти код:
.content_page {
  background: url(http://design.dollsecret.ru/content-page-br.gif) no-repeat 710px 71px;
  overflow:hidden; 
  padding-bottom: 2em;
}
Заменить:
.content_page {
  background: url(http://design.dollsecret.ru/content-page-br.gif) no-repeat 710px 71px;
  background-color: white;/*цвет фона контента*/
  overflow:hidden; 
  padding-bottom: 2em;
  margin-bottom: -1em;
}

Цитата

7. Как сделать так чтобы от заголовка до самого низа сайта шла фоновая картинка (растягивалась из картинки-полосы) при этом чтобы она не перекрывала фоновую картинку центральной части и footer_bg?
В файле "main.csstemplate".
Найти код:
#cpages  {
  background: url(http://design.dollsecret.ru/cpage-top-bg.jpg) no-repeat 0px 80px;
  padding-top: 10px;
}
Заменить:
#cpages  {
  background: url(http://design.dollsecret.ru/cpage-top-bg.jpg) repeat-y 0px 80px;
  padding-top: 10px;
}
Изображение cpage-top-bg.jpg будет заполняться по вертикальной шкале.

#3 Елена1

Елена1

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

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

Отправлено 20 Февраль 2013 - 11:01

По п.7:
Мо вопрос был как раз не о фоновой картинке в центре сайта, а о фоновой картинке по бокам сайта.
Ваш ответ насколько я поняла относится к растяжению картинки в центральной части сайта. Но все равно, т.к. вещь полезная попробовала внести предлагаемые изменения

#cpages  {
  background: url({ASSETS_IMAGES_PATH}cpage-top-bg.jpg) repeat-y 0px 80px; /* no-repeat заменили на repeat-y*/
  padding-top: 10px;
}

но при этом  cpage-top-bg не стал вытягиваться до подвала!!! Что не так?

#4 Елена1

Елена1

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

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

Отправлено 20 Февраль 2013 - 11:15

По п.7:
Мо вопрос был как раз не о фоновой картинке в центре сайта, а о фоновой картинке по бокам сайта.
Ваш ответ насколько я поняла относится к растяжению картинки в центральной части сайта. Но все равно, т.к. вещь полезная попробовала внести предлагаемые изменения



#cpages  {
  background: url({ASSETS_IMAGES_PATH}cpage-top-bg.jpg) repeat-y 0px 80px; /* no-repeat заменили на repeat-y*/
  padding-top: 10px;
}



При этом картинка cpage частично перекрыла шапку сайта (header_page). Как сделать чтобы она растягивалась прямо от низа шапки сайта до подвала, не перекрывая картинку в шапке?

#5 Koderhan

Koderhan

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

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

Отправлено 20 Февраль 2013 - 11:16

Просмотр сообщенияЕлена1 (20 Февраль 2013 - 11:01) писал:

По п.7:
Мо вопрос был как раз не о фоновой картинке в центре сайта, а о фоновой картинке по бокам сайта.
Ваш ответ насколько я поняла относится к растяжению картинки в центральной части сайта. Но все равно, т.к. вещь полезная попробовала внести предлагаемые изменения

#cpages  {
  background: url({ASSETS_IMAGES_PATH}cpage-top-bg.jpg) repeat-y 0px 80px; /* no-repeat заменили на repeat-y*/
  padding-top: 10px;
}

но при этом  cpage-top-bg не стал вытягиваться до подвала!!! Что не так?
Фоновое изображение не может растягиваться под размеры блока.
Этот код должен был повторять изображение по оси y.

#6 Елена1

Елена1

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

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

Отправлено 20 Февраль 2013 - 11:53

С вопросами 1 и 2 разобрались. Остались вопросы:

3. В теме Сияние есть картинка content_home_bg. Она по умолчанию белого цвета. Вроде по смыслу эта картинка должна заполнять собой контентную часть страницы. Но  на деле этого не происходит. Для эксперимента поменяла ее цвет на другой, но при отображении сайта ничего не изменилось. Как сделать чтобы она реально отображалась как фон контентной части?

4. По вашей рекомендации изменила блоки

body {
  font-family: Helvetica, Arial, sans-serif;
   background: url({ASSETS_IMAGES_PATH}background.jpg)
}

и
.content_page {
  background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 710px 71px;
  backgrounf-color: #f8dfda;
  overflow:hidden;
  padding-bottom: 2em;
  margin-bottom: -1 em ;
}

Но почему то картинка background.jpg заполнила собой только подвал сайта. Как сделать чтобы она начиналась от header_page???
А цвет #f8dfda который я задала для content_page я тоже нигде не увидела на странице. Что не так?
5. Если я хочу чтобы шапка сайта уменьшилась на 10 пикселей и соответственно все остальные блоки, которые идут после нее поднялись вверх на 10 пикселей. Мне достаточно просто уменьшить высоту картинки header_page в графическом редакторе на 10 пикселей или нужно еще что-то подкрутить?
6. По вопросу 6 не удалось вставить картинку чтобы отображась слева и справа. При вставке картинки по вашей рекомещации (см. п4) картинка только в подвале сайта отображается.
7. Если заменить блок
#cpages  {
  background: url(http://design.dollse...page-top-bg.jpg) repeat-y 0px 80px;
  padding-top: 10px;
}
то картинка cpage-top-bg.jpg начинается выше header_page (перекрывает ее) и повторяется до подвала, как сделать чтобы она не перекрывала картинку header_page )то есть либо начиналась сразу под ней либо чтобы та часть что выше перекрывалась header_page.

#7 miyako

miyako

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

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

Отправлено 20 Февраль 2013 - 12:27

Просмотр сообщенияЕлена1 (20 Февраль 2013 - 11:53) писал:

С вопросами 1 и 2 разобрались. Остались вопросы:

3. В теме Сияние есть картинка content_home_bg. Она по умолчанию белого цвета. Вроде по смыслу эта картинка должна заполнять собой контентную часть страницы. Но  на деле этого не происходит. Для эксперимента поменяла ее цвет на другой, но при отображении сайта ничего не изменилось. Как сделать чтобы она реально отображалась как фон контентной части?


Где именно это картинка? В каких стилях она прописана? Объясните по подробнее. А лучше укажите class или id

#8 Елена1

Елена1

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

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

Отправлено 20 Февраль 2013 - 12:38

В итоге кое с чем удалось разобраться самой. Все вопросы свелись к следующим:
1. добавила фоновую картинку background.jpg вот таким образом
body {
  font-family: Helvetica, Arial, sans-serif;
   background: url({ASSETS_IMAGES_PATH}background.jpg)
}

и в блоке wrapper закоментила заливку белым цветом (так как иначе картинка только в подвале появлялась а в центральной части перекрывалась белым)

#wrapper {
  /*background-color:#fff;*/
  padding-bottom: 10px;
}

После этих манипуляций получили см. картинку внизу.
Вопросы:
1) Как сделать, чтобы фон центральной части стал белым? В этом вопросе под центральной частью имею в виду часть по вертикали начиная от картинки-полосы (которая сейчас отображается) и заканчивая верхом подвала, а по горизонтали начиная от левого края картинки-полосы и заканчивая правым краем
2) Как сделать, чтобы картинка-полоса (называю ее так потому что не знаю то ли это content_top_bg то ли  cpage_top_bg) растянулась вниз до верха подвала, НО ПРИ ЭТОМ ЧТОБЫ ВЕРХНЯЯ ЕЕ ЧАСТЬ ОСТАЛАСЬ ГДЕ СЕЙЧАС (т.е. не перекрывала header_page)
3) Если я хочу чтобы шапка сайта уменьшилась на 10 пикселей и соответственно все остальные блоки, которые идут после нее поднялись вверх на 10 пикселей. Мне достаточно просто уменьшить высоту картинки header_page в графическом редакторе на 10 пикселей или нужно еще что-то подкрутить?


Изображение

#9 Koderhan

Koderhan

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

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

Отправлено 20 Февраль 2013 - 16:16

Цитата

1) Как сделать, чтобы фон центральной части стал белым? В этом вопросе под центральной частью имею в виду часть по вертикали начиная от картинки-полосы (которая сейчас отображается) и заканчивая верхом подвала, а по горизонтали начиная от левого края картинки-полосы и заканчивая правым краем
В файле "main.css".
Найти код:
#cpages  {
  background: url(http://design.dollsecret.ru/cpage-top-bg.jpg) no-repeat 0px 80px;
  padding-top: 10px;
}
Заменить:

#cpages  {
  padding-top: 10px;
  background-color: white;
  margin-bottom: -10px;
  border-radius: 10px 10px 0px 0px;
}

Цитата

3) Если я хочу чтобы шапка сайта уменьшилась на 10 пикселей и соответственно все остальные блоки, которые идут после нее поднялись вверх на 10 пикселей. Мне достаточно просто уменьшить высоту картинки header_page в графическом редакторе на 10 пикселей или нужно еще что-то подкрутить?
Нужно еще изменить высоту логотипа.
Можно поменять значения в коде.
#logo {
  height: 134px;
}


#10 Елена1

Елена1

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

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

Отправлено 20 Февраль 2013 - 16:45

Пожалуйста, вчитайтесь внимательнее в мои вопросы!
Вопросы 1 и 2 остаются без ответа. Попробую переформулировать, чтобы было понятнее.
Было изначально вот что (после того как подложила фоновую картинку):
Изображение

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

#cpages  {
  background: url(http://design.dollse...page-top-bg.jpg) repeat-y 0px 80px;
  padding-top: 10px;
}
у меня получилась вот такая картинка:
Изображение
То есть полоса то стала повторяться по оси y, но проблема в том что она перекрыла шапку. И теперь название страницы идет не на фоне шапки как раньше а на фоне полосы! Этого не надо!!!


Когда я по вашему совету внесла вот эти исправления
#cpages  {
  padding-top: 10px;
  background-color: #ffffff;
  margin-bottom: -10px;
  border-radius: 10px 10px 0px 0px;
}

Я получила вот что:
Изображение
Очевидно, что и это не совсем то что я хотела, теперь белый фон налазит на шапку и закрывает ее и опять название страницы идет на белом фоне а не на фоне header_page как раньше, кроме того не видна полоса с легкой заливкой (то ли  cpage_top_bg то ли content_top_bg: на глаз их сложно различить), которая должна была остаться так как белый фон хотелось сделать под ней (ну или если бы белый фон начинался сразу после header_page  не перекрывая header_page - это тоже было бы неплохо)

Надеюсь теперь я понятно объяснила суть своего вопроса.
Как заполнить либо белым цветом либо фоновой картинкой часть экрана которая начинается от нижнего края полосы  cpage_top_bg/content_top_bg или хотя бы от нижнего края header_page?  При этом header_page должна отображаться полностью и название страницы большими буквами должно идти на фоне header_page как изначально задумывалось в шаблоне!!!

#11 Елена1

Елена1

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

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

Отправлено 20 Февраль 2013 - 16:58

Вот в дополнение картинка, где черным контуром выделена та часть страницы о которой я тут целый день строчу посты (нужно залить цветом или картинкой ее и ТОЛЬКО ее):

Изображение

или же вот эту часть выделенную коричневым (и только ее) залить картинкой:
Изображение

Сообщение отредактировал Елена1: 20 Февраль 2013 - 17:03


#12 Vaccina

Vaccina

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

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

Отправлено 21 Февраль 2013 - 04:30

Вам необходимо в файле стилей main.css найти

.content_page {
	background: url("http://design.dollsecret.ru/content-page-br.gif") no-repeat scroll 710px 71px transparent;
	overflow: hidden;
	padding-bottom: 2em;
}

и заменить на

.content_page {


	background: url("http://design.dollsecret.ru/content-page-br.gif") no-repeat scroll 710px 0 #FFFFFF;
	margin-top: 70px;
	overflow: hidden;
	padding-bottom: 2em;
}

далее найти

.content_catalog {
	padding-top: 80px;
	vertical-align: top;
}

и заменить на

.content_catalog {
	padding-top: 10px;
	vertical-align: top;
}

далее найти

#cpages {
	background: url("http://design.dollsecret.ru/cpage-top-bg.jpg") no-repeat scroll 0 80px transparent;
	padding-top: 10px;
}

и заменить на

#cpages {
	background: url("http://design.dollsecret.ru/cpage-top-bg.jpg") no-repeat scroll 0 80px transparent;
	padding-top: 10px;
	position: relative;
}

далее найти и удалить

.page-headline {
	height: 81px;
	position: relative;
}

далее найти

.page-headline h1 {
	color: #772217;
	font: 30px/70px "Trebuchet MS",Arial,Helvetica,sans-serif;
	height: 2em;
	overflow: hidden;
	padding-left: 20px;
	position: absolute;
	width: 940px;
}

и заменить на

.page-headline h1 {
	color: #772217;
	font: 30px/70px "Trebuchet MS",Arial,Helvetica,sans-serif;
	height: 2em;
	overflow: hidden;
	padding-left: 20px;
	position: absolute;
	top: 0;
	width: 940px;
}


#13 Елена1

Елена1

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

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

Отправлено 21 Февраль 2013 - 15:57

Проделала указанные вами действия.
После удаления .page-headline {height: 81px;position:relative;} текст страницы наплыл на название страницы.
Кроме этого после указанных изменений опять же закрасилась белым не только та область о которой я спрашивала выше, но и часть  header_page. Что еще сделать???


В результате получилось вот что:
Изображение

#14 Stasya

Stasya

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

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

Отправлено 21 Февраль 2013 - 16:15

в файле "main.css" найдите блок
.content_page {
  background: url(http://s568151.storeland.net/content-page-br.gif) no-repeat scroll 710px 0 #FFFFFF;
  margin-top: 70 px;
  overflow:hidden; 
  padding-bottom: 2em;
}
и замените его на
.content_page {
  background: url(http://s568151.storeland.net/content-page-br.gif) no-repeat scroll 710px 0 #FFFFFF;
  margin-top: 70px;
  overflow:hidden; 
  padding-bottom: 2em;
}


#15 Елена1

Елена1

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

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

Отправлено 21 Февраль 2013 - 17:18

кажется вы по ошибке вставили два одинаковых блока!
На что заменить????????

#16 Елена1

Елена1

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

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

Отправлено 21 Февраль 2013 - 17:48

В предыдущем сообщении блок который нужно найти и блок на который нужно заменить одинаковые!
На что же все таки нужно заменить его?

#17 Stasya

Stasya

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

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

Отправлено 21 Февраль 2013 - 17:51

Нет они отличаются одним маленьким пробелом, из-за которого все не работает.

#18 Елена1

Елена1

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

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

Отправлено 21 Февраль 2013 - 18:14

Просто потрясающе! Вставила через copy-past и все заработало!!!!

И еще вопрос! Таким образом мы получили белый цвет в центральной части начиная с самого header_page (см. картинку). При этом картинка-полоска  cpage_top_bg то или content_top_bg тоже стала не видна! Как сделать чтобы о на отображалась?

Изображение

Сообщение отредактировал Елена1: 21 Февраль 2013 - 18:16


#19 Vaccina

Vaccina

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

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

Отправлено 22 Февраль 2013 - 02:09

Вам необходимо в файле стилей main.css найти

.content_page {
background: url("http://s568151.storeland.net/content-page-br.gif") no-repeat scroll 710px 0 #FFFFFF;
margin-bottom: -1em;
margin-top: 70px;
overflow: hidden;
padding-bottom: 2em;
}

и заменить на


.content_page {
	background: url("http://design.dollsecret.ru/content-page-br.gif") no-repeat scroll 710px 0px, url("http://design.dollsecret.ru/cpage-top-bg.jpg") no-repeat scroll 0 0 #FFFFFF;
	margin-bottom: -1em;
	margin-top: 70px;
	overflow: hidden;
	padding-bottom: 2em;
}






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

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