Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Размер Картинок На Слайдере, Отображение Картинок На Слайдере, Цвет Подложки

Автор Aggle, 09 дек. 2014 22:51

слайдер картинки подложка шапка

Авторизуйтесь для ответа в теме

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

#1 Aggle

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

Пользователи
66 сообщений

ГородСанкт-Петербург

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

Доброго времени суток, товарищи!
Вопросы по слайдеру:
1) Делал замену картинок на слайдере. Скачал существующие, размер - 1920X725. Вставил свои, аналогичного размера, отображаются некорректно (увеличены и обрезаны или по длине или по ширине, в зависимости от девайса на котором отображается сайт). Что сделал не так?
2) Где поменять цвет и прозрачность подложки, на которой на фоне слайдера выводятся надписи?

Спасибо!

Аккакунт: SL-229648

Наверх

#2 Vaccina

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

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

Отправлено 10 Декабрь 2014 - 02:32

1. Возможно, вам будет полезна следующая тема, где обсуждался подобный вопрос:
http://forum.storela...596#entry151596

2. На данный момент цвет изменен, чтобы она стала более прозрачной в main.css найдите:

.nav-container {
	background: #0000ff;
	bottom: 0;
	display: block;
	float: left;
	margin-bottom: 0;
	position: relative;
	width: 100%;
}

замените на:

.nav-container {
	background: rgba(0, 0, 255, 0.6);
	bottom: 0;
	display: block;
	float: left;
	margin-bottom: 0;
	position: relative;
	width: 100%;
}

Наверх

#3 Aggle

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

Пользователи
66 сообщений

ГородСанкт-Петербург

Отправлено 10 Декабрь 2014 - 11:25

По первому вопросу - спасибо, пока получилось, будем работать над тем, чтобы слайдер вообще показывался полностью (уменьшить размер)?
По второму - я, наверное, не совсем корректно описал проблему. Имелась в виду подложка, на которую выводятся надписи из следующего блока в HTML:

	  <!-- Главная страница -->
	  {% IF index_page %}
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			  Надпись 1
			</div>
		  </div>

Наверх

#4 MikDark

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

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

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

Aggle (10 Декабрь 2014 - 11:25) писал:

	 <!-- Главная страница -->
	 {% IF index_page %}
	 <div class="fluid-container">
	 <div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		 <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
		 <div class="camera_caption moveFromLeft">
			 Надпись 1
		 </div>
		 </div>

В шаблоне camera.css найдите код:

.camera_caption > div {
background: #000;
background: rgba(0, 0, 0, 0.8);
}

Значение 0.8 задает прозрачность. Можете выставлять его от 0 до 1.

Наверх

#5 Наталья11111

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

Пользователи
397 сообщений

Отправлено 20 Декабрь 2014 - 02:04

Здравствуйте, подскажите где можно изменить параметры этой надписи ( мне нужно ее сделать в левом углу и уменьшить высоту надписи и размер шрифта)

Заранее благодарю.

Аккаунт SL-310546

Наверх

#6 Vaccina

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

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

Отправлено 20 Декабрь 2014 - 02:58

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

.camera_caption {
	bottom: 0;
	display: block;
	font-size: 30px;
	font-style: italic;
	right: 100px;
	position: absolute;
	top: 300px;
	width: 450px;
}

замените на:

.camera_caption {
	bottom: 0;
	display: block;
	font-size: 20px;
	font-style: italic;
	left: 100px !important;
	position: absolute;
	top: 300px;
	width: 450px;
}

Наверх

#7 vanyushka

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

Пользователи
500 сообщений

Отправлено 12 Январь 2015 - 22:23

Здравствуйте! А можно переместить меню вверх и уменьшить по ширине слайдер? Изобразил в фотошопе желаемое:

Наверх

#8 Vaccina

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

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

Отправлено 16 Январь 2015 - 03:51

пример на основе стандартного кода шаблона движение, в шаблоне HTML найдите:

<!-- Главная страница -->
	  {% IF index_page %}
	  <div class="fluid-container">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
			<div class="camera_caption moveFomRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
			<div class="camera_caption moveFomRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption fadeFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
			<div class="camera_caption fadeFromRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
			<div class="camera_caption fadeFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
			<div class="camera_caption fadeFromRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->

	  {% ENDIF %}
	  <div class="container promo_block">
	  <ul>
	  <li class="box-1">
	   <h3 class="title-block">Оплата</h3>
	   <p>Множество способов оплаты</p>
	  </li>
	  <li class="box-2">
	   <h3 class="title-block">Доставка</h3>
	   <p>Доставка во все города России и стран СНГ</p>
	  </li>
	  <li class="box-3">
	   <h3 class="title-block">Гарантии</h3>
	   <p>Возврат/Замена Товара</p>
	  </li>
	  <li class="box-4">
	   <h3 class="title-block">Поддержка</h3>
	   <p>Поддержка клиентов по телефону</p>
	  </li>
	 </ul> 
		<div class="clear"></div>
   </div>

