Отключен JavaScript

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

Прошу Помочь С Оформлением Главной Страницы

Автор Hardnord69, 10 мая 2014 22:23

главная страница оформление

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

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

#1 Hardnord69

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

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

Отправлено 10 Май 2014 - 22:23

Здравствуйте!
1)Решил сделать главную страницу из трех блоков таким образом как на этом сайте! http://technoshop5.ru/
так что бы в большом блоке был слайдер и в одном из снимков слайдера установить форму захвата!
2) корзину переместить под кнопку ЗАКАЗАТЬ ЗВОНОК и сделать ее таким же видом как на этом сайте.. http://technoshop5.ru/
3) Закрепить верхнее меню, что бы при прокрутке вниз верхнее меню оставалось на верху!!

Спасибо все ответившим!

Наверх

#2 Hardnord69

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

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

Отправлено 12 Май 2014 - 09:56

Уважаемые модераторы, помогите пожалуйста!

Наверх

#3 lew

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

Модератоpы
244 сообщений

Отправлено 12 Май 2014 - 21:36

Цитата

1)Решил сделать главную страницу из трех блоков таким образом как на этом сайте! http://technoshop5.ru/
так что бы в большом блоке был слайдер и в одном из снимков слайдера установить форму захвата!

опишите более подробнее, со скриншотом, как должно это выглядеть на вашем сайте.

Цитата

2) корзину переместить под кнопку ЗАКАЗАТЬ ЗВОНОК и сделать ее таким же видом как на этом сайте.. http://technoshop5.ru/

там сейчас под кнопкой ЗАКАЗАТЬ ЗВОНОК нет свободного места. Или несмотря на это мне всё равно туда корзину перемести?

Наверх

#4 lew

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

Модератоpы
244 сообщений

Отправлено 13 Май 2014 - 21:35

Цитата

откройте HTML
найдите код

</head>
<body>

над ним напишите следующий код

<script type="text/javascript">
$(document).ready(function(){

var $menu = $("#menuheader");

$(window).scroll(function(){
if ( $(this).scrollTop() > 400 && $menu.hasClass("defaultm") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("defaultm")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= 400 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("defaultm")
.fadeIn('fast');
});
}
});//scroll

$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery
</script>

потом найдите этот код

<!-- Шапка сайта-Конец -->
<!-- Panel-Site -->
<div id="panelsite">
<div class="leftcol"></div>
<div class="centercol">
<div class="menuheader">
<ul>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</div>

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



<!-- Шапка сайта-Конец -->
<!-- Panel-Site -->
<div id="panelsite" >
<div class="leftcol"></div>
<div class="centercol">
<div id="menuheader" class="menuheader defaultm">
<ul>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</div>

потом откройте main3.css
там в самом низу вставьте новый код

.defaultm {
width:920px;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;

-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}

потом в этом же файле найдите строчку (примерно строка 140-160)

#panelsite div.centercol .menuheader, #footer div.centercol .menufooter { width:960px; height:24px; overflow:hidden; margin:15px 0 0 0;}

и замените на эту

#panelsite div.centercol .menuheader, #footer div.centercol .menufooter { /* width:960px; */ height:24px; overflow:hidden; padding: 15px 0 10px 0; text-align: center;}

потом под строчкой (примерно строка 150-170)

 #panelsite div.centercol .menuheader ul li , #footer div.centercol .menufooter ul li{ float:left; background:url(http://b21941.storeland.net/menuheaderline.jpg) 0 1px no-repeat; margin:0 10px 0 0px; padding-left:10px; }

вставьте новый код.

#panelsite div.centercol .menuheader ul li { float:none; display: inline-block;}

PS: перед тем как делать эти изменения, обязательно сделайте бэкап. Мало-ли чего.

Наверх

#5 Hardnord69

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

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

Отправлено 13 Май 2014 - 21:55

lew (13 Май 2014 - 21:35) писал:

откройте HTML
найдите код

</head>
<body>

над ним напишите следующий код

<script type="text/javascript">
$(document).ready(function(){

var $menu = $("#menuheader");

$(window).scroll(function(){
if ( $(this).scrollTop() > 400 && $menu.hasClass("defaultm") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("defaultm")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= 400 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("defaultm")
.fadeIn('fast');
});
}
});//scroll

