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


Уменьшить Слайдер И Поднять Левое Меню


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

#1 smoke-nk

smoke-nk

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

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

Отправлено 16 Апрель 2015 - 17:59

Добрый вечер!
Помогите пожалуйста сделать это) Поднять левое меню наверх, а слайдер обрезать как показано на картинке. Не повлияет ли это на адаптивность мобильной версии?
Изображение

#2 MikDark

MikDark

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

  • Модераторы
  • 6 398 сообщений

Отправлено 16 Апрель 2015 - 18:38

Просмотр сообщенияsmoke-nk (16 Апрель 2015 - 17:59) писал:

Добрый вечер!
Помогите пожалуйста сделать это) Поднять левое меню наверх, а слайдер обрезать как показано на картинке. Не повлияет ли это на адаптивность мобильной версии?


Здравствуйте. В шаблоне HTML Вам нужно вырезать код:
 <!-- Главная страница -->
			  {% IF index_page %}
				<div id="module_area"> 
				  <div id="flexslideshow" class="flexslider">
					<ul class="slides">
					  <li>					   
						<img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img">
					  </li>
					  <li>					   
						<img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img">
					  </li>
					  <li>					 
						<img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img">
					  </li>
					</ul>
				  </div>
				</div>
			  {% ENDIF %}
		<!-- /Главная страница -->

и поставить его перед:
{BODY}
		   {%IF index_page%}
			{% IFNOT index_page_new_goods_empty %}
			  <div class="customNavigation">
				<a class="btn prev ftheme-color"><div class="newprev btheme-color"><div class="newprevin btheme-color"></div></div></a>
				 <h2 class="indexh2 ftheme-color">Новинки</h2>
				<a class="btn next ftheme-color"><div class="newnext btheme-color"><div class="newnextin btheme-color"></div></div></a>			   
			  </div>			

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

#3 smoke-nk

smoke-nk

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

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

Отправлено 16 Апрель 2015 - 19:00

Спасибо большое!
Почти получилось!
Как теперь можно выровнить? SL-340545
Изображение

#4 smoke-nk

smoke-nk

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

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

Отправлено 16 Апрель 2015 - 19:07

Так же в мобильной версии съехал пункт регистрация...Изображение

#5 Danil

Danil

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

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

Отправлено 16 Апрель 2015 - 19:09

Просмотр сообщенияsmoke-nk (16 Апрель 2015 - 19:00) писал:

Спасибо большое!
Почти получилось!
Как теперь можно выровнить? SL-340545
Изображение
В main.css найдите код
#module_area {
  width: 100%;
  margin: 0 auto;
}
и замените на
#module_area {
  width: 100%;
  margin: 0 auto;
  padding: 0px 30px;
}


#6 smoke-nk

smoke-nk

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

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

Отправлено 16 Апрель 2015 - 19:16

К сожалению не помогло...все так же...

#7 MikDark

MikDark

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

  • Модераторы
  • 6 398 сообщений

Отправлено 16 Апрель 2015 - 19:18

Просмотр сообщенияsmoke-nk (16 Апрель 2015 - 19:16) писал:

К сожалению не помогло...все так же...

Попробуйте почистить кэш в браузере.

#8 smoke-nk

smoke-nk

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

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

Отправлено 16 Апрель 2015 - 19:50

Почистил...Все так же((
Изображение
Так же в мобильной версии не отображается кнопка регистрации:
Изображение

#9 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 17 Апрель 2015 - 01:10

На данный момент 2 кнопки ЛК отображаются на одной строке, попробуйте в main.css у следующего блока:
.login {
  margin: 6px auto 0;
  width: 138px;
}

увеличить значение стиля width

#10 smoke-nk

smoke-nk

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

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

Отправлено 17 Апрель 2015 - 05:32

Спасибо, получилось! А как все-таки можно выровнить левое меню отностительно слайдера?
Изображение

#11 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 17 Апрель 2015 - 05:37

В main.css найдите:
#module_area {
  margin: 0 auto;
  padding: 0 30px;
  width: 100%;
}

замените на:
#module_area {
  margin: -20px auto 0;
  padding: 0 30px;
  width: 100%;
}


#12 smoke-nk

smoke-nk

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

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

Отправлено 17 Апрель 2015 - 09:57

Огромное спасибо! Еще пару вопросов))
1. В мобильной версии страницы сдвинуты чуть вправо, даже логотип немного перекрывает...как можно исправить?
Изображение

