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

[SetMex]

Здравствуйте! Подскажите пожалуйста:

1. Как выровнять логотип по центру.

2. Добавить слева текстовый блок.

Скрин того, как необходимо: http://screencast.com/t/wAUsH5h8LpG

А сейчас вот так: http://seaworldcoffee.ru

Т.е. нужен лого по центру и блок слева, стиль сам смогу настроить. Заранее спасибо.

[Dars]

SetMex (12 Май 2014 - 11:55) писал:

Здравствуйте! Подскажите пожалуйста:

1. Как выровнять логотип по центру.

2. Добавить слева текстовый блок.

Скрин того, как необходимо: http://screencast.com/t/wAUsH5h8LpG

А сейчас вот так: http://seaworldcoffee.ru

Т.е. нужен лого по центру и блок слева, стиль сам смогу настроить. Заранее спасибо.

В main.css найдите строчку

#header-logo{position:relative; text-align: center; display:table;float:left; width:210px;z-index:30;margin-left: 10px; margin-top:40px;margin-bottom:25px}

и замените её на:

#header-logo{position:relative; text-align: center; display:table;float:left; width:210px;z-index:30;margin-left: 350px; margin-top:40px;margin-bottom:25px}

Затем в шаблоне HTML добавьте этот код:

<div style="
	float: left;
	padding-top: 30px;
"><p>Здесь текст</p></div>

перед строкой:

	 <div id="header-logo">

[SetMex]

Цитата

В main.css найдите строчку...

Так не работает: http://screencast.com/t/ehF5iIjjdE
При разрешении 1360*768 все криво - шаблон перестает быть адаптивным.

Тег text-align везде стоит center, но лого слева как вкопанный. В этом прошу помочь разобраться, т.к. ни как не могу найти причину.(html - только основы)

[Vaccina]

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

#header-logo {
	display: table;
	float: left;
	margin-bottom: 25px;
	margin-left: 350px;
	margin-top: 40px;
	position: relative;
	text-align: center;
	width: 210px;
	z-index: 30;
}

замените на:

#header-logo {
	display: block;
	margin-bottom: 25px;
	margin-top: 40px;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 30;
}

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

#header-logo a {
	color: #C2D126;
	display: table-cell;
	font: 600 18px 'Open Sans',Helvetica,Arial;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
}

замените на:

#header-logo a {
	color: #C2D126;
	display: block;
	font: 600 18px 'Open Sans',Helvetica,Arial;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
}

[SetMex]

Все отлично, спасибо. Еще помогите пож-та разместить корзину как на скрине: http://screencast.com/t/GPcMJmLbGPI

[MikDark]

SetMex (15 Май 2014 - 13:55) писал:

Все отлично, спасибо. Еще помогите пож-та разместить корзину как на скрине: http://screencast.com/t/GPcMJmLbGPI

Сделайте бэкап. Далее в шаблоне HTML вырезаем код:

<!-- Корзина -->
	 <div id="header_shopping_cart">
	 <div id="shopping_cart">
	 <a href="{CART_URL}" title="Перейти в корзину">
			 {% IF cart_count_empty %}
				 <span class="ajax_cart_no_product">Корзина</span>
			 {% ELSE %}
				 <span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
			 {% ENDIF %}	
	 <span class="down_arrow_dark"></span>
	 </a>
	 </div>
	 </div>

и вставляем его перед:

<div style="
float: left;
padding-top: 60px;"><p>Еженедельная обжарка и доставка свежего кофе!</p></div>
		
	 </div>

Чуть выше находим:

<div style="
		float: left; border-bottom: 3px solid #9e8e5c; display: block; width: 100%;
		min-height: 25px;
		padding: 17px 0px 8px 0px;
		position: relative;
		z-index: 100;
		">

и удаляем width: 100%;

[SetMex]

Понятно, но так не пойдет, width: 100% создает черту вверху, нужно как раз поверх нее корзину разместить. Вот как на скрине.

[lew]

откройте файл HTML
найдите следующий код

