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


Как Менять Фото На Слайдере

Автор winner00197, 21 окт. 2013 13:58

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

#61 Niyaz

Niyaz

    Новичок

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

Отправлено 26 Декабрь 2013 - 10:58

Просмотр сообщенияempty9228 (26 Декабрь 2013 - 10:50) писал:

В файле style.css найдите код
.flexslider {margin: 0 0 30px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
замените его на
.flexslider { background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}

Спасибо, получилось

#62 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 28 Декабрь 2013 - 15:57

Просмотр сообщенияVaccina (21 Декабрь 2013 - 03:09) писал:

В теме, что вам предоставили, все сводится к копированию и вставке готового. Почитайте пожалуйста тему поподробнее, там буквально два одинаковых каталога, только 2 условия отличаются, они там тоже написали.

На счет наложения цен на название, код одинаков, простите, не то значит скопировала. Найдите:

.autumnshowcase_block h5 {
height: 23px;
padding: 12px 0px 5px;
}
и замените на:

.autumnshowcase_block h5 {
height: 43px;
padding: 12px 0px 5px;
}
Я все не рискую начать, подскажите, там написано что сейчас нельзя делать скрытые каталоги, так ли это, и еще этот дополнительный каталог который мне нужен он должен располагаться над слайдером, такое возможно?

#63 support 2.0

support 2.0

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

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

Отправлено 28 Декабрь 2013 - 16:36

Просмотр сообщенияElif (28 Декабрь 2013 - 15:57) писал:

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

#64 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 29 Декабрь 2013 - 10:53

Просмотр сообщенияsupport 2.0 (28 Декабрь 2013 - 16:36) писал:

Не могли бы вы уточнить на счет скрытых каталогов? Вы какой-то индивидуальный случай имеете ввиду или вообще про ф-цию скрытых каталогов? Эта ф-ция работает и каталоги вместе с товарами можно скрывать, более того товары при этом индексироваться не будут.
Над слайдером Вы хотите сделать еще одно меню или что-то другое имеете ввиду? Сделать можно и каталог и меню.

Здравствуйте! Посмотрите, сейчас у меня один каталог товара слева, в котором товары сгруппированы по брендам, а мне нужно сверху слайдера сделать отдельное дополнительное меню в котором эти же товары будут сортироваться по группам "для лица", "для глаз", "для губ", для того чтобы например открыв вкладку "для лица" можно было увидеть все средства для лица всех брендов. А каталог слева так и останется прежним, где товары сгруппированы по брендам.

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

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

#65 miyako

miyako

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

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

Отправлено 29 Декабрь 2013 - 13:25

Просмотр сообщенияElif (29 Декабрь 2013 - 10:53) писал:

Здравствуйте! Посмотрите, сейчас у меня один каталог товара слева, в котором товары сгруппированы по брендам, а мне нужно сверху слайдера сделать отдельное дополнительное меню в котором эти же товары будут сортироваться по группам "для лица", "для глаз", "для губ", для того чтобы например открыв вкладку "для лица" можно было увидеть все средства для лица всех брендов. А каталог слева так и останется прежним, где товары сгруппированы по брендам.

Добавьте в конец style.css код -
.menuHeader li{border:2px solid black;display:inline-block;float:left;width:300px;height:30px;margin-left:30px;text-align:center;}

Далее найдите код в шаблоне HTML -
</div>

<div class="fluid-bg" id="content-fluid">
и перед ним добавьте код -
	 <!-- Каталог товаров -->
		 {%IFNOT catalog_full_empty%}
			 {%FOR catalog_full%}
			 <ul class="menuHeader" >
			 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
				 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
			 </li>			
			 </ul>
			 {%ENDFOR%}
		 {%ENDIF%}
		 <!-- /Каталог товаров -->

Также создайте в разделе Товары - Товары новые категории и скройте их.

Результат -

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

  • результат.png

#66 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 29 Декабрь 2013 - 15:19

Просмотр сообщенияmiyako (29 Декабрь 2013 - 13:25) писал:

Добавьте в конец style.css код -
.menuHeader li{border:2px solid black;display:inline-block;float:left;width:300px;height:30px;margin-left:30px;text-align:center;}

Далее найдите код в шаблоне HTML -
</div>

<div class="fluid-bg" id="content-fluid">
и перед ним добавьте код -
	 <!-- Каталог товаров -->
		 {%IFNOT catalog_full_empty%}
			 {%FOR catalog_full%}
			 <ul class="menuHeader" >
			 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
				 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
			 </li>			
			 </ul>
			 {%ENDFOR%}
		 {%ENDIF%}
		 <!-- /Каталог товаров -->

Также создайте в разделе Товары - Товары новые категории и скройте их.

Результат -

Супер! Спасибо! :rolleyes:  Вы именно так все поняли. и правильно подсказали. Осталось немного доработать детали, помогите пожалуйста!
1. Новый каталог нужно поднять чуть выше, а то он на уровне слайдера получился и слайдер смещается.
2. Можно ли убрать черные рамки категорий, и где можно поменять стиль, цвет шрифта.
3. какие применить изменения и где, чтобы сделать это меню всплывающим при наведении с открывающимися подпунктами.

Заранее большое спасибо, очень помогли!

#67 @lina_va

@lina_va

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

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

Отправлено 29 Декабрь 2013 - 15:42

Просмотр сообщенияElif (29 Декабрь 2013 - 15:19) писал:

Супер! Спасибо! :rolleyes:  Вы именно так все поняли. и правильно подсказали. Осталось немного доработать детали, помогите пожалуйста!
1. Новый каталог нужно поднять чуть выше, а то он на уровне слайдера получился и слайдер смещается.
2. Можно ли убрать черные рамки категорий, и где можно поменять стиль, цвет шрифта.
3. какие применить изменения и где, чтобы сделать это меню всплывающим при наведении с открывающимися подпунктами.

Заранее большое спасибо, очень помогли!
Добрый вечер.
1) В HTML находим код:
<!-- Каталог товаров -->
				 {%IFNOT catalog_full_empty%}
						 {%FOR catalog_full%}
						 <ul class="menuHeader" >
						 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
								 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
						 </li>				
						 </ul>
						 {%ENDFOR%}
				 {%ENDIF%}
				 <!-- /Каталог товаров -->