$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery
</script>

потом найдите этот код

<!-- Шапка сайта-Конец -->
<!-- Panel-Site -->
<div id="panelsite">
<div class="leftcol"></div>
<div class="centercol">
<div class="menuheader">
<ul>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</div>

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



<!-- Шапка сайта-Конец -->
<!-- Panel-Site -->
<div id="panelsite" >
<div class="leftcol"></div>
<div class="centercol">
<div id="menuheader" class="menuheader defaultm">
<ul>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</div>

потом откройте main3.css
там в самом низу вставьте новый код

.defaultm {
width:920px;
}
.fixed {
position:fixed;
top:-5px; left:0;
width:100%;
padding:10px 0;

-moz-box-shadow: 5px 5px 20px #333;
-webkit-box-shadow: 5px 5px 20px #333;
box-shadow: 5px 5px 20px #333;
}
.transbg {
background-color: rgba(60, 130, 190, 0.7)!important;
}

потом в этом же файле найдите строчку (примерно строка 140-160)

#panelsite div.centercol .menuheader, #footer div.centercol .menufooter { width:960px; height:24px; overflow:hidden; margin:15px 0 0 0;}

и замените на эту

#panelsite div.centercol .menuheader, #footer div.centercol .menufooter { /* width:960px; */ height:24px; overflow:hidden; padding: 15px 0 10px 0; text-align: center;}

потом под строчкой (примерно строка 150-170)

 #panelsite div.centercol .menuheader ul li , #footer div.centercol .menufooter ul li{ float:left; background:url(http://b21941.storeland.net/menuheaderline.jpg) 0 1px no-repeat; margin:0 10px 0 0px; padding-left:10px; }

вставьте новый код.

#panelsite div.centercol .menuheader ul li { float:none; display: inline-block;}

PS: перед тем как делать эти изменения, обязательно сделайте бэкап. Мало-ли чего.

Сделал как написано!
Но результат не тот!! с верхним меню произошли не большие изменения( отцентровалось всё и пропала синяя рамка)
а нижнее меню вообще изменило свой вид..
проверьте пожалуйста что получилось..
через пол часа сделаю откат так как не смогу долго держать сайт в таком состоянии!
спасибо!

Наверх

#6 lew

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

Модератоpы
244 сообщений

Отправлено 13 Май 2014 - 22:28

вы забыли вставить

<script type="text/javascript">
$(document).ready(function(){

var $menu = $("#menuheader");

$(window).scroll(function(){
if ( $(this).scrollTop() > 400 && $menu.hasClass("defaultm") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("defaultm")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= 400 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("defaultm")
.fadeIn('fast');
});
}
});//scroll

$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery
</script>

он должен распологаться над кодом (это примерно строчки 90-110)

</head>
<body>

я понял что там нужно сделать. Хочу сразу предупредить там работы ожидает много, так как много стилей нужно переопределять для этого меню.
Поэтому сейчас делайте откат.
Я перепишу эту инструкцию с самого начала.

Наверх

#7 Hardnord69

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

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

Отправлено 14 Май 2014 - 00:03

lew (13 Май 2014 - 22:28) писал:

вы забыли вставить

<script type="text/javascript">
$(document).ready(function(){

var $menu = $("#menuheader");

$(window).scroll(function(){
if ( $(this).scrollTop() > 400 && $menu.hasClass("defaultm") ){
$menu.fadeOut('fast',function(){
$(this).removeClass("defaultm")
.addClass("fixed transbg")
.fadeIn('fast');
});
} else if($(this).scrollTop() <= 400 && $menu.hasClass("fixed")) {
$menu.fadeOut('fast',function(){
$(this).removeClass("fixed transbg")
.addClass("defaultm")
.fadeIn('fast');
});
}
});//scroll

$menu.hover(
function(){
if( $(this).hasClass('fixed') ){
$(this).removeClass('transbg');
}
},
function(){
if( $(this).hasClass('fixed') ){
$(this).addClass('transbg');
}
});//hover
});//jQuery
</script>

он должен распологаться над кодом (это примерно строчки 90-110)

</head>
<body>

