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


Как Поменять Фон В Шаблоне Техника?

Автор Sergey Ushakov, 04 янв. 2013 20:20

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

#1 Sergey Ushakov

Sergey Ushakov

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

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

Отправлено 04 Январь 2013 - 20:20

Попробовал отредактировать файл site_bg.gif, но фон меняется не полностью, только справа от товара.

И как поменять фон меню слева?

#2 Vaccina

Vaccina

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

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

Отправлено 09 Январь 2013 - 00:13

Фон левой ленты можно путем задания фона заливки в следующих классах

.span4 {
	background: none repeat scroll 0 0 #FFFFFF;
	height: 100%;
	margin-bottom: -30000px;
	padding-bottom: 30000px;
	padding-top: 15px;
}
.container-fluid {
	background: url("/web/upload/assets/images/154/153295/site_bg.gif") repeat-y scroll 41% 0 transparent;
	min-height: 100%;
	position: relative;
}
body {
	background: url("/web/upload/assets/images/154/153295/site_bg.gif") repeat-y scroll 38.5% 0 transparent;
}

данные классы находятся в файле стилей main.css раздела редактора тем. Вам необходимо задать или изменить свойство background

#3 артем

артем

    Новичок

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

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

где мне найти эти классы?  у меня нет файта main.css есть только файл main.csstemplate. в нем с помощью поиска не смог найти

#4 Vaccina

Vaccina

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

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

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

Вы можете создать данные классы в файле стилей main.csstemplate

.span4 {
		background: #FFFFFF !important;
}
.container-fluid {
		background: url("/web/upload/assets/images/154/153295/site_bg.gif") repeat-y scroll 41% 0 transparent !important;
}
body {
		background: url("/web/upload/assets/images/154/153295/site_bg.gif") repeat-y scroll 38.5% 0 transparent !important;
}

тем самым задав принудительно необходимые значения.

#5 артем

артем

    Новичок

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

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

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

#6 Koderhan

Koderhan

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

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

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

Просмотр сообщенияартем (05 Февраль 2013 - 14:50) писал:

вставил данный код в самое начало  этого файла, произошло сдвиг сайта а изменение цвета фона не произошло. можно по подробнее куда именно его вставлять
Ваше изображение site_bg.gif закрашен в серый цвет только на половину. Поэтому серый цвет применяется на половину сайта.

#7 артем

артем

    Новичок

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

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

файл перекрасил посмотрите что получилось. сайт почему-то меню оставило свой белый фон а все остальное поменялось.

#8 Vaccina

Vaccina

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

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

Отправлено 06 Февраль 2013 - 07:41

За левую панель отвечает сл.блок в разделе Редактор тем - main.css:

.site-left-col {
	background: none repeat scroll 0 0 #FFFFFF;
	float: left;
	padding: 71px 23px 63px 0;
	width: 215px;
}

#9 cecnfd

cecnfd

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

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

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

Здравствуйте. Не могли бы помочь с настройкой фона в шаблоне Техника: вот сайт: http://triplehalo.storeland.ru. Меняю site_bg, а ничего не происходит
PS: пример фона в картинкеИзображение

#10 Koderhan

Koderhan

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

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

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

Попробуйте.
В файл "main.csstemplate".
Добавить код:
.row .span4 {
	background-color: #152530;
}
.row .span8 {
	background-color: #152530;
}
.row .menu_main {
	background-color: #152530;
}
.row .menu_main ul {
	background-color: #152530;
}
.row .menu_main li {
  border-top: initial;
  border-bottom: initial;
}

#11 cecnfd

cecnfd

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

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

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

Остался белый цвет около вариантов оплаты и около видео из YouTube. Как его убрать? Также хотело бы оставить поля, как показано на моем рисунке.

#12 miyako

miyako

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

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

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

Просмотр сообщенияcecnfd (11 Февраль 2013 - 08:35) писал:

Остался белый цвет около вариантов оплаты и около видео из YouTube. Как его убрать? Также хотело бы оставить поля, как показано на моем рисунке.

Чтобы убрать цвет у вариантов оплаты - вам нужно заменить иконки с другим фоном.
Найдите в файле "bootstrap-responsive.min.css" код:
.span7 {
background: #ffffff;
text-align: left;
}
и замените на:
.span7 {
text-align: left;
}