<!-- Корзина -->
<div id="header_shopping_cart">
<div id="shopping_cart">
<a href="{CART_URL}" title="Перейти в корзину">
{% IF cart_count_empty %}
<span class="ajax_cart_no_product">Корзина</span>
{% ELSE %}
<span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
{% ENDIF %}
<span class="down_arrow_dark"></span>
</a>
</div>
</div>

его удалите.
потом найдите код

<div class="container">
<div class="column full" id="header">

<div style="
float: left; border-bottom: 3px solid #9e8e5c; display: block; width: 100%;
min-height: 25px;
padding: 17px 0px 8px 0px;
position: relative;
z-index: 100;
">

<a href="http://seaworldcoffee.ru/user/login">Личный кабинет</a>

</div>

<div style="
float: left;
padding-top: 60px;"><p>Еженедельная обжарка и доставка свежего кофе!</p></div>

<div id="header-logo">
<a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}">
<img class="logo" src="{ASSETS_IMAGES_PATH}logo (3).png" alt="{SETTINGS_STORE_NAME}. Перейти на главную" />
</a>
</div>

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

<div class="container">
<div class="column full" id="header">

<!-- Корзина -->
<div id="header_shopping_cart">
<div id="shopping_cart">
<a href="{CART_URL}" title="Перейти в корзину">
{% IF cart_count_empty %}
<span class="ajax_cart_no_product">Корзина</span>
{% ELSE %}
<span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span>
{% ENDIF %}
<span class="down_arrow_dark"></span>
</a>
</div>
</div>

<div style="
float: left; border-bottom: 3px solid #9e8e5c; display: block; width: 100%;
min-height: 25px;
padding: 17px 0px 8px 0px;
position: relative;
z-index: 100;
">

<a href="http://seaworldcoffee.ru/user/login">Личный кабинет</a>

</div>

<div style="
float: left;
padding-top: 60px;"><p>Еженедельная обжарка и доставка свежего кофе!</p></div>

<div id="header-logo">
<a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}">
<img class="logo" src="{ASSETS_IMAGES_PATH}logo (3).png" alt="{SETTINGS_STORE_NAME}. Перейти на главную" />
</a>
</div>

потом откройте файл style.css
найдите код

#header_shopping_cart{position: relative; padding: 0px 0px 0px 0px;width: 140px; height: 35px; float:right;clear:both;margin-top: 0px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;
background: /*#FFFFFF*/ url('{ASSETS_IMAGES_PATH}cart_red_1.png') no-repeat 12px;border:0px solid #AE8444;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:2px;
box-shadow:0 0px 0px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}

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

#header_shopping_cart {
position: static;
/* float: right; */
/* padding: 17px 0px 8px 0px; */
width: 140px;
/* height: 35px; */
clear: both;
margin-top: 0px;
list-style: none;
background-clip: padding-box;
-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background: /*#FFFFFF*/ url('http://design.seaworldcoffee.ru/cart_red_1.png') no-repeat 12px;
border: 0px solid #AE8444;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 2px;
box-shadow: 0 0px 0px 0 rgba(0,0,0,0.05);
-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
position: absolute;
right: 1px;
}

потом найдте сей код

#header_shopping_cart{margin-top:16px;width: 100%;}

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

#header_shopping_cart{margin-top:16px;/*width: 100%;*/}

[SetMex]

Все отлично, спасибо, только всплывашка корзины осталось на месте. И она почему открывается сразу, как заходишь на сайт и "висит" так постоянно, а не только при наведении курсора!

И еще подскажите пож-та как убрать вот этот отступ снизу, никак не могу его в коде найти.

[Ирина345]

SetMex (20 Май 2014 - 11:41) писал:

Все отлично, спасибо, только всплывашка корзины осталось на месте. И она почему открывается сразу, как заходишь на сайт и "висит" так постоянно, а не только при наведении курсора!

И еще подскажите пож-та как убрать вот этот отступ снизу, никак не могу его в коде найти.

Здравствуйте, что бы убрать отступ в style.css находим

