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


Главная Страница

Автор Brendi, 23 июня 2013 16:45

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

#21 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

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

 Наталья C. (26 Сентябрь 2013 - 14:05) писал:

Спасибо за столь подробную инструкцию.
Коды вставила, первое изображение section-1 загрузила в файлы, но оно не отображается.
Подскажите, в чем может быть причина? И каким размером в пикселях делать изображения?
Я нашла в коде цифру 91 пиксель в высоту. А вот про ширину ничего не нашла. Поможете?

Заранее спасибо!

Открыла сейчас свой сайт на смартфоне.
Из 3-х нижних секций отображается только section 1.

А мне обязательно нужно, чтобы сайт корректно работал на смартфонах/планшетах.

Возможно ли мою черную панель с каталогом перенести вниз и разделить на 3 блока?
И чтобы при этом все корректно работало на смартфонах/планшетах?

Заранее спасибо Вам за помощь!

#22 Vaccina

Vaccina

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

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

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

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

#bottomNav .a-title.projection {
background: url("{ASSETS_IMAGES_PATH}section-1.png") no-repeat 40px 60%;
}

и замените на

#bottomNav .a-title.section-1 {
background: url("{ASSETS_IMAGES_PATH}section-1.png") no-repeat 40px 60%;
}

если смотреть на сайт образец, то изображение должно быть размера 38x41 пример http://ux-design.ru/...icon_proekt.png


Цитата

А мне обязательно нужно, чтобы сайт корректно работал на смартфонах/планшетах.

Пожалуйста, пример приведите - например в виде скриншота. Так же сообщите разрешение экрана и имя, версия браузера при котором наблюдаются проблемы.

Цитата

Возможно ли мою черную панель с каталогом перенести вниз и разделить на 3 блока?

Не совсем понятно как это должно выглядеть. Куда именно вы хотите переместить панель. Желательно бы видеть пример.

#23 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 27 Сентябрь 2013 - 06:57

 Vaccina (27 Сентябрь 2013 - 04:38) писал:

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

#bottomNav .a-title.projection {
background: url("{ASSETS_IMAGES_PATH}section-1.png") no-repeat 40px 60%;
}

и замените на

#bottomNav .a-title.section-1 {
background: url("{ASSETS_IMAGES_PATH}section-1.png") no-repeat 40px 60%;
}

если смотреть на сайт образец, то изображение должно быть размера 38x41 пример http://ux-design.ru/...icon_proekt.png




Пожалуйста, пример приведите - например в виде скриншота. Так же сообщите разрешение экрана и имя, версия браузера при котором наблюдаются проблемы.



Не совсем понятно как это должно выглядеть. Куда именно вы хотите переместить панель. Желательно бы видеть пример.

Про панель -  пример все тот же. Если вместо этой бирюзовой нижней области вставить мою черную панель с каталогом.
Просто сделать ее шире и добавить на каждую картинку. Будет ли это корректно работать на смартфонах/планшетах?
Уж простите, что замучила Вас своими вопросами, просто хочется сделать что-то необычное...
Заранее спасибо!

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

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

#24 Vaccina

Vaccina

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

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

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

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

#25 WWY

WWY

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

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

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

Доброго Всем! Прошу помощи по достраиванию главной :

1. Закруглить углы где показанно на скрипте.
2. Вставить картинку корзины в верхней полоске меню ( если не нарушит верстку в целом).
3. перенести с низу под шапку,  блок страницы "  Мы рады Вас видеть " .и т.д.
Пока все , спасибо!

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

  • 2dost.png
  • Image 19.png

#26 Сake

Сake

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

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

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

Добавьте в ваш файл стилей style.css

.head a,
.summary a,
section.newsletter {
	border-radius: 8px;
}
.nav,
.basket-summary {
	border-radius: 0 0 8px 8px;
}
.basket-img {
	height: 40px;
	position: absolute;
	right: 200px;
	top: -40px;
	width: 60px;
background: url('{ASSETS_IMAGES_PATH}cart.png') no-repeat center center;
}