вставляем его после:
				 <div class="clear"></div>
2) Укажите пожалуйста на скрине о каких категориях Вы говорите? Где нужно изменить шрифт?
3) Реализация выпадающего меню была преставлена в этой теме форума:

#68 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 29 Декабрь 2013 - 15:55

Просмотр сообщения@lina_va (29 Декабрь 2013 - 15:42) писал:

Добрый вечер.
1) В HTML находим код:
<!-- Каталог товаров -->
				 {%IFNOT catalog_full_empty%}
						 {%FOR catalog_full%}
						 <ul class="menuHeader" >
						 <li {% IFNOT catalog_full.HIDE %}style="display:none;" {% ENDIF %} class="{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}">
								 <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
						 </li>				
						 </ul>
						 {%ENDFOR%}
				 {%ENDIF%}
				 <!-- /Каталог товаров -->
вставляем его после:
				 <div class="clear"></div>
2) Укажите пожалуйста на скрине о каких категориях Вы говорите? Где нужно изменить шрифт?
3) Реализация выпадающего меню была преставлена в этой теме форума:

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

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

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

#69 @lina_va

@lina_va

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

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

Отправлено 29 Декабрь 2013 - 17:00

Просмотр сообщенияElif (29 Декабрь 2013 - 15:55) писал:

Спасибо, помогло, но сейчас загрузка слайдера стала запаздывать, загружается сайт, а через секунд 5 слайдер, что сделать?
2. На скрине отметила где нужно убрать рамки черные и подскажите в каком файле что изменить чтобы поменять дизайн шрифта.
3. Это меню недавно созданное, и я не знаю в каком файле применять изменения чтобы сделать выпадающее меню? Ведь та тема которую вы предлагаете описывает создание всплывающего меню в главном меню, а у меня дополнительное. Объясните пожалуйста.
2) в main.css замените:
.menuHeader li {
border: 2px solid black;
display: inline-block;
float: left;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
}
на
.menuHeader li {
display: inline-block;
float: left;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
}

Шрифт Вы можете изменить в этом блоке:
a, a:active, a:visited {
color: #333;
cursor: pointer;
}
параметром font-style
3) уточните  каком именно меню Вы говорите? может быть о каталоге слева?

#70 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 30 Декабрь 2013 - 16:41

Просмотр сообщения@lina_va (29 Декабрь 2013 - 17:00) писал:

2) в main.css замените:
.menuHeader li {
border: 2px solid black;
display: inline-block;
float: left;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
}
на
.menuHeader li {
display: inline-block;
float: left;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
}

Шрифт Вы можете изменить в этом блоке:
a, a:active, a:visited {
color: #333;
cursor: pointer;
}
параметром font-style
3) уточните  каком именно меню Вы говорите? может быть о каталоге слева?
я хотела убрать черную рамку, она убралась, но пункты меню сместились друг за другом вниз, как исправить?

Цитата

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

Это я спрашиваю о том меню, где сейчас убрала черные рамки.

#71 Alexey11

Alexey11

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

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

Отправлено 30 Декабрь 2013 - 17:02

в main.css найдите код 
.menuHeader li {
display: inline-block;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
}
замените его на 
.menuHeader li {
display: inline-block;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
float:left;
}

