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


Вместо Белого Фона Изображение


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

#1 vanyushka

vanyushka

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

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

Отправлено 06 Август 2014 - 20:03

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

#2 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 06 Август 2014 - 20:13

Просмотр сообщенияipodushkin (06 Август 2014 - 20:03) писал:

Странным образом не нашел здесь подобную тему. Нужно чтобы в фоне было изображение, которое бы повторялось (было замощено). Спасибо.
в файле main.css найдите код
body {
font-size: 81%;
line-height: 1.6666em;
font-family: "MyriadPro-Regular";
background-color: #FFF;
color: #666;
}
и замените в нем часть
background-color: #FFF;
  на
background:url({ASSETS_IMAGES_PATH}bg.jpg)
так же загрузите себе желаемое изображение и назовите его bg.jpg
Для того,чтобы оно замостилось плиткой,изображение должно быть не очень большим.

#3 vanyushka

vanyushka

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

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

Отправлено 06 Август 2014 - 20:42

Просмотр сообщенияAnnaM (06 Август 2014 - 20:13) писал:

в файле main.css найдите код
body {
font-size: 81%;
line-height: 1.6666em;
font-family: "MyriadPro-Regular";
background-color: #FFF;
color: #666;
}
и замените в нем часть
background-color: #FFF;
  на
background:url({ASSETS_IMAGES_PATH}bg.jpg)
так же загрузите себе желаемое изображение и назовите его bg.jpg
Для того,чтобы оно замостилось плиткой,изображение должно быть не очень большим.

Вот такая ситуация, помогите залить содержимое в рамке белым цветом:
Изображение

#4 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 06 Август 2014 - 20:48

Просмотр сообщенияipodushkin (06 Август 2014 - 20:42) писал:

Вот такая ситуация, помогите залить содержимое в рамке белым цветом:
Изображение
В файле main.css найдите код
.goodsListItemBlock {
height: 300px;
margin: 5px;
overflow: hidden;
position: relative;
border: ridge;
}

и замените его на следующий
.goodsListItemBlock {
height: 300px;
margin: 5px;
overflow: hidden;
position: relative;
border: ridge;
background-color: white;
}


#5 vanyushka

vanyushka

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

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

Отправлено 06 Август 2014 - 21:17

Спасибо.
Еще прошу помочь сделать белый фон для меню, слайдера, товаров. Чтобы границы белого фона были равны границе левой и правой стороны шапки. Как белый лист лежаший на фоне. И хотелось бы тоже самое на всех страницах сайта, так как фон мешает и смотреть, и читать информацию.

#6 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 06 Август 2014 - 21:47

Просмотр сообщенияipodushkin (06 Август 2014 - 21:17) писал:

Спасибо.
Еще прошу помочь сделать белый фон для меню, слайдера, товаров. Чтобы границы белого фона были равны границе левой и правой стороны шапки. Как белый лист лежаший на фоне. И хотелось бы тоже самое на всех страницах сайта, так как фон мешает и смотреть, и читать информацию.
1. В файле main.css найдите код
#contentWrap {
clear: both;
background: url(http://design.a-dart.ru/contentWrap_bg.jpg) repeat-x left bottom;
}
и замените на этот
#contentWrap {
clear: both;
}

2. в файле main.css замените
#leftMenuBlock {
width: 160px;
margin: 0 20px 0 0;
}
на это
#leftMenuBlock {
width: 170px;
margin: 0 20px 0 0;
background-color: white;
}

3. в шаблоне "Страница" найдите код
<!-- Контент страницы -->
<div class="htmlDataBlock">
{PAGE_CONTENT}
</div>
и замените его на следующий
<!-- Контент страницы -->
<div class="htmlDataBlock" {% IF index_page %} style="background-color: white"{% ENDIF %}>
{PAGE_CONTENT}
</div>


#7 vanyushka

vanyushka

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

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

Отправлено 06 Август 2014 - 22:02

Просмотр сообщенияAnnaM (06 Август 2014 - 21:47) писал:

1. В файле main.css найдите код
#contentWrap {
clear: both;
background: url(http://design.a-dart.ru/contentWrap_bg.jpg) repeat-x left bottom;
}
и замените на этот
#contentWrap {
clear: both;
}

2. в файле main.css замените
#leftMenuBlock {
width: 160px;
margin: 0 20px 0 0;
}
на это
#leftMenuBlock {
width: 170px;
margin: 0 20px 0 0;
background-color: white;
}

