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


Как Увеличить Размер Размер Слайда


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

#1 Kamunyaga

Kamunyaga

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

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

Отправлено 05 Июнь 2015 - 10:50

1.Как увеличить размер размер слайда сейчас 1920*450 хочу сделать 1920*1080
2.Увеличить размер букв в верхнем меню сделать чуть пожирнее и больше
аккаунт SL-344686
спасибо

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

  • Новый точечный рисунок.jpg
  • вапукпо.jpg


#2 Cupuyc

Cupuyc

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

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

Отправлено 05 Июнь 2015 - 11:09

Просмотр сообщенияKamunyaga (05 Июнь 2015 - 10:50) писал:

1.Как увеличить размер размер слайда сейчас 1920*450 хочу сделать 1920*1080
2.Увеличить размер букв в верхнем меню сделать чуть пожирнее и больше
аккаунт SL-344686
спасибо

Здравствуйте,
1) Пожалуйста уточните Вы хотели бы изменить размер слайдера или размер слайдов находящихся в нём?
2) Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:11px; text-decoration: none;}

Замените его на:
#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:14px; text-decoration: none;}
Значение "14px" отвечает за размер шрифта.

#3 Kamunyaga

Kamunyaga

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

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

Отправлено 05 Июнь 2015 - 11:14

Просмотр сообщенияCupuyc (05 Июнь 2015 - 11:09) писал:

Здравствуйте,
1) Пожалуйста уточните Вы хотели бы изменить размер слайдера или размер слайдов находящихся в нём?
2) Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:11px; text-decoration: none;}

Замените его на:
#megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:14px; text-decoration: none;}
Значение "14px" отвечает за размер шрифта.

размер слайдера

#4 Cupuyc

Cupuyc

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

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

Отправлено 05 Июнь 2015 - 11:22

Просмотр сообщенияKamunyaga (05 Июнь 2015 - 11:14) писал:

размер слайдера

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css добавьте в конец шаблона код:
.slides {
height: 1080px;
}


#5 Kamunyaga

Kamunyaga

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

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

Отправлено 05 Июнь 2015 - 13:05

Просмотр сообщенияCupuyc (05 Июнь 2015 - 11:22) писал:

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css добавьте в конец шаблона код:
.slides {
height: 1080px;
}

cпасибо

#6 Territoriy

Territoriy

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

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

Отправлено 15 Сентябрь 2015 - 00:19

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

#7 Vaccina

Vaccina

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

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

Отправлено 15 Сентябрь 2015 - 02:46

Скриншот, к сожалению, не прикрепился.
В шаблоне HTML найдите:
{% IF index_page %}
	 <div class="flexslider" id="autumn-slider">
	 <ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
	 </ul>
	 </div>
{% ENDIF %}

перенесите его ниже, поставив после:
<div class="content container">

далее в 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 {margin: 0 15px 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;}


#8 Territoriy

Territoriy

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

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

Отправлено 15 Сентябрь 2015 - 11:44

Просмотр сообщенияVaccina (15 Сентябрь 2015 - 02:46) писал:

Скриншот, к сожалению, не прикрепился.
В шаблоне HTML найдите:
{% IF index_page %}
	 <div class="flexslider" id="autumn-slider">
	 <ul class="slides">
		 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	 <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
	 </ul>
	 </div>
{% ENDIF %}

перенесите его ниже, поставив после:
<div class="content container">

далее в 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 {margin: 0 15px 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;}

Благодарю, а где задаются размеры, скорость и количество слайдов?

#9 Danil

Danil

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

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

Отправлено 15 Сентябрь 2015 - 11:55

Просмотр сообщенияTreeitory-s (15 Сентябрь 2015 - 11:44) писал:

Благодарю, а где задаются размеры, скорость и количество слайдов?
Количество слайдов увеличивается и уменьшается, путем удаления или добавления строк в коде(в шаблоне html).
 {% IF index_page %}  
	  <div class="flexslider" id="autumn-slider"> 
		<ul class="slides">
		  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	   <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
		</ul>
	 </div>
	{% ENDIF %}
Например нужно добавить 1 слайд:
 {% IF index_page %}  
	  <div class="flexslider" id="autumn-slider"> 
		<ul class="slides">
		  <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
	   <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
	   <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=autumn"></a></li>
		</ul>
	 </div>
	{% ENDIF %}
В main.js найдите код
//Слайдер на главной
$(window).load(function(){		 
  $('.flexslider').flexslider({			 
	animation: "slide", 
	start: function(slider){				 
	  $('body').removeClass('loading');		   
	}		 
  });	 
});
и замените на

//Слайдер на главной
$(window).load(function(){		 
  $('.flexslider').flexslider({			 
	animation: "slide", 
	slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
	animationSpeed: 600,   //Integer: Скорость анимации в мс
	start: function(slider){				 
	  $('body').removeClass('loading');		   
	}		 
  });	 
});
изменяйте значения на свои

#10 Territoriy

Territoriy

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

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

Отправлено 15 Сентябрь 2015 - 14:24

Просмотр сообщенияDanil (15 Сентябрь 2015 - 11:55) писал:

Количество слайдов увеличивается и уменьшается, путем удаления или добавления строк в коде(в шаблоне html).
{% IF index_page %}
<div class="flexslider" id="autumn-slider">
<ul class="slides">
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
</ul>
</div>
{% ENDIF %}
Например нужно добавить 1 слайд:
{% IF index_page %}
<div class="flexslider" id="autumn-slider">
<ul class="slides">
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=autumn"></a></li>
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=autumn"></a></li>
</ul>
</div>
{% ENDIF %}
В main.js найдите код
//Слайдер на главной
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
и замените на

//Слайдер на главной
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 7000, //Integer: Скорость слайдшоу в мс
animationSpeed: 600, //Integer: Скорость анимации в мс
start: function(slider){
$('body').removeClass('loading');
}
});
});
изменяйте значения на свои

Благодарю, а размер слайда определяется размером рисунка?

#11 Danil

Danil

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

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

Отправлено 15 Сентябрь 2015 - 14:40

Просмотр сообщенияTreeitory-s (15 Сентябрь 2015 - 14:24) писал:

Благодарю, а размер слайда определяется размером рисунка?
Все верно, размер слайдера определяется размером изображения, но из-за верстки имеет определенные ограничения по ширине , а именно 1162px, по высоте ограничений нет.




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

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