#header_shopping_cart {position: static;/* float: right; *//* padding: 17px 0px 8px 0px; */width: 140px;/* height: 35px; */clear: both;
margin-top: 0px;list-style: none;background-clip: padding-box;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;
background: /*#FFFFFF*/ url('http://design.seaworldcoffee.ru/cart_red_1.png') no-repeat 12px;border: 0px solid #AE8444;-moz-border-radius: 1px;
-webkit-border-radius: 1px;border-radius: 2px;box-shadow: 0 0px 0px 0 rgba(0,0,0,0.05);-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);position: absolute;right: 1px;}
#header_shopping_cart:hover{background-color:#ffffff}

заменяем на

#header_shopping_cart {position: static;/* float: right; *//* padding: 17px 0px 8px 0px; */width: 140px;/* height: 35px; */clear: both;
margin-top: 14px;list-style: none;background-clip: padding-box;-moz-background-clip: padding-box;-webkit-background-clip: padding-box;
background: /*#FFFFFF*/ url('http://design.seaworldcoffee.ru/cart_red_1.png') no-repeat 12px;border: 0px solid #AE8444;-moz-border-radius: 1px;
-webkit-border-radius: 1px;border-radius: 2px;box-shadow: 0 0px 0px 0 rgba(0,0,0,0.05);-moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);position: absolute;right: 1px;}
#header_shopping_cart:hover{background-color:#ffffff}

Чтобы поменять положение корзины находим

#header #cart_block{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:86px;
background:#fcfcfc;width:auto;*border: solid 1px #c0c0c0;}

меняем значение top:86px; меняете положение корзины(пример top:-49px;)

[SetMex]

Теперь корзина "не работает". Вот, посмотрите: http://seaworldcoffee.ru. Похоже, она находится "под слоем" меню в шапке, и не нажимается.
Такая же ситуация с логотипом.

Как можно это исправить?

[MikDark]

SetMex (22 Май 2014 - 13:03) писал:

Теперь корзина "не работает". Вот, посмотрите: http://seaworldcoffee.ru. Похоже, она находится "под слоем" меню в шапке, и не нажимается.
Такая же ситуация с логотипом.

Как можно это исправить?

В style.css найдите код:

#header_shopping_cart {
...
}

и допишите между скобок строчку: z-index: 99999;

[SetMex]

Ok, все отлично. Но с всплывашкой корзины (оформить заказ) такая же проблема. На нее невозможно навести курсор - пропадает.

[arver]

Добрый день,попробуйте в файле style.css найти  #header #cart_block{ в нем найдите параметр top и отрегулируйте значение в px.

[SetMex]

Пробовал, всплывашка корзины двигается, но все равно остается неактивной. Т.е. как будто она находится под "слоем" шапки верхней.

Цитата

и допишите между скобок строчку: z-index: 99999;

Это также не помогло.

[Ирина345]

SetMex (02 Июнь 2014 - 20:46) писал:

Пробовал, всплывашка корзины двигается, но все равно остается неактивной. Т.е. как будто она находится под "слоем" шапки верхней.




Это также не помогло.

Здравствуйте, найдите в HTML

  <div style="
		float: left; border-bottom: 3px solid #542724; display: block; width: 100%; text-transform: uppercase;
		min-height: 25px; font-weight: 400;font-size: 12px;font-weight: 600;color: #542724;
		padding: 17px 0px 8px 0px;
		position: relative;
		z-index: 100;
		">

замените на

  <div style="
		float: left; border-bottom: 3px solid #542724; display: block; width: 100%; text-transform: uppercase;
		min-height: 25px; font-weight: 400;font-size: 12px;font-weight: 600;color: #542724;
		padding: 17px 0px 8px 0px;
		position: relative;
		z-index: 1;
		">

в style.css найдите

#cart_block_bottom{background:#FFFFFF;overflow:hidden;border-top:1px solid #542724;border:1px solid #C58444\0/;padding:10px 20px;}

замените на

#cart_block_bottom{background:#FFFFFF;overflow:hidden;border-top:1px solid #542724;border:1px solid #C58444\0/;padding:10px 20px; z-index:10;}