2. Как можно сдвинуть номер телефона влево, сравняв его с рамкой поиска?
Изображение

#13 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 17 Апрель 2015 - 10:09

Просмотр сообщенияsmoke-nk (17 Апрель 2015 - 09:57) писал:

Огромное спасибо! Еще пару вопросов))
1. В мобильной версии страницы сдвинуты чуть вправо, даже логотип немного перекрывает...как можно исправить?
2. Как можно сдвинуть номер телефона влево, сравняв его с рамкой поиска?
Здравствуйте.
1. В main.css в блоке
@media only screen and (max-width: 480px)
добавьте
.logo img {
  width: 200px;
}
2. В main.css замените
.hph1 {
  margin-top: 15px;
}
на
.hph1 {
  margin: 15px 0 0 -20px;
}


#14 smoke-nk

smoke-nk

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

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

Отправлено 17 Апрель 2015 - 10:27

Большое спасибо!

#15 Мария1004

Мария1004

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

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

Отправлено 25 Октябрь 2015 - 12:57

Здравствуйте, как изменить размер слайдера? хотелось бы размеры 800х400рх SL-361643

#16 RayLi

RayLi

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

  • Модераторы
  • 2 857 сообщений

Отправлено 25 Октябрь 2015 - 13:07

Просмотр сообщенияМария1004 (25 Октябрь 2015 - 12:57) писал:

Здравствуйте, как изменить размер слайдера? хотелось бы размеры 800х400рх SL-361643

Здравствуйте.
Сделайте, пожалуйста, следующее:
В шаблоне main.css найдите данный код:

#module_area {
margin: -20px auto 0;
padding: 0 150px;
width: 100%;
}

И замените его вот этим вот кодом:

#module_area {
margin: -20px auto 0;
padding: 0 100px;
width: 100%;
}


Далее в том же шаблоне найдите следующий код:

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

И замените его этим вот кодом:

.flexslider .slides img {
width: 800px;
display: block;
height: 400px;
}


#17 Мария1004

Мария1004

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

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

Отправлено 25 Октябрь 2015 - 14:27

Огромное спасибо!!

#18 Миромарт

Миромарт

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

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

Отправлено 28 Февраль 2017 - 10:36

Класс класс класс :wub: :wub: :wub:

#19 Gambler

Gambler

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

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

Отправлено 09 Декабрь 2017 - 14:51

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

#20 Stasya

Stasya

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

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

Отправлено 12 Декабрь 2017 - 17:31

Просмотр сообщенияGambler (09 Декабрь 2017 - 14:51) писал:

Здравствуйте.
Подскажите, пожалуйста, как растянуть слайдер на всю ширину экрана.
Не нужны слева и справа пустые белые поля.
Спасибо.
Здравствуйте. Простиет за длительное ожидание ответа. В шаблоне HTML найдите блок
<div class="contwrap">
			  <div class="row">
		  <div class="cols col-12">
			<div class="slider">
  <!-- Главная страница -->
			  {% IF index_page %}
				<div id="module_area">
				  <div id="flexslideshow" class="flexslider">
					<ul class="slides">
					  <li>					  
						<img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img">
					  </li>
					  <li>					  
						<img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img">
					  </li>
					  <li>					
						<img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img">
					  </li>
					</ul>
				  </div>
				</div>
			  {% ENDIF %}
		<!-- /Главная страница -->
			</div>
		  </div><!-- END cols col-12 -->
		</div>   <!-- END cols row -->
и замените его на
<div id="slideshow">
			<div class="slider">
  <!-- Главная страница -->
			  {% IF index_page %}
				<div id="module_area">
				  <div id="flexslideshow" class="flexslider">
					<ul class="slides">
					  <li>					  
						<img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=chameleon" alt="Slide 1" class="slide_img">
					  </li>
					  <li>					  
						<img src="{ASSETS_IMAGES_PATH}slide2.jpg?design=chameleon" alt="Slide 2" class="slide_img">
					  </li>
					  <li>					
						<img src="{ASSETS_IMAGES_PATH}slide3.jpg?design=chameleon" alt="Slide 3" class="slide_img">
					  </li>
					</ul>
				  </div>
				</div>
			  {% ENDIF %}
		<!-- /Главная страница -->
			</div>
</div>
<div class="contwrap">





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

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