изображение "cart.png" корзины загрузите в разделе редактора тем.

Далее в шаблоне "HTML" найдите

<div class="basket-info">

и ниже добавьте

<div class="basket-img"></div>

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

{BODY}

и переместите данную переменную, вставив её перед кодом 

<!-- Главная страница -->
	{% IF index_page %}
	 
	  <!-- Список товаров на главной -->
	  {% IFNOT index_page_goods_empty %}
		<script type="text/javascript">

#27 WWY

WWY

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

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

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

 Сake (28 Сентябрь 2013 - 03:23) писал:

Добавьте в ваш файл стилей style.css

.head a,
.summary a,
section.newsletter {
border-radius: 8px;
}
.nav,
.basket-summary {
border-radius: 0 0 8px 8px;
}
.basket-img {
height: 40px;
position: absolute;
right: 200px;
top: -40px;
width: 60px;
background: url('{ASSETS_IMAGES_PATH}cart.png') no-repeat center center;
}

изображение "cart.png" корзины загрузите в разделе редактора тем.

Далее в шаблоне "HTML" найдите

<div class="basket-info">

и ниже добавьте

<div class="basket-img"></div>

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

{BODY}

и переместите данную переменную, вставив её перед кодом

<!-- Главная страница -->
{% IF index_page %}
	
	 <!-- Список товаров на главной -->
	 {% IFNOT index_page_goods_empty %}
	 <script type="text/javascript">
Благодарю за реакцию! Все вроде получилось , еще  малость :
1. объединить одним цветом картинку корзины с  самим блоком , как на скрине.
2. поиск обрамить цветом и так же срезать углы.
Спасибо.

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

  • Image 1.png

#28 miyako

miyako

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

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

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

 WWY (28 Сентябрь 2013 - 09:35) писал:

Благодарю за реакцию! Все вроде получилось , еще  малость :
1. объединить одним цветом картинку корзины с  самим блоком , как на скрине.
2. поиск обрамить цветом и так же срезать углы.
Спасибо.

1) Найдите код в style.css -  
.basket-summary {
background: #4a4949;
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
}
и замените на  - 
.basket-summary {
background: #4a4949;
color: #000;
display: none;
position: absolute;
z-index: 1000;
padding: 0 1em 1em;
right: 0;
width: 13.333em;
width: 19em;
}
Далее найдите код - 
.summary a {
color: #ffe4ab;
background: #00a86b;
padding: 1.75em 1em 1.5em;
position: absolute;
right: 0;
top: -4.2em;
display: block;
text-align: center;
width: 13.333em;
}
и замените на  - 
.summary a {
color: #ffe4ab;
background: #00a86b;
padding: 1.75em 1em 1.5em;
position: absolute;
right: 0;
top: -4.2em;
display: block;
text-align: center;
width: 19em;
}

Далее найдите код - 
.basket-img {
height: 49px;
position: absolute;
right: 190px;
top: -48px;
width: 60px;
background: url('{ASSETS_IMAGES_PATH}cart.png') no-repeat center center;
}
и замените на - 
.basket-img {
height: 49px;
position: absolute;
right: 190px;
top: -48px;
z-index: 99;
width: 60px;
background: url('{ASSETS_IMAGES_PATH}cart.png') no-repeat center center;
}

2) Найдите код в style.css - 
form[role="search"] input[type="search"], input#search-field, .search {
vertical-align: middle;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
border: none;
width: 81% !important;
height: 2.429em;
font-size: 1.167em;
color: #8a8a8a;
position: absolute;
z-index: 1;
padding: 0 0.417em;
margin: 0;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
}
и замените на - 
form[role="search"] input[type="search"], input#search-field, .search {
vertical-align: middle;
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
border: none;
width: 81% !important;
height: 2.429em;
font-size: 1.167em;
color: #8a8a8a;
position: absolute;
z-index: 1;
padding: 0 0.417em;
margin: 0;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}