#13 cecnfd

cecnfd

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

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

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

По прежнему остались белые места, как например на этой странице: http://triplehalo.st...ктронный-кальян
И второй вопрос, который волнует: В слайдере на главной странице (http://triplehalo.storeland.ru) при переходе на другой слайд появляется маленькая фотография слева вверху. Как ее убрать?

#14 Vaccina

Vaccina

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

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

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

Найдите в вашем файле стилей main.css

.breadcrumbs {
	background: none repeat scroll 0 0 #FFFFFF;
	padding: 20px;
	text-align: left;
}

и замените на

.breadcrumbs {
	background: #152530;
	padding: 20px;
	text-align: left;
}

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

.product-box {
	background: none repeat scroll 0 0 #FFFFFF;
	padding: 14px;
}

и замените на

.product-box {
	background: #152530;
	padding: 14px;
}

так же в вашем файле стилей nyvo.css найдите

.nivoSlider img {
	left: 0;
	position: absolute;
	top: 0;
}

и замените на

.nivoSlider img {
	left: 0;
	position: absolute;
	top: 0;
	position: relative;
	z-index: 8;
}

#15 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

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

У меня проблема.. Пытался попробовать поменять фон.. Ставил другой файл с разрешением png - не получилось. До этого ставил этот же файл, но с измененным цветом справа - рисунок какой-то испорченный. Почему-то не сохраняется также хорошо как ваш файл, всё в разводах становится, даже если заливка полностью одного цвета.
Ковырялся-ковырялся и у меня фон вообще перестал работать, хотя я, вроде бы, всё вернул как было. К сожалению не сделал бэкап шаблона, а делал другие изменения :(
Посмотрите, что тут не так?
/* CMS Home Page */
/*body { background:url("{ASSETS_IMAGES_PATH}site_bg.gif") center top;}
body { background: #000;}*/
.cms-index-index .subtitle{color:#3B362E; font-size:1.5em; font-weight:bold; padding-left:20px; padding-top:10px;}
Менял только здесь и всё.

И скажите, можно этот файл заменить файлом *.png? Чтобы серый рисунок по-красивее вставить. И можно ли на этом же файле сделать едва заметный рисунок, чтобы распространялся на левую сторону?

В этой теме описано как заливку на левую сторону вставить. А мне охота именно pattern какой-нибудь. Не просто фон. Можно сделать так?

Прошло время и заработал фон.. Я могу тут поменять название файла вообще? И он встал бы заместо старого. И левую сторону я могу тут вставить? Или её по-другому прописывать?

#16 Сake

Сake

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

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

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

Пожалуйста, сообщите вы хотите заменить полностью фон? или же оставить белый фон слева, а справа (серый) заменить? Для полной замены фона необходимо в файле стилей main.css найти 

body {
	background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat-y 38.5% 0;
}

и заменить свойство background на необходимый цвет или изображение. Далее необходимо в файл стилей добавить

.span8 {
	background: #EDEDED !important;
}

в данном случае задан цвет. Если вы будете использовать фон в виде однородного цвета, то нужно в данном классе заменить цвет (#EDEDED) на необходимый. Если же вы будете использовать изображение, то необходимо задать данный класс как 

.span8 {
	background: transparent !important;
}

Для изменения левой панели (меню, логотип). Необходимо добавить класс

.span4 {
	background: #FFFFFF !important;
}

и поступить с ним аналогично классу (span8) или как-то по другому.

#17 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

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

Просмотр сообщенияСake (20 Сентябрь 2013 - 05:28) писал:

Пожалуйста, сообщите вы хотите заменить полностью фон? или же оставить белый фон слева, а справа (серый) заменить? Для полной замены фона необходимо в файле стилей main.css найти

body {
background: url("{ASSETS_IMAGES_PATH}site_bg.gif") repeat-y 38.5% 0;
}

и заменить свойство background на необходимый цвет или изображение. Далее необходимо в файл стилей добавить

.span8 {
background: #EDEDED !important;
}

в данном случае задан цвет. Если вы будете использовать фон в виде однородного цвета, то нужно в данном классе заменить цвет (#EDEDED) на необходимый. Если же вы будете использовать изображение, то необходимо задать данный класс как

.span8 {
background: transparent !important;
}

Для изменения левой панели (меню, логотип). Необходимо добавить класс

.span4 {
background: #FFFFFF !important;
}

и поступить с ним аналогично классу (span8) или как-то по другому.

Тут понятно... Но сейчас всё полностью обдумал, вопрос более сложный. Как цвета кнопок менять я уже узнал, сейчас узнал как поменять фон (надеюсь).

Вот, посмотрите, можно ли это сделать:
1. Тут образец, без тени (которую хотелось бы добавить к каждому блоку) и пометок:


2. Тут отметки


3. И тут отметки


У меня главный вопрос. Затронут ли эти изменения "мобильную версию" и если затронут - как. Если всё будет соответственно этой - не вопрос. Если останутся серые рамки в мобильной версии - и хорошо, пусть будут. Главное, чтобы белиберды не было. Хочется узнать можно ли всё это сделать и не придёт ли в негодность мобильная версия. Всё.

Ну и, конечно, доделать всё нужно.

Сообщение отредактировал Andrew S.: 21 Сентябрь 2013 - 02:01

#18 Vaccina

Vaccina

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

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

Отправлено 21 Сентябрь 2013 - 04:44

Мобильная версия в непригодность не придет, так как вы не меняете размеры блоков и не делаете что-то такого, что могло бы повлиять на подобное поведение. Вы можете добавить в файл стилей main.css следующие правила

body {
	background: url({ASSETS_IMAGES_PATH}bg.png) repeat left top !important;
}
#main > .span8 {
	background: transparent !important;
}
#main > .span4 {
	margin: 21px -3px 0 3px;
	box-shadow: 0 0 3px #000000;
}
#main > .span8 > .row-fluid > .span7 {
	box-shadow: 0 0 3px #000000;
}

изображение "bg.png" это ваш фоновый паттерн.

#19 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

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

Просмотр сообщенияVaccina (21 Сентябрь 2013 - 04:44) писал:

Мобильная версия в непригодность не придет, так как вы не меняете размеры блоков и не делаете что-то такого, что могло бы повлиять на подобное поведение. Вы можете добавить в файл стилей main.css следующие правила

body {
background: url({ASSETS_IMAGES_PATH}bg.png) repeat left top !important;
}
#main > .span8 {
background: transparent !important;
}
#main > .span4 {
margin: 21px -3px 0 3px;
box-shadow: 0 0 3px #000000;
}
#main > .span8 > .row-fluid > .span7 {
box-shadow: 0 0 3px #000000;
}