3. в шаблоне "Страница" найдите код
<!-- Контент страницы -->
<div class="htmlDataBlock">
{PAGE_CONTENT}
</div>
и замените его на следующий
<!-- Контент страницы -->
<div class="htmlDataBlock" {% IF index_page %} style="background-color: white"{% END IF %}>
{PAGE_CONTENT}
</div>

Спасибо.
Когда делаю №3 вылезает красное предупреждение: "Ошибка компиляции шаблона. Не закрытый тег IF". Убрал пробел между END и IF - все сохранилось. Надеюсь сделал правильно.

Выделилось белым меню, но все остальное как и было.

#8 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 06 Август 2014 - 22:12

Просмотр сообщенияipodushkin (06 Август 2014 - 22:02) писал:

Спасибо.
Когда делаю №3 вылезает красное предупреждение: "Ошибка компиляции шаблона. Не закрытый тег IF". Убрал пробел между END и IF - все сохранилось. Надеюсь сделал правильно.

Выделилось белым меню, но все остальное как и было.
В шаблоне "Страница" найдите
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
  <div style="padding-top:1em;" class="htmlDataBlock">
	{PAGE_SEO_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
и замените на
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
  <<div style="padding-top:1em;{% IF index_page %}background-color: white;{% ENDIF %}" class="htmlDataBlock">
	{PAGE_SEO_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Полное SEO-описание -->


#9 vanyushka

vanyushka

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

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

Отправлено 06 Август 2014 - 22:28

Просмотр сообщенияAnnaM (06 Август 2014 - 22:12) писал:

В шаблоне "Страница" найдите
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
<div style="padding-top:1em;" class="htmlDataBlock">
{PAGE_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
и замените на
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
<<div style="padding-top:1em;{% IF index_page %}background-color: white;{% ENDIF %}" class="htmlDataBlock">
{PAGE_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->

Не получается(

#10 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 06 Август 2014 - 22:33

Просмотр сообщенияipodushkin (06 Август 2014 - 22:28) писал:

Не получается(
в шаблоне "страница" найдите код
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
  <<div style="padding-top:1em;{% IF index_page %}background-color: white;{% ENDIF %}" class="htmlDataBlock">
		{PAGE_SEO_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
и аккуратно замените его на этот
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
  <div style="padding-top:1em;{% IF index_page %}background-color: white;{% ENDIF %}" class="htmlDataBlock">
		{PAGE_SEO_DESCRIPTION_LARGE}
  </div>
{% ENDIF %}
<!-- END Полное SEO-описание -->


#11 vanyushka

vanyushka

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

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

Отправлено 06 Август 2014 - 22:38

Просмотр сообщенияAnnaM (06 Август 2014 - 22:33) писал:

в шаблоне "страница" найдите код
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
<<div style="padding-top:1em;{% IF index_page %}background-color: white;{% ENDIF %}" class="htmlDataBlock">
	 {PAGE_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->
и аккуратно замените его на этот
<!-- Полное SEO-описание -->
{% IF PAGE_SEO_DESCRIPTION_LARGE %}
<div style="padding-top:1em;{% IF index_page %}background-color: white;{% ENDIF %}" class="htmlDataBlock">
	 {PAGE_SEO_DESCRIPTION_LARGE}
</div>
{% ENDIF %}
<!-- END Полное SEO-описание -->

Максимально аккуратно изменил) При обновлении страницы сайта сверху вниз прошла белая полоса по полной ширине окна, но мой фон ее победил и накрыл полностью

#12 vanyushka

vanyushka

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

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

Отправлено 07 Август 2014 - 11:16

Помогите

#13 Castiel

Castiel

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

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

Отправлено 07 Август 2014 - 11:35

Просмотр сообщенияipodushkin (07 Август 2014 - 11:16) писал:

Помогите

Уточните пожалуйста на скриншоте про какую белую полосу идет речь и при каких действиях она появляется.

#14 vanyushka

vanyushka

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

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

Отправлено 07 Август 2014 - 11:57

Просмотр сообщенияCastiel (07 Август 2014 - 11:35) писал:

Уточните пожалуйста на скриншоте про какую белую полосу идет речь и при каких действиях она появляется.

Белая полоса это глюк и почти незаметный, видимо следствие изменений, которые должны были привести к желаемому результату: выделению белым фоном важных объектов: меню, слайдера, товаров, фото товара в его карточке, его описания. Мне требуется чтобы поверх фона который я установил был белый прямоугольник. На скриншоте я постарался показать как именно:
Изображение

То есть: выделить всю центральную область белым цветом с возможностью менять ее цвет. Чтобы с белым фоном было описание, характеристики товара, фотографии, надпись похожие товары. И по возможности я бы хотел сохранить пробелы между показываемыми товарами (как в рубриках, так и в похожих и на главной странице).

Может для красоты разделить все блоки, но основное - это белый фон на котором все читается.

Спасибо.

#15 Castiel

Castiel

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

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

Отправлено 07 Август 2014 - 12:19

Просмотр сообщенияipodushkin (07 Август 2014 - 11:57) писал:

Белая полоса это глюк и почти незаметный, видимо следствие изменений, которые должны были привести к желаемому результату: выделению белым фоном важных объектов: меню, слайдера, товаров, фото товара в его карточке, его описания. Мне требуется чтобы поверх фона который я установил был белый прямоугольник. На скриншоте я постарался показать как именно:
Изображение

То есть: выделить всю центральную область белым цветом с возможностью менять ее цвет. Чтобы с белым фоном было описание, характеристики товара, фотографии, надпись похожие товары. И по возможности я бы хотел сохранить пробелы между показываемыми товарами (как в рубриках, так и в похожих и на главной странице).

Может для красоты разделить все блоки, но основное - это белый фон на котором все читается.

Спасибо.

К сожалению то что вы нарисовали на скриншоте реализовать нельзя.
Можно попробовать такой вариант

В файле "main.css".
Найти:
#content {
width: 960px;
margin: 0 auto;
}

Заменить:
#content {
width: 960px;
margin: 0 auto;
background-color: #fff;
}

background-color: #fff;  цвет фона основной части сайта, можно изменить на свой.

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

#16 vanyushka

vanyushka

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

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

Отправлено 07 Август 2014 - 12:24

Просмотр сообщенияCastiel (07 Август 2014 - 12:19) писал:

К сожалению то что вы нарисовали на скриншоте реализовать нельзя.
Можно попробовать такой вариант

В файле "main.css".
Найти:
#content {
width: 960px;
margin: 0 auto;
}

Заменить:
#content {
width: 960px;
margin: 0 auto;
background-color: #fff;
}

background-color: #fff;  цвет фона основной части сайта, можно изменить на свой.

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

Да, примерно это я и хотел. Помогите решить проблему с выступами справа и слева:

Изображение            
Изображение

#17 Castiel

Castiel

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

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

Отправлено 07 Август 2014 - 13:58

Просмотр сообщенияipodushkin (07 Август 2014 - 12:24) писал:



Да, примерно это я и хотел. Помогите решить проблему с выступами справа и слева:

Изображение            
Изображение
В файле "main.css".
Найти:
#headerWrap {
height: 150px;
background: url("{ASSETS_IMAGES_PATH}header_bg.jpg") top center no-repeat;
}

Заменить:
#headerWrap {
height: 150px;
background: url("{ASSETS_IMAGES_PATH}header_bg.jpg") top center no-repeat;
width: 994px;
margin: 0 auto;
background-size: 100% 100%;
}


Найти:
#content {
width: 960px;
margin: 0 auto;
background-color: #fff;
}

