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


Как Сделать Разными Фоны Шапки, Общего Тела И Подвала?


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

#1 kislovodchanin

kislovodchanin

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

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

Отправлено 21 Июль 2014 - 23:27

Хотелось бы сделать плавный переход в картинках от шапки, к подвалу.
К примеру в шапке у меня островок с деревьями,
в теле вода, то есть река.
А в подвале уже другой берег реки к примеру?

#2 Сake

Сake

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

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

Отправлено 21 Июль 2014 - 23:46

Для этого вам необходимо использовать изображения (если они у вас имееются) которые позволят реализовать это.
Попробуйте обратится с данным вопросом к дизайнеру.

#3 kislovodchanin

kislovodchanin

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

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

Отправлено 22 Июль 2014 - 00:00

Просмотр сообщенияСake (21 Июль 2014 - 23:46) писал:

Для этого вам необходимо использовать изображения (если они у вас имееются) которые позволят реализовать это.
Попробуйте обратится с данным вопросом к дизайнеру.
Изображения есть, вопрос куда их вставлять что бы получить необходимый эффект?

#4 Сake

Сake

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

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

Отправлено 22 Июль 2014 - 00:18

Стили зависят от изображений. Можно использовать примерно следующий код в файле стилей

#header-fluid {
  background: url("{ASSETS_IMAGES_PATH}/bg-top.png") no-repeat fixed center top #fafafa !important;
}
#content-fluid {
  background: url("{ASSETS_IMAGES_PATH}/bg-center.png") no-repeat fixed center top #fafafa !important;
}
#footer-fluid {
  background: url("{ASSETS_IMAGES_PATH}/bg-bottom.png") no-repeat fixed center bottom #fafafa !important;
}

где каждое изображение "bg-top.png", "bg-center.png", "bg-bottom.png" это отдельная часть общего фона. Так же можно попробовать использовать полноценное фиксированное изображение. Стиль примет вид

body {
  background: url("{ASSETS_IMAGES_PATH}/bg.png") no-repeat fixed center top #fafafa !important;
}


#5 kislovodchanin

kislovodchanin

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

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

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

Просмотр сообщенияСake (22 Июль 2014 - 00:18) писал:

Стили зависят от изображений. Можно использовать примерно следующий код в файле стилей
 #header-fluid { background: url("{ASSETS_IMAGES_PATH}/bg-top.png") no-repeat fixed center top #fafafa !important; } #content-fluid { background: url("{ASSETS_IMAGES_PATH}/bg-center.png") no-repeat fixed center top #fafafa !important; } #footer-fluid { background: url("{ASSETS_IMAGES_PATH}/bg-bottom.png") no-repeat fixed center bottom #fafafa !important; } 
где каждое изображение "bg-top.png", "bg-center.png", "bg-bottom.png" это отдельная часть общего фона. Так же можно попробовать использовать полноценное фиксированное изображение. Стиль примет вид
 body { background: url("{ASSETS_IMAGES_PATH}/bg.png") no-repeat fixed center top #fafafa !important; } 

Спасибо.
Попробую использовать данный код, по результатам эксперимента отпишусь

#6 kislovodchanin

kislovodchanin

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

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

Отправлено 23 Март 2015 - 18:35

Просмотр сообщенияСake (22 Июль 2014 - 00:18) писал:

Стили зависят от изображений. Можно использовать примерно следующий код в файле стилей

#header-fluid {
background: url("{ASSETS_IMAGES_PATH}/bg-top.png") no-repeat fixed center top #fafafa !important;
}
#content-fluid {
background: url("{ASSETS_IMAGES_PATH}/bg-center.png") no-repeat fixed center top #fafafa !important;
}
#footer-fluid {
background: url("{ASSETS_IMAGES_PATH}/bg-bottom.png") no-repeat fixed center bottom #fafafa !important;
}

где каждое изображение "bg-top.png", "bg-center.png", "bg-bottom.png" это отдельная часть общего фона. Так же можно попробовать использовать полноценное фиксированное изображение. Стиль примет вид

body {
background: url("{ASSETS_IMAGES_PATH}/bg.png") no-repeat fixed center top #fafafa !important;
}

Доброго времени суток.
А подскажите пожалуйста, какого размера делать изображение, если использовать стиль вот такого вида?
body {
  background: url("{ASSETS_IMAGES_PATH}/bg.png") no-repeat fixed center top #fafafa !important;
}
И не отразится ли установка на адаптивности дизайна, то есть будет ли картинка сжиматься до размера экрана мобильных устройств?
Буду признателен за ответ.

#7 Vaccina

Vaccina

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

  • Модераторы
  • 23 805 сообщений

Отправлено 01 Апрель 2015 - 06:35

Если фон будет фиксированный то стандартный максимальный размер используйте 1920х1080.
Чтобы фон был резиновым пропорционально, кроме написания самого фона, пропишите стиль background-size: cover;
Пример:
body {
  background: url("{ASSETS_IMAGES_PATH}/bg.png") no-repeat fixed center top #fafafa !important;
  background-size: cover;
}