Спасибо Большое Вам!!
буду ждать!

Наверх

#8 Hardnord69

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

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

Отправлено 14 Май 2014 - 13:47

lew (12 Май 2014 - 21:36) писал:

опишите более подробнее, со скриншотом, как должно это выглядеть на вашем сайте.

там сейчас под кнопкой ЗАКАЗАТЬ ЗВОНОК нет свободного места. Или несмотря на это мне всё равно туда корзину перемести?

Здравствуйте!
вот сделал картинку как должно всё получиться!
Спасибо за помощь!

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

Наверх

#9 Vaccina

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

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

Отправлено 15 Май 2014 - 02:27

Инструкция по установке слайдера: http://storeland.ru/about/faq#51
1 баннер необходимо будет удалить из шаблона HTML, судя по вашему изображению, также советую название\заголовки баннеров внести внутрь

<div style="position: absolute; top: 170px; right: 340px;" class="m1">

далее сами баннеры завернуть в блок, например:

<div class="banners">
код баннеров
</div>

абсолютное позиционирование у них лучше убрать.

На счет корзины

<!-- Корзина -->
	<div class="block">
	  <div class="blocktitle bluelarge">
		<a style="font-size: 19px; color: #000000; z-index: 2; top: 20px; left: 135px; right: 10px; bottom: 10px; overflow: hidden; font: 190%/1.4 Copperplate, Geneva, sans-serif;" href="{CART_URL}" title="Корзина">Корзина</a>
	  </div>
	  <div class="blockmain cart padd cartInfo">
		<ul>
		  <li class="img"><a href="{CART_URL}"><img src="http://s951865.storeland.net/cart.jpg" alt="{SETTINGS_STORE_NAME}" title="Оформить заказ в {SETTINGS_STORE_NAME}" /></a></li>
		  <li class="button">
		  <p class="fnt11b txtalgnlft cartSum">
			{% IF cart_count_empty %}Итого: 0 {CURRENCY_NAME} {% ELSE %}{% FOR cart_sum %}Итого: {cart_sum.NOW | money_format}{% ENDFOR %}{% ENDIF %}
		  </p>
		  <a href="{CART_URL}" title="Оформить заказ в {SETTINGS_STORE_NAME}" class="blgreen">Оформить заказ</a></li>
		</ul>
	  </div>
	  <div class="blockbottom">
	  </div>
	</div>
  <!-- Корзина -->

перемещаем выше меняя блок на:

<!-- Корзина -->
	<div class="block cart_i">
	  <div class="blockmain cart padd cartInfo">
		<ul>
		  <li class="img"><a href="{CART_URL}"><img src="http://s951865.storeland.net/cart.jpg" alt="{SETTINGS_STORE_NAME}" title="Оформить заказ в {SETTINGS_STORE_NAME}" /></a></li>
		  <li class="button">
		  <p class="fnt11b txtalgnlft cartSum">
			{% IF cart_count_empty %}В корзине товаров на сумму: 0 {CURRENCY_NAME} {% ELSE %}{% FOR cart_sum %}В корзине товаров на сумму: {cart_sum.NOW | money_format}{% ENDFOR %}{% ENDIF %}
		  </p>
		  <a href="{CART_URL}" title="Оформить заказ в {SETTINGS_STORE_NAME}" class="blgreen">Оформить заказ</a></li>
		</ul>
	  </div>
	  <div class="blockbottom">
	  </div>
	</div>
  <!-- Корзина -->

и далее в main.css добавить:

.cart_i{
}

и в нем прописываем стили для самой корзины

Наверх

#10 Hardnord69

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

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

Отправлено 15 Май 2014 - 11:38

Vaccina (15 Май 2014 - 02:27) писал:

и в нем прописываем стили для самой корзины

я не понял последнюю фразу...
как именно прописывать стили для самой корзины??

Наверх

#11 MikDark

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

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

Отправлено 15 Май 2014 - 11:52

Hardnord69 (15 Май 2014 - 11:38) писал:

я не понял последнюю фразу...
как именно прописывать стили для самой корзины??

Цвет, шрифт, фон и т.д. Если Вы в css не разбираетесь, то сделайте вышеприведенные изменения в шаблоне HTML, мы сравним и посмотрим что нужно доработать.

