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


Помогите Сделать Шапку Как На Изображении.


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

#1 Yustus

Yustus

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

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 05 Июль 2015 - 22:16

Как сейчас:

Изображение




Как я хочу чтоб получилось:

Изображение

#2 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 06 Июль 2015 - 09:31

Просмотр сообщенияYustus (05 Июль 2015 - 22:16) писал:

Как сейчас:

Изображение




Как я хочу чтоб получилось:

Изображение

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
		 <!-- Корзина -->
		 <div id="cart">
		 <div class="heading">
			 <h4>Корзина покупок</h4>
			 <a href="{CART_URL}" title="Перейти в корзину"><span class="cart_circle"></span><span id="cart-total">Покупок
			 {% IF cart_count_empty %}
			 <span class="red">0</span>
			 {% ELSE %}
				 {CART_COUNT_TOTAL}
			 {% ENDIF %}
				 - на сумму
			
			 {% IF cart_count_empty %}
				 <span>0</span> {CURRENCY_NAME}
			 {% ELSE %}
				 {% FOR cart_sum %}
				 {cart_sum.NOW | money_format}<br />
				 {% ENDFOR %}
			 {% ENDIF %}</span>
			 </a>
		 </div>
		 <div class="content">
			 <div class="empty">Ваша корзина покупок пуста!</div>
		 </div>
		 <div class="clear"></div>
		 </div>
		 <!-- end Корзина -->

Переместите данный код после строки:
		 <div id="welcome"><img src="http://st.mebel-mondo.ru/7/1686/795/logotip.png"></div>

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#header #cart {z-index: 20;min-width: 300px;top:3px;right:20px;}

Замените на:
#header #cart {z-index: 20;min-width: 300px;top: 35px;right:20px;position: absolute;}

Найдите код:
#header #cart .heading h4 {color: #333333;font-size: 15px;font-weight: bold;margin-top: 0px;margin-bottom: 3px;text-align:right;}

Замените на:
#header #cart .heading h4 {color: #ffffff;font-size: 15px;font-weight: bold;margin-top: 0px;margin-bottom: 3px;text-align:right;}

Найдите код:
#header #cart .heading a {text-decoration: none;}

Замените на:
#header #cart .heading a {text-decoration: none; color: #ffffff;}

Найдите код:
#header #cart .cart_circle {display:block;width:36px;height:36px;background:url('{ASSETS_IMAGES_PATH}cart_circle.png') 50% 50% no-repeat;background-color:#CD3333;-webkit-border-radius: 50%;-moz-border-radius: 50%;-khtml-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;position:absolute;top:3px;right:0;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;cursor:pointer;}

Замените на:
#header #cart .cart_circle {display:block;width:36px;height:36px;background:url('{ASSETS_IMAGES_PATH}cart_circle.png') 50% 50% no-repeat;background-color:#000000;-webkit-border-radius: 50%;-moz-border-radius: 50%;-khtml-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;position:absolute;top:3px;right:0;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;cursor:pointer;}


#3 Yustus

Yustus

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

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 06 Июль 2015 - 20:49

Все получилось, нужно только немножко подкорректировать:

1) Сократить высоту шапки ( убрать небольшую часть сверху, как на изображении ниже)
2) Значек корзины сделать таким же по цвету, как значек  поиска ( сейчас значек корзины черный, а нужно серый)
3) Цвет суммы покупок сделать черным (на фото показал)



Изображение





Изображение

#4 Vaccina

Vaccina

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

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

Отправлено 07 Июль 2015 - 01:26

1. В main.css найдите:
#header #welcome {
  font-family: "Ubuntu Condensed";
  font-size: 25px;
  padding-top: 30px;
  position: relative;
}

замените на:
#header #welcome {
  font-family: "Ubuntu Condensed";
  font-size: 25px;
  position: relative;
}

далее найдите:
#header #support {
  float: right;
  margin-right: 170px;
  position: relative;
  top: 30px;
  width: 200px;
  z-index: 30;
}
#header #search {
  float: right;
  margin-bottom: 9px;
  position: relative;
  right: 650px;
  top: 50px;
  width: 225px;
  z-index: 15;
}
#header #cart {
  min-width: 300px;
  position: absolute;
  right: 20px;
  top: 35px;
  z-index: 20;
}

в них уменьшите значение top для поднятия таких элементов как поиск, контакты, корзина.

2. В main.css найдите:
#header #cart .cart_circle {display:block;width:36px;height:36px;background:url('{ASSETS_IMAGES_PATH}cart_circle.png') 50% 50% no-repeat;background-color:#000000;-webkit-border-radius: 50%;-moz-border-radius: 50%;-khtml-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;position:absolute;top:3px;right:0;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;cursor:pointer;}

замените на:
#header #cart .cart_circle {display:block;width:36px;height:36px;background:url('{ASSETS_IMAGES_PATH}cart_circle.png') 50% 50% no-repeat;background-color:#333333;-webkit-border-radius: 50%;-moz-border-radius: 50%;-khtml-border-radius: 50%;-ms-border-radius: 50%;border-radius: 50%;position:absolute;top:3px;right:0;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;cursor:pointer;}

3. Уточните пожалуйста, вы хотите изменить цвет шрифта у блока корзины?

#5 Yustus

Yustus

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

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 07 Июль 2015 - 07:18

Цвет суммы покупок. Если 0 рублей, то цифра 0 отображается белым, я если что-то в корзине есть. т отображается черным (как в случае на картинки).
Мне нужно чтоб цифры всегда отображались белым.

#6 Yustus

Yustus

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

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 07 Июль 2015 - 08:39

И еще одна проблемка возникла.
Когда что-то добавляешь в корзину, она прыгает немного вниз (После обновления страницы, все становится норм) Помогите исправить.

#7 Yustus

Yustus

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

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 08 Июль 2015 - 07:56

Пожалуйста ответьте, 2-ой день уже жду.

#8 Vaccina

Vaccina

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

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

Отправлено 09 Июль 2015 - 02:57

Просмотр сообщенияYustus (07 Июль 2015 - 07:18) писал:

Цвет суммы покупок. Если 0 рублей, то цифра 0 отображается белым, я если что-то в корзине есть. т отображается черным (как в случае на картинки).
Мне нужно чтоб цифры всегда отображались белым.

В main.css найдите:
#header #cart .heading a {
  color: #ffffff;
  text-decoration: none;
}

замените на:
#header #cart .heading a, #header #cart .heading a .num {
  color: #ffffff;
  text-decoration: none;
}

Просмотр сообщенияYustus (07 Июль 2015 - 08:39) писал:

И еще одна проблемка возникла.
Когда что-то добавляешь в корзину, она прыгает немного вниз (После обновления страницы, все становится норм) Помогите исправить.

В main.css найдите:
#header #cart .heading {
  float: right;
  margin-top: 15px;
  padding-left: 14px;
  padding-right: 46px;
  position: relative;
  z-index: 1;
}

замените на:
#header #cart > .heading {
  float: right;
  margin-top: 15px;
  padding-left: 14px;
  padding-right: 46px;
  position: relative;
  z-index: 1;
}


#9 Yustus

Yustus

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

  • Пользователи
  • PipPipPip
  • 177 сообщений
  • ГородОмск

Отправлено 09 Июль 2015 - 09:32

Спс, все получилось!




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

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