Далее найдите код - 
form[role="search"] input[type="submit"], input#search-submit {
position: absolute;
right: 0;
z-index: 2;
height: 2.833em;
background: #404040;
padding: 0 0.833em;
margin: 0;
line-height: 1;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-webkit-border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
}
и замените на - 
form[role="search"] input[type="submit"], input#search-submit {
position: absolute;
right: 0;
z-index: 2;
height: 2.833em;
background: #404040;
padding: 0 0.833em;
margin: 0;
line-height: 1;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);
-webkit-border-top-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomright: 7px;
border-radius: 0px 7px 7px 0px;
}

#29 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

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

 Vaccina (28 Сентябрь 2013 - 02:25) писал:

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

Спасибо Вам за совет! Тогда не буду ничего менять. Лучше "встраивать" свои желания в имеющуюся разработку.

#30 WWY

WWY

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

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

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

Вроде все получилось, спасибо .

#31 WWY

WWY

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

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

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

Появилась еще просьба , помогите установить такой слайдер , существующий не нравиться , если мона конечно?Прикрепленный файл  nivo-slider2.4.zip   364,26К   136 Количество загрузок: ДА и укажите сразу как его воткнуть сразу после шапки? Спасибо.

#32 support 2.0

support 2.0

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

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

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

 WWY (28 Сентябрь 2013 - 19:45) писал:

Появилась еще просьба , помогите установить такой слайдер , существующий не нравиться , если мона конечно? nivo-slider2.4.zip ДА и укажите сразу как его воткнуть сразу после шапки? Спасибо.
разархивируйте этот файл. Загрузите в раздел сайт -> редактор шаблонов -> nivo-slider.css, jquery.nivo.slider.js и jquery.nivo.slider.pack.js
Далее после
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
вставьте
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" media="screen" />

после
{% IF index_page %}
встьтавьте
<div id="wrapper">
		 <div id="slider-wrapper">
	
		 <div id="slider" class="nivoSlider">
			 <img src="ссылка на изображение" alt="" />
			 <a href="#"><img src="ссылка на изображение" alt="" title="This is an example of a caption" /></a>
			 <img src="ссылка на изображение" alt="" />
			 <img src="ссылка на изображение" alt=""/>
		 </div>
	 </div>
</div>
	 <script type="text/javascript">
$(window).load(function() {
	 $('#slider').nivoSlider();
});
</script>

также загрузите изображения arrows, background, bullets, dev7logo, loading, slider и свои изображения для слайдера
Визуально кроме как изображений отличия больше не увидела. Поэтому возможно, удобней было бы только изменить изображения нашего слайдера.

Прикрепленные файлы

  • Прикрепленный файл  nivo-slider.zip   40,06К   91 Количество загрузок:

#33 WWY

WWY

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

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

Отправлено 29 Сентябрь 2013 - 10:25

 support 2.0 (28 Сентябрь 2013 - 20:33) писал:

разархивируйте этот файл. Загрузите в раздел сайт -> редактор шаблонов -> nivo-slider.css, jquery.nivo.slider.js и jquery.nivo.slider.pack.js
Далее после
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
вставьте
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" media="screen" />

после
{% IF index_page %}
встьтавьте
<div id="wrapper">
		 <div id="slider-wrapper">
	
		 <div id="slider" class="nivoSlider">
			 <img src="ссылка на изображение" alt="" />
			 <a href="#"><img src="ссылка на изображение" alt="" title="This is an example of a caption" /></a>
			 <img src="ссылка на изображение" alt="" />
			 <img src="ссылка на изображение" alt=""/>
		 </div>
	 </div>
</div>
	 <script type="text/javascript">
$(window).load(function() {
	 $('#slider').nivoSlider();
});
</script>

