#1
Отправлено 12 Май 2014 - 11:55
1. Как выровнять логотип по центру.
2. Добавить слева текстовый блок.
Скрин того, как необходимо: http://screencast.com/t/wAUsH5h8LpG
А сейчас вот так: http://seaworldcoffee.ru
Т.е. нужен лого по центру и блок слева, стиль сам смогу настроить. Заранее спасибо.
#2
Отправлено 12 Май 2014 - 18:30
SetMex (12 Май 2014 - 11:55) писал:
1. Как выровнять логотип по центру.
2. Добавить слева текстовый блок.
Скрин того, как необходимо: http://screencast.com/t/wAUsH5h8LpG
А сейчас вот так: http://seaworldcoffee.ru
Т.е. нужен лого по центру и блок слева, стиль сам смогу настроить. Заранее спасибо.
#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">
#3
Отправлено 13 Май 2014 - 12:50
Цитата
Так не работает: http://screencast.com/t/ehF5iIjjdE
При разрешении 1360*768 все криво - шаблон перестает быть адаптивным.
Тег text-align везде стоит center, но лого слева как вкопанный. В этом прошу помочь разобраться, т.к. ни как не могу найти причину.(html - только основы)
#4
Отправлено 14 Май 2014 - 04:17
#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; }
#5
Отправлено 15 Май 2014 - 13:55
#6
Отправлено 15 Май 2014 - 14:57
SetMex (15 Май 2014 - 13:55) писал:
Сделайте бэкап. Далее в шаблоне 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%;
#8
Отправлено 16 Май 2014 - 20:19
найдите следующий код
<!-- Корзина --> <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%;*/}
#9
Отправлено 20 Май 2014 - 11:41
И еще подскажите пож-та как убрать вот этот отступ снизу, никак не могу его в коде найти.
#10
Отправлено 20 Май 2014 - 13:41
SetMex (20 Май 2014 - 11:41) писал:
#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;)
#11
Отправлено 22 Май 2014 - 13:03
Такая же ситуация с логотипом.
Как можно это исправить?
#12
Отправлено 22 Май 2014 - 15:37
SetMex (22 Май 2014 - 13:03) писал:
Такая же ситуация с логотипом.
Как можно это исправить?
В style.css найдите код:
#header_shopping_cart { ... }
и допишите между скобок строчку: z-index: 99999;
#14
Отправлено 28 Май 2014 - 13:56
#15
Отправлено 02 Июнь 2014 - 20:46
Цитата
Это также не помогло.
#16
Отправлено 03 Июнь 2014 - 15:40
SetMex (02 Июнь 2014 - 20:46) писал:
Это также не помогло.
<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;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных