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


Главная Страница Движение

шапка фон выпадающее меню слайдер

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

#1 Владимир Ал

Владимир Ал

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

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

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

Здравствуйте.
Пытался по имеющимся вариантам сделать изменения, но что-то не совсем получается.  Решил создать тему SL324809/
Теперь по порядку. Имеем шаблон Движение.
1 - верхнее горизонтальное меню стоит снизу логотипа- нужно чтоб его  нижняя часть была на одной линии, т.е. меню является продолжением строки логотипа   в одной строчке.  Причем пункты меню нужно распределить поровну на остаток места в строчке.
2 - контакты и время работы распределить в оставшемся окне сверху над строкой верхнего меню, между логотипом и корзиной.
контактный номер телефона сделать одним шрифтом ( а то код номера телефона стоит красным)
3 Поиск и  Корзину оставить там -же распределив по высоте посередине
4 Вся вышеописанная часть должна быть неподвижной для прокрутки вниз на всех страницах, т.е должна быть видна на всех страницах сайта.
5 Слайд №1 Авто  разместить под верхним меню , подогнав по ширине- т,е высота слайда будет как будет пропорционально высоте.
6 cлайдер убрать вместе с надписью
7 хотел сделать выпадающее меню, но по моему это не совсем к месту. проще и правильней наверно разместить сами категории в удобном виде- как показано в скрине.
при таком расположении думаю левый каталог вообще нужно удалить, а список просмотренных товаров поднять на его место.

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

  • 2015-01-03 21-40-38 Безымянный - Средство просмотра фотографий Windows.png


#2 Ирина345

Ирина345

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

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

Отправлено 06 Январь 2015 - 19:30

Просмотр сообщенияВладимир Ал (03 Январь 2015 - 23:42) писал:

Здравствуйте.
Пытался по имеющимся вариантам сделать изменения, но что-то не совсем получается.  Решил создать тему SL324809/
Теперь по порядку. Имеем шаблон Движение.
1 - верхнее горизонтальное меню стоит снизу логотипа- нужно чтоб его  нижняя часть была на одной линии, т.е. меню является продолжением строки логотипа   в одной строчке.  Причем пункты меню нужно распределить поровну на остаток места в строчке.
2 - контакты и время работы распределить в оставшемся окне сверху над строкой верхнего меню, между логотипом и корзиной.
контактный номер телефона сделать одним шрифтом ( а то код номера телефона стоит красным)
3 Поиск и  Корзину оставить там -же распределив по высоте посередине
4 Вся вышеописанная часть должна быть неподвижной для прокрутки вниз на всех страницах, т.е должна быть видна на всех страницах сайта.
5 Слайд №1 Авто  разместить под верхним меню , подогнав по ширине- т,е высота слайда будет как будет пропорционально высоте.
6 cлайдер убрать вместе с надписью
7 хотел сделать выпадающее меню, но по моему это не совсем к месту. проще и правильней наверно разместить сами категории в удобном виде- как показано в скрине.
при таком расположении думаю левый каталог вообще нужно удалить, а список просмотренных товаров поднять на его место.
Здравствуйте,
1. найдите в style.css
.nav-container {
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
width: 100%; 
}
замените на


.nav-container {
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
margin: 64px 0px 0px -241px;
}

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


.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover {
display: inline-block;
line-height: 1.3em;
text-decoration: none;
position: relative;
color: #FFF;
padding: 0 12px;
margin: 0;
text-decoration: none;
font: 12px Calibri;
text-transform: uppercase;
line-height: 49px;
}
замените на


.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover {
display: inline-block;
line-height: 1.3em;
text-decoration: none;
position: relative;
color: #FFF;
padding: 0 12px;
margin: 0;
text-decoration: none;
font: 12px Calibri;
text-transform: uppercase;
line-height: 38px;
}

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


a.image-link, a:hover.image-link{display: block;background: url('{ASSETS_IMAGES_PATH}icon_home.png?design=movement') 17px 16px no-repeat;width: 53px;height:49px;padding:0;margin:0;}

замените на

a.image-link, a:hover.image-link{display: block;background: url('{ASSETS_IMAGES_PATH}icon_home.png?design=movement') 17px 16px no-repeat;width: 53px;height:38px;padding:0;margin:0;}


#3 Владимир Ал

Владимир Ал

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

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

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

https://yadi.sk/i/c6zrqA31dpRw8
Спасибо - начало есть. картина начала складываться. Жду дальнейшей помощи.

#4 Владимир Ал

Владимир Ал

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

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

Отправлено 13 Январь 2015 - 00:36

Думал что из за праздников нет ответа,  хотя на некоторые вопросы в других темах приходят ответы. ППраздникизакончились. Хотелось бы доделать.  А то скоро истекает пробный период и нужно принимать решение - оплачиваю и остаюсь здесь либо ухожу.  Вроде товары и категории создал,  но не готова главная страница для начала тестирования. Если не ожидается помощи,  то так и сообщите,  чтоб зря не надеятся. Буду искать альтернативные варианты.

#5 Владимир Ал

Владимир Ал

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

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

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

Не будет ответа даже что ничего предприниматься не будет?

#6 Vaccina

Vaccina

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

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

Отправлено 17 Январь 2015 - 04:49

2. Не советую производить подобное, у вас адаптивный шаблон и в меньших разрешения может сказаться отображении.
3.В style.css найдите:
#search {
	position: absolute;
	right: 100px;
	top: 40px;
	width: 300px;
	z-index: 100;
}

.shopping_cart_block {
	position: absolute;
	right: 20px;
	top: 40px;
	z-index: 10;
}
замените на:
#search {
	position: absolute;
	right: 100px;
	top: 15px;
	width: 300px;
	z-index: 100;
}

.shopping_cart_block {
	position: absolute;
	right: 20px;
	top: 15px;
	z-index: 10;
}
4.В style.css найдите:
.home #header {
	background: none;
	height: auto;
	left: 50%;
	margin-left: -600px;
	position: absolute;
	text-align: left;
	z-index: 1000;
}
.header_bar {
	background: #000;
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}
замените на:
.home #header {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	height: auto;
	left: 50%;
	margin-left: -600px;
	position: fixed;
	text-align: left;
	z-index: 1000;
}
.header_bar {
	background: #000;
	display: none !important;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

5,6 уточните пожалуйста, слайдер необходимо убрать и оставить постоянный фон 1 картинки?
7.Выпадающий каталог вполне возможно реализовать и у нас на форуме уже имеется инструкция по данному вопросу:
http://forum.storela...аблон-движение/

#7 Владимир Ал

Владимир Ал

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

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

Отправлено 17 Январь 2015 - 11:24

1 черная полоска меню не дошла до края как красная нижняя, может что то не так сделал.
2." Не советую производить подобное, у вас адаптивный шаблон и в меньших разрешения может сказаться отображении"
как же быть тогда, Аська сейчас не помещается. Тогда может аську перенести под время работы., там место есть, и эти два блока контакты и время работы  как то поставить симметрично центру. Может в таком варианте адаптивность сохраниться?
5 слайдер убрать, оставив постоянный фон (машина на фоне неба кажется №1) размером  с шириной меню, ну и соответсвенно уменьшится пропорционально высота



#8 MikDark

MikDark

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

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

Отправлено 21 Январь 2015 - 15:49

Просмотр сообщенияВладимир Ал (17 Январь 2015 - 11:24) писал:

1 черная полоска меню не дошла до края как красная нижняя, может что то не так сделал.
2." Не советую производить подобное, у вас адаптивный шаблон и в меньших разрешения может сказаться отображении"
как же быть тогда, Аська сейчас не помещается. Тогда может аську перенести под время работы., там место есть, и эти два блока контакты и время работы  как то поставить симметрично центру. Может в таком варианте адаптивность сохраниться?
5 слайдер убрать, оставив постоянный фон (машина на фоне неба кажется №1) размером  с шириной меню, ну и соответсвенно уменьшится пропорционально высота



1) В шаблоне style.css найдите код:
.nav-container {
width: 73.6%;
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
margin: 64px 0px 0px -241px;
}

и замените на:
.nav-container {
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
margin: 64px 0px 0px -241px;
}


#9 Владимир Ал

Владимир Ал

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

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

Отправлено 21 Январь 2015 - 17:47

.nav-container {
width: 73.6%;
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
margin: 64px 0px 0px -241px;
}
у меня этого нет а есть

.nav-container {
background: #000000;
margin-bottom: 0px;
position: relative;
display: block;
float: left;
bottom: 0;
margin: 64px 0px 0px -241px;

#10 Vaccina

Vaccina

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

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

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

2.Подобная проблема проявляется из-за изменения в .nav-container
В шаблоне HTML найдите:
<!-- ICQ номер -->
				{% IF SETTINGS_STORE_ICQ %}
				  <div class="contentTableHeadMainIcq">
					<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус" width="16" height="16" />
					<span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
				  </div>
				{% ENDIF %}
переместите его поставив после:
<!-- Время работы магазина -->
			{% IF SETTINGS_STORE_WORK_TIME %}
			  <div class="time">
				<b>Время работы:</b><br />
				<span class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}">
				  {SETTINGS_STORE_WORK_TIME}
				</span>
			  </div>
			{% ENDIF %}
5. В шаблоне 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 %}

далее найдите:
<body {% IF index_page %}class="home"{% ENDIF %} {% IF MOD_LNAME=goods %}class="tovar"{% ENDIF %}>
замените на:
<body {% IF MOD_LNAME=goods %}class="tovar"{% ENDIF %}>

далее найдите и удалите:
{% IF index_page %}
	  <link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}camera.css?design=movement">
	  <script type='text/javascript' src='{ASSETS_JS_PATH}camera.min.js?design=movement'></script>
	  <script>
	   jQuery(function(){	
	   jQuery('#camera_wrap_1').camera({
			minHeight: '400px',
			maxHeight: '600px',
			pagination: false,
		thumbnails: false,
			time: 3000
	   });
	  });
	 </script>
	{% ENDIF %}


#11 Владимир Ал

Владимир Ал

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

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

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

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

#12 golodayushii

golodayushii

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

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

Отправлено 29 Январь 2015 - 20:38

Скажите пожалуйста, а как сделать так что бы под с каждым новым слайдом, появлялся и новый текст?

#13 Danil

Danil

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

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

Отправлено 29 Январь 2015 - 20:40

Просмотр сообщенияgolodayushii (29 Январь 2015 - 20:38) писал:

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

#14 golodayushii

golodayushii

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

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

Отправлено 30 Январь 2015 - 08:08

Просмотр сообщенияDanil (29 Январь 2015 - 20:40) писал:

Здравствуйте.
Пришлите номер аккаунта.
SL-330743

#15 golodayushii

golodayushii

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

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

Отправлено 30 Январь 2015 - 09:06

И подскажите пожалуйста, как полосу главного меню короче сделать? Она через весь экран сейчас

#16 Danil

Danil

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

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

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

Просмотр сообщенияgolodayushii (30 Январь 2015 - 09:06) писал:

И подскажите пожалуйста, как полосу главного меню короче сделать? Она через весь экран сейчас
Здравствуйте.
В шаблоне html найдите код
  <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 -->
В нем изменяйте текст всплывающих сообщений.
Так же пришлите скриншот с отмеченной полосой, которую необходимо изменить.

#17 Владимир Ал

Владимир Ал

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

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

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

я, создатель темы 10 дней жду когда мне подскажут как расширить полоску меню и еще кое что , а тут мимо меня оперативно решают другие задачи.

#18 golodayushii

golodayushii

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

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

Отправлено 30 Январь 2015 - 09:55

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

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

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


#19 Danil

Danil

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

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

Отправлено 30 Январь 2015 - 10:02

Просмотр сообщенияВладимир Ал (22 Январь 2015 - 11:44) писал:

что получилось
1 значок аська на смартфоне отображается после время работы а номер аськи в отдельной  строчке снизу- т.е значок аськи нужно передвинуть вниз.а в компе нормально
2 можно продлить черную полоску формата пунктов меню до конца строчки вровень с красной линией? да строчка меню. на смартфоне выглядит совсем не так . В горизхонтальном виде еще можно прочесть слова "выберите пункт меню", а в вертикальном  оно вынесено на лево с экрана.
3  Все что с верху и до строчки меню ( включая меню) должна быть неподвижной ( хотя на смартфоне это займет половину экрана - можно там  чтоб оно прокручивалось)  для прокрутки вниз на всех страницах, а она убегает - до этого было именно так.
3 постоянный фон  картинки должен начинаться с нижнего основания меню, по ширине не выходить ширины меню.
Здравствуйте.
2) В конец style.css добавьте
@media only screen and (min-width:1201px) {
.nav-container {width:869px;}
}
Так же в style.css найдите
  #header .nav-container{text-align:left;background: none;margin-top: 75px}
и замените на
  #header .nav-container{text-align:left;background: none;margin-top: 90px;margin: 0;}
3) В конец style.css добавьте
@media only screen and (max-width:479px) {
.contentTableHeadMainIcq {float:left;}
}


#20 Владимир Ал

Владимир Ал

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

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

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

Просмотр сообщенияDanil (30 Январь 2015 - 10:02) писал:

3) В конец style.css добавьте
@media only screen and (max-width:479px) {
.contentTableHeadMainIcq {float:left;}
}


не действует





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

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

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