Наверх

#12 Павел1896

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

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

Отправлено 15 Май 2014 - 14:38

Добрый день! Аккаунт SL-289766
Подскажите пожалуйста, как поменять цвет блоков, со стандартного (голубого), на другой?
Как перенести, сравнение товаров в правую часть экрана?))
Заранее спасибо!

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

Наверх

#13 Vaccina

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

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

Отправлено 16 Май 2014 - 01:33

Подобный вопрос рассматривался у нас на форуме и имеет инструкции:
http://forum.storela...красить-шаблон/

Для переноса блока сравнения зайдите в шаблон HTML найдите:

<!-- Если в тарифном плане подключен модуль сравнения товаров -->
	{% IF TARIFF_FEATURE_GOODS_COMPARE %}
	  <!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
	  {% IFNOT SETTINGS_COMPARE_DISABLE %}
		<div class="block">
		  <div class="blocktitle greysmall">
			<a href="{COMPARE_URL}">Сравнить товары</a>
		  </div>
		  <div class="blockmain sravn padd">
			{% IF COMPARE_GOODS_COUNT=0 %}
			  <div class="false fnt12i txtalgncnt">
				Нет товаров для сравнения
			  </div>
			{% ELSE %}
			  <div class="true fnt11n txtalgncnt">
				Товаров на сравнении: {COMPARE_GOODS_COUNT} шт.
				<div class="button fnt12n">
				  <a class="whtblue" href="{COMPARE_URL}">Посмотреть</a>
				</div>
			  </div>
			{% ENDIF %}
		  </div>
		  <div class="blockbottom"></div>
		</div>
	  {% ENDIF %}
	{% ENDIF %}
	<!-- END Если в тарифном плане подключен модуль сравнения товаров -->

и перенесите его поставив после:

  <!-- Вывод каталога списком-Конец -->
		</div>
		<div id="right">

Наверх

#14 lew

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

Модератоpы
244 сообщений

Отправлено 16 Май 2014 - 22:12

Цитата

мне необходимо чтоб вы снова мою инструкцию ту сделали. И я посмотрел бы что там нет так, что там перекрывается.
А то я загрузил на свой сайт (такой же как у вас шаблон), у меня там всё идеально работает. Возможно в вашем шаблоне какие-то
изменения произведены, из-за которых некорректно работает мой код.
Я здесь буду в это воскресенье (с 15:00 по 23:00), поэтому к этому дню на свой сайт сделайте мои изменения. а я в режиме онлайн, помогу вам

Наверх

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

Темы с аналогичным тегами главная страница, оформление

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лето → Главная → Новогоднее Оформление С Анимацией Падения Снежинок Автор Гость_Foxis_10_* , 24 дек. 2020 снежинки, новый год, оформление и 3 еще...	0 Ответов 1 386 Просмотров	Foxis_10 24 дек. 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Осень → Нужна Помощь Редактировании Шаблона Осень Автор Гость_Olga1215_* , 16 нояб. 2018 осень, шапка, фон сайта и 4 еще...	0 Ответов 3 140 Просмотров	Olga1215 16 нояб. 2018
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лазурь → Изменение общей стилистики → Тз. Изменение Шапки Сайта, Главной Страницы И Карточки Товара. Автор Гость_Svensson_* , 30 окт. 2017 Шапка сайта, главная страница и 2 еще...	5 Ответов 1 955 Просмотров	Ирина345 01 нояб. 2017
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Город → Изменить Слайдер На Главной Странице Автор Гость_Ash74_* , 19 окт. 2017 слайдер, главная страница	5 Ответов 5 839 Просмотров	Mr.Nito 27 окт. 2017
Повышение продаж, продвижение → SMO → Красивое Оформление Групп, Сайтов, Баннеров, Логотипов Автор Гость_Fresh_Art_* , 29 авг. 2017 Дизайн, соцсети, сайты, лого и 4 еще...	6 Ответов 3 172 Просмотров	Fresh_Art 15 дек. 2017

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

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

Прошу Помочь С Оформлением Главной Страницы

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

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

Темы с аналогичным тегами главная страница, оформление

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

Войти

Google поиск