#72 Elif

Elif

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

  • Пользователи
  • PipPipPip
  • 117 сообщений
  • ГородСтамбул

Отправлено 01 Январь 2014 - 10:33

Просмотр сообщенияAlexey11 (30 Декабрь 2013 - 17:02) писал:

в main.css найдите код 
.menuHeader li {
display: inline-block;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
}
замените его на 
.menuHeader li {
display: inline-block;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
float:left;
}
.menuHeader li {
Спасибо, подскажите где отредактировать шрифт в этом меню?  
.menuHeader li {
display: inline-block;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
float:left;
}
меня интересуют параметры : шрифт, размер, цвет, подчеркивание.

#73 Castiel

Castiel

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

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

Отправлено 01 Январь 2014 - 18:35

Просмотр сообщенияElif (01 Январь 2014 - 10:33) писал:

.menuHeader li {
Спасибо, подскажите где отредактировать шрифт в этом меню?  
.menuHeader li {
display: inline-block;
width: 300px;
height: 30px;
margin-left: 30px;
text-align: center;
float:left;
}
меня интересуют параметры : шрифт, размер, цвет, подчеркивание.

Добавьте следующие параметры в этот блок

#74 xDIDGITx

xDIDGITx

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

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

Отправлено 20 Январь 2014 - 15:57

Просмотр сообщенияne_yana (17 Декабрь 2013 - 10:51) писал:

Если Вы хотите изменить изображения на свои, то в разделе Сайт - Редактор шаблонов - HTML нужно заменить
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
на
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}picture1.jpg"></a></li>
, предварительно загрузив свое изображение picture.png  в админку.  Аналогично можно изменить и вторую картинку текущего слайдера.

Если нужно изменить его размеры или перенести, то пришлите скриншот с указанием куда его нужно передвинуть.
Если Вы нашли реализацию какого-то слайдера в интернете и хотите установить его, то пришлите ссылку на данный слайдер.

Пожалуйста, описывайте свои вопросы как можно подробнее.


Только два банера можно прокручивать?

#75 ne_yana

ne_yana

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

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

Отправлено 20 Январь 2014 - 16:00

Просмотр сообщенияxDIDGITx (20 Январь 2014 - 15:57) писал:

Только два банера можно прокручивать?
Здравствуйте, на слайдер Вы можете добавить любое количество изображений. Каждое новое изображение нужно добавлять в виде
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}picture1.jpg"></a></li>

#76 Pstudiopuh

Pstudiopuh

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

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

Отправлено 22 Январь 2014 - 22:27

скажите пожалуйста как  изменить размер слайдера не в процентах (как в 3- или 4том посте этой темы) а привязать его к границам  центральной зоны, чтобы при любом разрешении экрана он был пропорционально  центральной части
на 2ом скриншоте - подогнано процентами в ручную  под определенный размер окна и разрешение, на 1ом скриншоте то что происходит когда меняю размер окна
в идеале   - чтобы всегда само становилось как на2ом скриншоте в не зависимости от  разрешения моника и от размера открытого  окна браузера
реально ?

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

  • Screenshot_1.png
  • Screenshot_22.png

#77 Vaccina

Vaccina

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

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

Отправлено 23 Январь 2014 - 05:50

Сайт - Редактор шаблонов - HTML - найдите:

<div id="autumn-slider" class="flexslider">
замените на:
<div id="autumn-slider" class="flexslider container">

#78 Pstudiopuh

Pstudiopuh

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

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

Отправлено 23 Январь 2014 - 09:26

спасибо

#79 Farid

Farid

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

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

Отправлено 28 Январь 2014 - 22:26

Просмотр сообщенияСake (23 Октябрь 2013 - 02:56) писал:

Изображения в слайдере задаются в шаблоне "HTML", а именно в блоке кода

{% IF index_page %}
	 <div class="flexslider" id="autumn-slider">
	 <ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
	 </ul>
	 </div>
{% ENDIF %}

в данном примере за одно изображение отвечает строка

<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>

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

{% IF index_page %}
	 <div class="flexslider" id="autumn-slider">
	 <ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li>
	 </ul>
	 </div>
{% ENDIF %}
Сейчас у меня на слайдере изображения размером 1920х450. При смене кадров мне придерживаться этих размеров, или можно произвольных размеров ставить кадры? Про то что все кадры должны быть одинакового размера понял. И еще вопрос - можно ли с каждого кадра делать ссылку на товар?

#80 Vaccina

Vaccina

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

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

Отправлено 29 Январь 2014 - 00:54

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

<a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a>
вместо # прописываете ссылку куда должен вести слайд при клике.
Обратно в Изменение общей стилистики


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

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

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