также загрузите изображения arrows, background, bullets, dev7logo, loading, slider и свои изображения для слайдера
Визуально кроме как изображений отличия больше не увидела. Поэтому возможно, удобней было бы только изменить изображения нашего слайдера.
Доброго Вам! Ни как не могу найти строчку <scripttype="text/javascript"src="{ASSETS_JS_PATH}main.js"></script> ,  нашел только эту <!-- Скрипты магазина -->
  <script src="{ASSETS_JS_PATH}main.js" ></script> может не так чего делаю , ибо в кодах не силен особо.

#34 Stasya

Stasya

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

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

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

Данные блок Вы можете найти в шаблоне HTML.

#35 WWY

WWY

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

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

Отправлено 29 Сентябрь 2013 - 18:49

 Stasya (29 Сентябрь 2013 - 13:06) писал:

Данные блок Вы можете найти в шаблоне HTML.
Спасибо конечно за очень содержательный и полноценный ответ. но хотелось бы уточнить перед этой <scripttype="text/javascript"src="{ASSETS_JS_PATH}main.js"></script>  строчкой  есть какая нибудь еще , и после нее какая , поиск ее не показывает.?

#36 WWY

WWY

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

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

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

 support 2.0 (28 Сентябрь 2013 - 20:33) писал:

разархивируйте этот файл. Загрузите в раздел сайт -> редактор шаблонов -> nivo-slider.css, jquery.nivo.slider.js и jquery.nivo.slider.pack.js
Далее после
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
вставьте
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" media="screen" />

после
{% IF index_page %}
встьтавьте
<div id="wrapper">
		 <div id="slider-wrapper">
	
		 <div id="slider" class="nivoSlider">
			 <img src="ссылка на изображение" alt="" />
			 <a href="#"><img src="ссылка на изображение" alt="" title="This is an example of a caption" /></a>
			 <img src="ссылка на изображение" alt="" />
			 <img src="ссылка на изображение" alt=""/>
		 </div>
	 </div>
</div>
	 <script type="text/javascript">
$(window).load(function() {
	 $('#slider').nivoSlider();
});
</script>

также загрузите изображения arrows, background, bullets, dev7logo, loading, slider и свои изображения для слайдера
Визуально кроме как изображений отличия больше не увидела. Поэтому возможно, удобней было бы только изменить изображения нашего слайдера.

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

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

  • ошибка.png

#37 miyako

miyako

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

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

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

 WWY (29 Сентябрь 2013 - 21:27) писал:

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

Слайдер сейчас не отображается у Вас, поэтому сложно понять в чем была ошибка. Попробуйте воспользоваться инструкцией - http://storeland.ru/about/faq#51 или http://forum.storela...der/#entry21606

#38 CrazyCat

CrazyCat

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

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

Отправлено 30 Сентябрь 2013 - 10:36

Добрый день!
Не обнаружил в Вашей админке загруженных файлов и установленного в нужном месте кода. Для того чтобы слайдер работал, Вам необходимо выполнить все инструкции, написанные выше. Если инструкции выполнены, но слайдер все же не работает или работает некорректно, то БОЛЬШАЯ ПРОСЬБА не удаляйте файлы и код, которые вставили. Модератору нужно видеть что и куда Вы вставляли, чтобы понять, почему не  работает слайдер.

#39 WWY

WWY

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

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

Отправлено 30 Сентябрь 2013 - 18:26

Прошу прощения , но случайно по запарке сделал бекап, и все же прошу более точно указать месторасположение данной  строки : <!-- Скрипты магазина -->

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
  
в место нее вижу эту : <!-- Скрипты магазина -->
  <script src="{ASSETS_JS_PATH}main.js" ></script>
по моему они разные , подскажите где я ошибаюсь и что не правильно делаю? Из за этого не понимаю куда вставлять
эти строки : вставьте
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH} jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}style.css" type="text/css" media="screen" />
Спасибо.

#40 Stasya

Stasya

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

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

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

Эти строки только выглядят по разному, но это именно та строка. Поэтому найти Вам нужно именно ее.
<!-- Скрипты магазина -->
  <script src="{ASSETS_JS_PATH}main.js" ></script>

Обратно в Главная


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

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

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