Сообщений в теме: 82

[Leonid19]

Доброго времени суток, подскажи пожалуйста как мне урезать слайдер?


А хочу сделать как тут:

[Castiel]

Leonid19 (04 Декабрь 2013 - 10:19) писал:

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

А хочу сделать как тут:
Безымянный2.png

Редактируем шаблон 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 %}

Вставляем найденный код после

<div class="content container">

перед

<div class="column two-third">

Результат должен быть такой

	<div class="content container">
		{% 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 %}
	  <div class="column two-third">

Далее редактируем стили style.css

Находим и обновляем

.flexslider {
margin-bottom: 20px;
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;
}

Находим

.column, .columns {
float: left;
margin: 0 15px;
}

Заменяем на

.column, .columns {
float: left;
}

[Leonid19]

Всё получилось! Большое спасибо

Сообщение отредактировал Leonid19: 04 Декабрь 2013 - 11:50

[ne_yana]

Leonid19 (04 Декабрь 2013 - 11:42) писал:

Всё получилось! Большое спасибо

Здравствуйте, сейчас все отображается корректно. Попробуйте почистить кэш.

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

• 

[Samcopy]

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

[miyako]

Samcopy (28 Декабрь 2013 - 13:29) писал:

Не получается сдвинуть(уменьшить) слайдер вправо, так чтобы меню левое поднялось под шапку.
http://samara-time.ru/

Уточните Ваш вопрос. Где должно быть меню и слайдер?

[Samcopy]

Вот как на скрине

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

• 

[miyako]

Samcopy (28 Декабрь 2013 - 14:13) писал:

Вот как на скрине

Найдите код в шаблоне HTML -

   
	<div class="content container">
	{% 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 %}
	  <div class="column two-third">
	   
		{BODY}

и замените на -

   
	<div class="content container">
  
	  <div class="column two-third">
		 {% 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 %}
		{BODY}

[Samcopy]

Спасибо

[unling]

miyako (28 Декабрь 2013 - 14:41) писал:

Найдите код в шаблоне HTML -

<div class="content container">
{% 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 %}
	 <div class="column two-third">
	
	 {BODY}

и замените на -

<div class="content container">

	 <div class="column two-third">
		 {% 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 %}
	 {BODY}

А Вы не подскажете еще, как мне этот слайдер расширить и сузить т.е. сделать квадратным или немного вытянутым в высоту, но совсем немного?

И еще после всех этих махинаций он перестал у меня автоматически переключать изображения.

[@lina_va]

unling (04 Январь 2014 - 14:15) писал:

А Вы не подскажете еще, как мне этот слайдер расширить и сузить т.е. сделать квадратным или немного вытянутым в высоту, но совсем немного?

И еще после всех этих махинаций он перестал у меня автоматически переключать изображения.

Если Вы хотите изменить размер изображений на слайдере (вытянуть их, например). это можно сделать в style.css в коде:

.flexslider .slides img {
width: 100%;
display: block;
}

Если Вы хотите уменьшить размер самого слайдера, это можно сделать в html . Строку

		 <div class="flexslider" id="autumn-slider">

замените на

<div class="flexslider" id="autumn-slider" style="
height: 200px;
width: 500px;
">
	

[unling]

Спасибо!

[unling]

@lina_va (04 Январь 2014 - 14:28) писал:

Если Вы хотите изменить размер изображений на слайдере (вытянуть их, например). это можно сделать в style.css в коде:

.flexslider .slides img {
width: 100%;
display: block;
}

Если Вы хотите уменьшить размер самого слайдера, это можно сделать в html . Строку

		 <div class="flexslider" id="autumn-slider">

замените на

<div class="flexslider" id="autumn-slider" style="
height: 200px;
width: 500px;
">
	

Как мне сделать чтобы вот тут отображалось три, а не четыре товара?

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

• 

[Stasya]

В файле style.css найдите блок

.autumnshowcase_block li {
position: relative;
width: 210px;
height: auto;
margin: 0;
padding: 0 30px 0 0;
text-align: center;
}

и замените его на

.autumnshowcase_block li {
position: relative;
width: 275px;
height: auto;
margin: 0;
padding: 0 30px 0 0;
text-align: center;
}

Затем найдите блок

.autumnshowcase_block .autumnshowcase_carousel {
position: relative;
overflow-x: hidden;
height: 450px;
clear: both;
}

и замените его на

.autumnshowcase_block .autumnshowcase_carousel {
position: relative;
overflow-x: hidden;
height: 450px;
clear: both;
width: 900px;
}

[unling]

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

[Vaccina]

В style.css найдите:

.autumnshowcase_block .product_image {
height: auto;
max-width: 130px;
z-index: 1;
}

Попробуйте уменьшить значение max-width

[unling]

Я немного не правильно выразился, мне не только фото надо уменьшить, но и кнопки и шрифт, чтобы в целом все эта табличка или иконка, не знаю как правильно назвать, была меньше размером, но при этом фото товара не должно сильно страдать из за уменьшения?
А уменьшать фото я научился, спасибо!!! Как теперь сделать меньше все остальное, а может кнопки поменять, да кстати как мне изменить кнопку на другую "быстрый заказ", другого вида?

[unling]

И вот еще какие изменения я хочу сделать, но не знаю как?

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

• 

[unling]

А и еще кое что забыл подробности на фото...

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

• 

[Stasya]

В файле style.css найдите блок

#megamenu {
position: absolute;
height: 54px;
top: 90px;
left: 238px;
}

и замените его на

#megamenu {
position: absolute;
height: 45px;
top: 90px;
left: 238px;
background: black;
}

Далее найдите блок

#megamenu li.root_menu {
padding: 25px 8px 5px 8px;
float: left;
position: relative;
}

и замените его на

#megamenu li.root_menu {
padding: 14px 8px 5px 8px;
float: left;
position: relative;
height: 26px;
}

Блок

#megamenu li .root_link {
color:#AAAAAA;
text-transform: uppercase;
font-size: 11px;
text-decoration: none;
}

и замените его на

#megamenu li .root_link {
color: #B11BBE;
text-transform: uppercase;
font-size: 11px;
text-decoration: none;
}

И теперь в конец файла добавьте блок

#megamenu li.root_menu:hover {background:red;}