#8 kislovodchanin

kislovodchanin

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

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

Отправлено 02 Апрель 2015 - 08:14

Просмотр сообщенияVaccina (01 Апрель 2015 - 06:35) писал:

Если фон будет фиксированный то стандартный максимальный размер используйте 1920х1080.
Чтобы фон был резиновым пропорционально, кроме написания самого фона, пропишите стиль background-size: cover;
Пример:
body {
background: url("{ASSETS_IMAGES_PATH}/bg.png") no-repeat fixed center top #fafafa !important;
background-size: cover;
}

Доброго времени суток!
Поясните мне пожалуйста, для тех кто в танке.
что, за что отвечает в данном файле стилей.
body {
  background: url("{ASSETS_IMAGES_PATH}bg1.png") no-repeat fixed center top, url("{ASSETS_IMAGES_PATH}bg2.png") no-repeat fixed center bottom, url("{ASSETS_IMAGES_PATH}bg3.png") repeat-y fixed center top;
  background-size: cover;
}
Желательно подробно, как младенцу.
За ранее спасибо.

#9 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 02 Апрель 2015 - 09:35

Просмотр сообщенияkislovodchanin (02 Апрель 2015 - 08:14) писал:

Доброго времени суток!
Поясните мне пожалуйста, для тех кто в танке.
что, за что отвечает в данном файле стилей.
body {
background: url("{ASSETS_IMAGES_PATH}bg1.png") no-repeat fixed center top, url("{ASSETS_IMAGES_PATH}bg2.png") no-repeat fixed center bottom, url("{ASSETS_IMAGES_PATH}bg3.png") repeat-y fixed center top;
background-size: cover;
}
Желательно подробно, как младенцу.
За ранее спасибо.
Здравствуйте. Код
background: url("{ASSETS_IMAGES_PATH}bg1.png") no-repeat fixed center top, url("{ASSETS_IMAGES_PATH}bg2.png") no-repeat fixed center bottom, url("{ASSETS_IMAGES_PATH}bg3.png") repeat-y fixed center top;
отвечает за изображения основного фона, а
background-size: cover;
растягивает изображение на весь фон.

#10 kislovodchanin

kislovodchanin

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

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

Отправлено 05 Апрель 2015 - 01:55

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

#11 Cupuyc

Cupuyc

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

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

Отправлено 05 Апрель 2015 - 10:40

Просмотр сообщенияkislovodchanin (05 Апрель 2015 - 01:55) писал:

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

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css найдите код:
#header-logo a{display:table-cell;vertical-align:middle;text-align:center; text-decoration: none;font: normal 18px 'Open Sans',Helvetica,Arial;color: #da3b44;font-weight: 600;}

Замените его на:
#header-logo a{display:table-cell;vertical-align:middle;text-align:center!important; text-decoration: none;font: normal 18px 'Open Sans',Helvetica,Arial;color: #da3b44;font-weight: 600;}


#12 kislovodchanin

kislovodchanin

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

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

Отправлено 05 Апрель 2015 - 12:53

Просмотр сообщенияCupuyc (05 Апрель 2015 - 10:40) писал:

Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css найдите код:
#header-logo a{display:table-cell;vertical-align:middle;text-align:center; text-decoration: none;font: normal 18px 'Open Sans',Helvetica,Arial;color: #da3b44;font-weight: 600;}

Замените его на:
#header-logo a{display:table-cell;vertical-align:middle;text-align:center!important; text-decoration: none;font: normal 18px 'Open Sans',Helvetica,Arial;color: #da3b44;font-weight: 600;}

Всё получилось, спасибо.

#13 kislovodchanin

kislovodchanin

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

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

Отправлено 14 Апрель 2015 - 21:15

Доброго времени суток.
Столкнулся с проблемой, нужно сделать так, что бы у каждого сформированного заказа (нового) было определённое время жизни, до оплаты.
Например, создал юзверь заказ, а оплачивать его как бы не летит, теряя тапки.
Так вот, хотелось бы, что бы такой заказ жил 24 часа с момента оформления, а после автоматом удалялся, с восстановлением остатков и предыдущего номера заказа.
Реально ли вообще сделать подобное?
Заранее благодарен....

#14 Vaccina

Vaccina

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

  • Модераторы
  • 23 805 сообщений

Отправлено 15 Апрель 2015 - 01:16

К сожалению, подобное реализовать нельзя, так как данные изменения касаются непосредственно административной панели сайта.

#15 kislovodchanin

kislovodchanin

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

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

Отправлено 15 Апрель 2015 - 06:41

Просмотр сообщенияVaccina (15 Апрель 2015 - 01:16) писал:

К сожалению, подобное реализовать нельзя, так как данные изменения касаются непосредственно административной панели сайта.
Спасибо за ответ.
Жаль, что подобное не возможно((( мне очень бы пригодились, данная возможность.




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

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