замените на:

<!-- Главная страница -->
	  {% IF index_page %}
	  <div class="">
		<div class="camera_wrap camera_black_skin" id="camera_wrap_1">
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
			<div class="camera_caption moveFomRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
			<div class="camera_caption moveFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
			<div class="camera_caption moveFomRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide1.jpg" data-src="{ASSETS_IMAGES_PATH}slide1.jpg?design=movement">
			<div class="camera_caption fadeFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide2.jpg" data-src="{ASSETS_IMAGES_PATH}slide2.jpg?design=movement">
			<div class="camera_caption fadeFromRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide3.jpg" data-src="{ASSETS_IMAGES_PATH}slide3.jpg?design=movement">
			<div class="camera_caption fadeFromLeft">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		  <div data-thumb="{ASSETS_IMAGES_PATH}slide4.jpg" data-src="{ASSETS_IMAGES_PATH}slide4.jpg?design=movement">
			<div class="camera_caption fadeFromRight">
			  Мечты становятся реальностью, когда мысли превращаются в действия!
			</div>
		  </div>
		</div><!-- #camera_wrap_1 -->
		<div class="clear"></div>
	  </div><!-- .fluid_container -->

	  {% ENDIF %}
	  <div class="promo_block">
	  <ul>
	  <li class="box-1">
	   <h3 class="title-block">Оплата</h3>
	   <p>Множество способов оплаты</p>
	  </li>
	  <li class="box-2">
	   <h3 class="title-block">Доставка</h3>
	   <p>Доставка во все города России и стран СНГ</p>
	  </li>
	  <li class="box-3">
	   <h3 class="title-block">Гарантии</h3>
	   <p>Возврат/Замена Товара</p>
	  </li>
	  <li class="box-4">
	   <h3 class="title-block">Поддержка</h3>
	   <p>Поддержка клиентов по телефону</p>
	  </li>
	 </ul> 
		<div class="clear"></div>
   </div>

и вставьте его после:

<div class="container contentText">	   
		<div class="twelve columns omega main_part_wrapper">

далее в style.css найдите:

.camera_wrap {
	height: 600px !important;
}

замените на:

.camera_wrap {
	height: 440px !important;
}

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

.promo_block {
	background: #000;
	top: -55px !important;
}

замените на:

.promo_block {
	background: #000;
}

.container.contentText {


	margin-top: 200px;
}

Наверх

Обратно в Изменение общей стилистики

Темы с аналогичным тегами слайдер картинки, подложка, шапка

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Маркетплейс → Главная → Добавление В Шапку Сайта Почты И Сделать Крупно Номер Телефона Автор Гость_Art_* , 05 марта 2021 банер, телефон, почта, бренд и 2 еще...	Популярная тема 9 Ответов 892 Просмотров	Vaccina 18 марта 2021
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Техно → Изменение общей стилистики → Добавил Элементы В Шапке Автор Гость_like.hornet.6_* , 22 авг. 2019 шапка, добавить, элементы	0 Ответов 1 543 Просмотров	like.hornet.6 22 авг. 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Техно → Изменение общей стилистики → Ссылки На Странице В Шапке Автор Гость_vproekt_* , 10 апр. 2019 шапка	0 Ответов 1 636 Просмотров	vproekt 10 апр. 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Осень → Нужна Помощь Редактировании Шаблона Осень Автор Гость_Olga1215_* , 16 нояб. 2018 осень, шапка, фон сайта и 4 еще...	0 Ответов 3 141 Просмотров	Olga1215 16 нояб. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Рассвет → Как Изменить Расположение Объектов На Первом Экране Автор Гость_DMC_* , 19 окт. 2018 шапка, слайдер, логотип	1 Ответ 2 360 Просмотров	Vaccina 26 окт. 2018

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

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

Размер Картинок На Слайдере, Отображение Картинок На Слайдере, Цвет Подложки

Темы с аналогичным тегами слайдер картинки, подложка, шапка

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

Войти

Google поиск