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


Проблемы С Фоном

Автор SergeyV, 04 окт. 2011 08:05

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

#1 SergeyV

SergeyV

    Новичок

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

Отправлено 04 Октябрь 2011 - 08:05

Добрый день!

Проявилась следующая проблема с фоном, снизу страницы почему то страница выглядит будто "брюки коротки":


http://hobbycon.ru/p...u/page/Доставка

А здесь вот как:
http://hobbycon.ru/p...истемы-оплаты-1

Здесь же половина страницы белая, затем идет мой фон:
http://hobbycon.ru/page/Oplata-Qiwi-1

#2 Vaccina

Vaccina

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

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

Отправлено 04 Октябрь 2011 - 19:45

Это потому - что у вас в файле стилей main.css в классе 

#contentWrap {
	background: url("http://img.storeland.ru/web/upload/assets/images/19/18868/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}

прописан repeat-x замените его на repeat

так же в этом же классе задайте свойство min-height: 800px;

#3 SergeyV

SergeyV

    Новичок

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

Отправлено 06 Октябрь 2011 - 14:56

Просмотр сообщенияVaccina (04 Октябрь 2011 - 19:45) писал:

Это потому - что у вас в файле стилей main.css в классе 

#contentWrap {
	background: url("http://img.storeland.ru/web/upload/assets/images/19/18868/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}

прописан repeat-x замените его на repeat

так же в этом же классе задайте свойство min-height: 800px;

Спасибо сработало.


Заодно подскажите как мне изменить цвет текста контактов и сдвинуть их немного правее

"+7 (906) 173-65-37
24/7: ihobbycon@gmail.com
Статус 271366833"

#4 Vaccina

Vaccina

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

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

Отправлено 07 Октябрь 2011 - 03:32

Для контактов вам понадобиться класс 

#contactInfo {
	font-size: 1.2em;
	left: 330px;
	position: absolute;
	top: 5px;
}

данный класс находиться в файле стилей main.css

Для его перемещения изменяйте свойства top и left. Для задания цвета текста добавьте свойство color: #fff;

#5 katty_k

katty_k

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

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

Отправлено 22 Октябрь 2011 - 22:46

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

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

  • Безымянный 6.jpg

#6 katty_k

katty_k

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

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

Отправлено 22 Октябрь 2011 - 22:54

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

#7 Vaccina

Vaccina

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

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

Отправлено 24 Октябрь 2011 - 15:16

Вам нужно установить соответствующий фон. Сейчас у вас это сделано так 

<body style="background:url("http://files.storeland.ru/web/upload/sitefiles/1/48/47230/fon.jpg") repeat-xy center center;">

но тут есть ошибка с кавычками. Замените эту строчку на 

<body style="background:url('http://files.storeland.ru/web/upload/sitefiles/1/48/47230/fon.jpg') repeat center center;">

Для задания фона корзине - найдите в файле стилей main.css 

#cartInfo {
	bottom: 6px;
	font-size: 13px;
	position: absolute;
	right: 10px;
	white-space: nowrap;
}

далее замените на 

#cartInfo {
	background: #FFFFFF;
	bottom: 6px;
	font-size: 13px;
	position: absolute;
	right: 10px;
	white-space: nowrap;
}

Для изменения цвета вам нужно найти класс 

h4, h4 a {
	color: #BE9E4C;
	font-size: 1.1666em;
	font-weight: normal;
	line-height: 1.4285em;
	margin: 1.4285em 0 0.7142em;
}

далее изменить свойство color на необходимый цвет.

#8 katty_k

katty_k

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

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

Отправлено 25 Октябрь 2011 - 07:38

А можно ли перенести корзину ниже? И как поменять иконку корзины? Подскажите пожалуйста

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

  • Безымянный 1.jpg

#9 Vaccina

Vaccina

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

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

Отправлено 25 Октябрь 2011 - 15:30

Для управления расположением блока корзины вам нужен класс 

#cartInfo {
	bottom: 6px;
	font-size: 13px;
	position: absolute;
	right: 10px;
	white-space: nowrap;
}

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

для изменения местоположения используйте свойства bottom и right. можно задавать так же отрицательные значения.

Для изменения иконки можно попробовать изменить графический файл orderIcons.png который находиться в редакторе тем. Вам нужно его скачать и изменить. В данном изображении находиться несколько иконок для разных событий. Вам нужно менять только ту что отвечает за иконку корзины. Изображение можно наложить поверх существующего, и размеры должны быть 36px на 36px

#10 katty_k

katty_k

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

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

Отправлено 25 Октябрь 2011 - 16:59

Спасибо, все получилось, помогите ще пожалуйста облазила весь инет не могу понять как сделать чтобы фон был, а посередине как бы листочек белой бумаги, т.е. весь текст только на белом, а по краям получается виден как бы из под него фон? Не знаю как попонятнее объяснить....

#11 Vaccina

Vaccina

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

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

Отправлено 26 Октябрь 2011 - 12:16

Не совсем понимаю что вы хотите. Думаю вам будет лучше прибегнуть к платным услугам по созданию дизайна - где вы можете предложить свой макет или создать новый. Или же каким то образом полностью обрисовать всю картину вашего сайта.

#12 katty_k

katty_k

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

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

Отправлено 28 Октябрь 2011 - 08:25

Вот например фон http://nutritionsport54.ru фон темный, но весь текст на светлом фоне, как бы наложение одного на другое. Можно ли такое сделать в шаблоне Мокко? Заранее, спасибо.

#13 Vaccina

Vaccina

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

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

Отправлено 28 Октябрь 2011 - 19:38