Заменить:
#content {
width: 994px;
margin: 0 auto;
background-color: #fff;
}


#18 vanyushka

vanyushka

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

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

Отправлено 07 Август 2014 - 15:24

Спасибо все получилось.

Еще появилась креативная идея сделать заместо всего белого поля - поле прозрачное, как будто матовое стекло и чуть затемненное, где при прокрутке видно мелькание самого заднего фона. Такое вообще как-то возможно сделать?

Подобное можно наблюдать на сайте http://www.massimodutti.com/ в самом верху горизонтальное меню с поиском.

#19 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 07 Август 2014 - 15:36

Просмотр сообщенияipodushkin (07 Август 2014 - 15:24) писал:

Спасибо все получилось.

Еще появилась креативная идея сделать заместо всего белого поля - поле прозрачное, как будто матовое стекло и чуть затемненное, где при прокрутке видно мелькание самого заднего фона. Такое вообще как-то возможно сделать?

Подобное можно наблюдать на сайте http://www.massimodutti.com/ в самом верху горизонтальное меню с поиском.

Здравствуйте.
К сожалению но вашу идею стандартными средствами реализовать нельзя, для этого необходимо обратиться в дизайн-студию http://storelandlab.ru/

#20 vanyushka

vanyushka

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

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

Отправлено 07 Август 2014 - 16:12

Хорошо. Тогда еще такая ситуация: Изображение

Как это можно исправить? Я понимаю, что можно написать текст и полоса опустится до нужной позиции, но есть ли еще вариант исправления? Или легче просто разместить текст? так как этот вид возникает только на этой странице.




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

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