изображение "bg.png" это ваш фоновый паттерн.
СПАСИБО!!!!!!!!!!!!!!!!!!!! :rolleyes: :rolleyes: :rolleyes: :rolleyes: :rolleyes: Подскажите еще как довести до ума:

1. Логотип почему-то сильно смещается вниз и отступ слева совсем маленький. Можно его увеличить? Или это из-за добавленной тени уменьшение произошло? Как лучше увеличить отступ? А то совсем маленький...


2. Как внизу левого блока сделать такой же отступ как вверху. Чтобы все края во всех режимах были оторваны. И тут также виден очень уменьшенный после проведенной сайтогической операции отступ.


3. Почему-то смещен вниз (не помню, был ли он вровень с левым) правый блок. Как его на один уровень поставить?


Смотрел сейчас старые фото. Да, очень сильно почему-то левый край ушел в никуда :(

4. Как ещё уменьшить отступ после "Магазин ..."? До горизонтальной линии. Чересчур большой..

Сообщение отредактировал Andrew S.: 21 Сентябрь 2013 - 20:53

#20 Andrew S.

Andrew S.

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

  • Пользователи
  • PipPipPipPip
  • 1 382 сообщений
  • ГородKhabarovsk

Отправлено 22 Сентябрь 2013 - 13:41

Вы про меня не забыли?

Я убрал тень. Попробую без нее. Остались те же вопросы. В предыдущем сообщении.
/* Новый фон, убирание толстых границ, снижение левого блока" */
body {background: url({ASSETS_IMAGES_PATH}Best_grey.jpg) repeat left top !important;}
#main > .span8 {background: transparent !important;}
#main > .span4 {margin: 21px -3px 0 3px;}
#main > .span8 > .row-fluid > .span7 {}

Сообщение отредактировал Andrew S.: 22 Сентябрь 2013 - 13:50

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


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

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

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