Как пример можно сделать так:

В файле стилей main.css найти 

#contentWrap {
	background: url("http://img.storeland.ru/web/upload/assets/images/10/9976/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}

заменить на 

#contentWrap {
	clear: both;
}

далее найти 

body {
	background-color: #FFFFFF;
	color: #666666;
	font-family: "Lucida Grande","Trebuchet MS",Verdana,Arial,sans-serif;
	font-size: 75%;
	line-height: 1.6666em;
}

заменить на 

body {
	background-color: #000;
	color: #666666;
	font-family: "Lucida Grande","Trebuchet MS",Verdana,Arial,sans-serif;
	font-size: 75%;
	line-height: 1.6666em;
}

далее найти 

#content {
	margin: 0 auto;
	width: 960px;
}

заменить на 

#content {
	margin: 0 auto;
	width: 960px;
	background-color: #fff;
}

#14 katty_k

katty_k

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

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

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

Просмотр сообщенияVaccina (28 Октябрь 2011 - 19:38) писал:

Как пример можно сделать так:

В файле стилей main.css найти 

#contentWrap {
	background: url("http://img.storeland.ru/web/upload/assets/images/10/9976/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}

заменить на 

#contentWrap {
	clear: both;
}

далее найти 

body {
	background-color: #FFFFFF;
	color: #666666;
	font-family: "Lucida Grande","Trebuchet MS",Verdana,Arial,sans-serif;
	font-size: 75%;
	line-height: 1.6666em;
}

заменить на 

body {
	background-color: #000;
	color: #666666;
	font-family: "Lucida Grande","Trebuchet MS",Verdana,Arial,sans-serif;
	font-size: 75%;
	line-height: 1.6666em;
}

далее найти 

#content {
	margin: 0 auto;
	width: 960px;
}

заменить на 

#content {
	margin: 0 auto;
	width: 960px;
	background-color: #fff;
}
Почему то не получилось, я бы хотела, чтобы тело сайта было такое же как и шапка, а сам фон FFFAFA.
Cайт http://cosmetic-deluxe.ru/

#15 Vaccina

Vaccina

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

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

Отправлено 20 Февраль 2012 - 22:49

В файле стилей найдите 
body {
	background-color: #FFFAFA;
	color: #666666;
	font-family: "Lucida Grande","Arial",Verdana,Arial,sans-serif;
	font-size: 75%;
	line-height: 1.6666em;
}

замените на 

body {
	background: url("http://files.storeland.ru/web/upload/sitefiles/1/88/87648/c840d2d74c3f.gif") repeat scroll 0 0 transparent;
	color: #666666;
	font-family: "Lucida Grande","Arial",Verdana,Arial,sans-serif;
	font-size: 75%;
	line-height: 1.6666em;
}

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

#content {
	margin: 0 auto;
	width: 1040px;
}

замените на 

#content {
	background: none repeat scroll 0 0 #FAFAFA;
	margin: 0 auto;
	width: 1040px;
}

#16 katty_k

katty_k

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

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

Отправлено 21 Февраль 2012 - 09:06

Спасибо, помогите еще пожалуйста как можно скруглить углы, высылаю скриншот:
Безымянный 1.jpg
Сайт: http://cosmetic-deluxe.ru/
Извините, ровно не получилось нарисовать:) И можно ли залить левую часть основного фона, я отчертила ее полоской в другой цвет?

2. посдкажите пожалуйста как можно установить панель выбора производителя слева так же, как на этом сайте: http://nutritionsport54.ru/
Спасибо.

#17 Vaccina

Vaccina

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

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

Отправлено 21 Февраль 2012 - 21:37

Для закругления углов используйте свойство border-radius

Пример 

#content {
	background: none repeat scroll 0 0 #FAFAFA;
	margin: 0 auto;
	width: 1040px;
	border-radius: 5px 5px 5px 5px;
}

Для заливки левого блока в отдельный цвет используйте класс

#leftMenuBlockWrap {
	padding: 1em 0 40px;
	vertical-align: top;
	width: 170px;
}

добавив свойство background с необходимым цветом.

Цитата

2. посдкажите пожалуйста как можно установить панель выбора производителя слева так же, как на этом сайте: http://nutritionsport54.ru/

Данный вопрос рассматривался в следующей теме форума

http://forum.storela...ndpost__p__6772

#18 katty_k

katty_k

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

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

Отправлено 22 Февраль 2012 - 06:15

Просмотр сообщенияVaccina (21 Февраль 2012 - 21:37) писал:

Для заливки левого блока в отдельный цвет используйте класс

#leftMenuBlockWrap {
	padding: 1em 0 40px;
	vertical-align: top;
	width: 170px;
}

добавив свойство background с необходимым цветом.
1. Если я закрашиваю левый блок в отдельный цвет, то тогда у меня углы с этой стороны опять острые получаются, пробовала добавить свойство border-radius, но ничего не меняется... Посмотрите пожалуйста http://cosmetic-deluxe.ru/

#19 Vaccina

Vaccina

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

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

Отправлено 22 Февраль 2012 - 21:37

Цитата

1. Если я закрашиваю левый блок в отдельный цвет, то тогда у меня углы с этой стороны опять острые получаются, пробовала добавить свойство border-radius, но ничего не меняется...

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

#leftMenuBlockWrap {
	border-radius: 4px 4px 4px 4px;
	padding: 1em 0 40px;
	vertical-align: top;
	width: 170px;
}

4 значения (4px) заданы для каждой стороны блока. Можно использовать значение 0 для отдельного угла.
Обратно в Изменение общей стилистики


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

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

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