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


Интернет-Магазин Трикотажа (Шаблон Сияние)

Автор punkkez, 14 июня 2013 11:06

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

#181 punkkez

punkkez

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

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

Отправлено 30 Июль 2013 - 10:12

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

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

  • Снимок2.JPG
  • шапка.jpg
  • подвал.jpg

#182 miyako

miyako

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

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

Отправлено 30 Июль 2013 - 13:15

Просмотр сообщенияpunkkez (30 Июль 2013 - 10:12) писал:

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

1) Найдите в шаблоне HTML код -
	  <!-- Поиск -->
	  <div id="search">
		<form action="http://{NET_DOMAIN}/search" id="searchform" method="get">
		  <div>
			<input type="text"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" id="s" class="search_box alignleft" name="q" />
			<input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" />
			<div class="clr"></div>
		  </div>
		</form>
	  </div>
	  <div class="clr"></div>
	  <!-- end Поиск -->
и удалите его.

Далее найдите в файле main.css код - 
#top-menu {
height: 40px;
margin-top: -39px;
}
и замените на:
#top-menu {
height: 40px;
}

2) Найдите код в шаблоне HTML - 
<div class="b_page" id="wrapper">
и замените на:
<div class="b_page" id="wrapper" style="margin-top:0px;">

3. Логотип. Загрузите Изображение logo.png (в формате png) через Сайт-Редактор шаблонов- Выбрать Файлы
Слоган. Найдите код в HTML - 
<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="На главную"></a></div>
<div class="slogan"><em><strong><center><span></span></center></strong></em></div>
и замените на:
<div class="pad-box cont620" id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png" alt="На главную"></a>
<p class="slog">Ваш слоган</p>
</div>
Далее вставьте код в конец main.css - 
.slog {color: black;
font-size: 19px;
font-weight: bold;}

4. Объясните пожалуйста подробнее. На скриншоте непонятно что значит в Вашем понимании быть активными

Проделайте пожалуйста все эти изменения, затем можно будет доделать остальное

#183 punkkez

punkkez

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

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

Отправлено 30 Июль 2013 - 13:18

Цитата

4. Объясните пожалуйста подробнее. На скриншоте непонятно что значит в Вашем понимании быть активными
т.е чтобы пункты как каталог и далее идущие по этой же строке не нажимались а были обычными "надписями" а то что ниже этих строк, например, оплата, доставка и т.д можно было нажать и перейти на определенную страницу
что то как то не все получилось

#184 punkkez

punkkez

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

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

Отправлено 30 Июль 2013 - 15:19

немного исправил, теперь осталось сделать корзину как в скрине №2 и оформить подвал как в скрине №3

#185 Сake

Сake

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

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

Отправлено 31 Июль 2013 - 00:18

Для корзины вы можете сделать следующее - в файле стилей main.css найдите 

#cartInfo {
	font-size: 13px;
	height: 50px;
	left: 800px;
	margin-top: 10px;
	overflow: hidden;
	position: absolute;
	top: 54px;
	white-space: nowrap;
	width: 340px;
}

и замените на

#cartInfo {
	font-size: 13px;
	height: 90px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 54px;
	white-space: nowrap;
	width: 200px;
}

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

#cartInfo a {
	color: #000000;
	font: 20px Verdana,Geneva,sans-serif;
	padding: 5px 0 5px 45px;
	text-transform: uppercase;
}

и замените на

#cartInfo a {
	color: #000000;
	display: block;
	font: 20px Verdana,Geneva,sans-serif;
	padding-top: 10px;
	text-align: center;
	text-transform: uppercase;
}

далее понадобиться только изменить надпись в шаблоне "HTML" а именно убрать лишний тег <br /> и заменить текст в случае необходимости.

Для подвала вы можете использовать следующую конструкцию

<div class="footer-block">
<span>Каталог</span>
<ul>
{% FOR menu %}
{% FOR header1 %}
{% FOR links %}
<li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
</div>

где 

<span>Каталог</span>

заголовок, а остальная часть <ul> уже списки. Данных блоков может быть несколько, и все они подразумевают создание дополнительных меню в разделе Сайт -> Меню. В примере выше в качестве "Имя переменной в шаблоне" использовалась "header1". Данные блоки вы можете вставить внутрь блока

<div class="left">


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

<div class="left">
	<div class="footer-block">
	   <span>Каталог</span>
	   <ul>
	   {% FOR menu %}
	   {% FOR header1 %}
	   {% FOR links %}
	   <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
	   {% ENDFOR %}
	   {% ENDFOR %}
	   {% ENDFOR %}
	   </ul>
	</div>
	<div class="footer-block">
	   <span>Помощь покупателю</span>
	   <ul>
	   {% FOR menu %}
	   {% FOR header2 %}
	   {% FOR links %}
	   <li><a href="{menu.header2.links.URL}" {% IF menu.header2.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %}>{menu.header2.links.NAME}</a></li>
	   {% ENDFOR %}
	   {% ENDFOR %}
	   {% ENDFOR %}
	   </ul>
	</div>
</div>
<div style="clear: both;"></div>

для стилизации и выравнивании блоков - можно добавить в файл стилей main.css

.footer-block {
   color: #fff;
   float: left;
}

#186 punkkez

punkkez

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

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

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

спасибо, а как теперь их выровнять по столбикам? вот я заметил что к каждому идет класс footer-block, может их пронумеровать и через css выровнять?

#187 punkkez

punkkez

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

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

Отправлено 31 Июль 2013 - 13:31

теперь еще и куда то пункты из подвала пропали, помогите выровнять все как нужно

#188 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2013 - 13:49

Просмотр сообщенияpunkkez (31 Июль 2013 - 06:23) писал:

спасибо, а как теперь их выровнять по столбикам? вот я заметил что к каждому идет класс footer-block, может их пронумеровать и через css выровнять?
В main.css в стилях 
#footer .left ul li
удалите   
display: inline;
а код
padding-right: 8px;
замените на этот 
padding: 5px 15px 0 5px;

#189 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2013 - 13:54

Просмотр сообщенияpunkkez (31 Июль 2013 - 13:31) писал:

теперь еще и куда то пункты из подвала пропали, помогите выровнять все как нужно
У вас в html в коде подвала прописан вывод меню header1 и header2. В разделе Сайт-Меню в каждом из них есть по 2 пункта. На сайте они и отображаются.

#190 punkkez

punkkez

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

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

Отправлено 31 Июль 2013 - 14:02

спасибо, а я что то и не посмотрел, значит случайно отменил изменения с подвалом, сохранил, но теперь ссылки которые находятся под контактами нужно сделать того же шрифта что и остальное
а как сделать корзину так же как в скрине выше (http://forum.storela...attach_id=10776), и как в приложенном скрине скруглить углы и убрать полосу между меню и контентом

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

  • Безымянный2.png

Сообщение отредактировал punkkez: 31 Июль 2013 - 14:27

#191 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2013 - 15:22

Просмотр сообщенияpunkkez (31 Июль 2013 - 14:02) писал:

спасибо, а я что то и не посмотрел, значит случайно отменил изменения с подвалом, сохранил, но теперь ссылки которые находятся под контактами нужно сделать того же шрифта что и остальное
а как сделать корзину так же как в скрине выше (http://forum.storela...attach_id=10776), и как в приложенном скрине скруглить углы и убрать полосу между меню и контентом
В html замените код 
<p><a href="http://izh-futbolka.ru/feedback">Обратная связь</a></p>
<p><a href="http://vk.com/izh_futbolka" target="_blank">Мы Вконтакте</a></p>
на 
<li><a href="http://izh-futbolka.ru/feedback">Обратная связь</a></li>
<li><a href="http://vk.com/izh_futbolka" target="_blank">Мы Вконтакте</a></li>
Теперь в main.css добавьте код 
#header {
margin-bottom: -1px;
}
а код 
#cpages {
background: url(http://izh-futbolka.storeland.net/cpage-top-bg.jpg) repeat-y 0px 80px;
padding-top: 20px;
}

#cpages {
background: url(http://izh-futbolka.storeland.net/cpage-top-bg.jpg) repeat-y 0px 80px;
padding-top: 20px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
В корзине вам нужен текст, отражающий не только стоимость товаров в корзине , но и их кол-во? Попробуйте в html код
<span class="num">{cart_sum.NOW | money_format}</span><br />
заменить на этот
<span class="num"> {CART_COUNT_TOTAL}товар{CART_COUNT_TOTAL | gen_word_end("", "а", "ов")} | {cart_sum.NOW | money_format}</span><br />

#192 punkkez

punkkez

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

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

Отправлено 31 Июль 2013 - 15:32

да, с корзиной почти то что надо, вот прилагаю скрин как хотелось бы еще отформатировать ее (слева как сейчас, справа как хочется)

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

  • Снимок.JPG

#193 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2013 - 15:50

Просмотр сообщенияpunkkez (31 Июль 2013 - 15:32) писал:

да, с корзиной почти то что надо, вот прилагаю скрин как хотелось бы еще отформатировать ее (слева как сейчас, справа как хочется)
А main.css добавьте код 
#cartSum {
line-height: 45px;
margin-left: 25px;
}

#194 punkkez

punkkez

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

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

Отправлено 31 Июль 2013 - 16:08

спасибо

#195 punkkez

punkkez

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

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

Отправлено 31 Июль 2013 - 17:31

еще заметил что на странице товара карусель "с этим товаром смотрят" имеет фон, как его убрать? и еще решил убрать условие чтобы зарегистрированные пользователи видели одну цену а незарегистрированные другую цену, как это сделать?

#196 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 31 Июль 2013 - 23:04

Просмотр сообщенияpunkkez (31 Июль 2013 - 17:31) писал:

еще заметил что на странице товара карусель "с этим товаром смотрят" имеет фон, как его убрать? и еще решил убрать условие чтобы зарегистрированные пользователи видели одну цену а незарегистрированные другую цену, как это сделать?
В шаблоне "Товар" карусель "с этим товаром смотрят" начинается с тега 
<div id="wrapper">
Этот тет имеет такой-же идентификатор, как тег, содержащий фон сайта. Надо просто поменять идентификатор у этого тега, например 
<div id="wrap">
В том же шаблоне, код, отражающий цену товара в зависимости от того, зарегистрирован пользователь или нет
<!-- Цена сейчас -->
{% IF CLIENT_IS_LOGIN %}
														  Цена:<span class="goodsDataMainModificationPriceNow" title="Цена сейчас" itemprop="price" content="{GOODS_MOD_PRICE_OLD}">{GOODS_MOD_PRICE_OLD | money_format}</span>
												 {%ELSE%}
														  Цена:<span class="goodsDataMainModificationPriceNow" title="Цена сейчас" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span>
												{%ENDIF%}
Нужно оставить, видимо, только строчку 
Цена:<span class="goodsDataMainModificationPriceNow" title="Цена сейчас" itemprop="price" content="{GOODS_MOD_PRICE_NOW}">{GOODS_MOD_PRICE_NOW | money_format}</span>

#197 punkkez

punkkez

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

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

Отправлено 01 Август 2013 - 06:14

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

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

  • Снимок.JPG
  • Снимок.JPG

#198 punkkez

punkkez

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

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

Отправлено 01 Август 2013 - 11:50

при выборе модификаций выдает ошибку
На странице возникла JS ошибка: Script error. на строке: 0. Адрес файла: Как исправить ошибку?

#199 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 01 Август 2013 - 15:54

Просмотр сообщенияpunkkez (01 Август 2013 - 06:14) писал:

а как изменить в шаблоне товары, теперь зарегистрированные пользователи видят одну и ту же цену скрин прилагаю
и еще как сделать кнопку подробнее (кнопку "купить" не буду ставить) при выводе таблицей (в скрине указал)
немного разобрался как сделать эту кнопку, теперь нужно ее выровнять чтобы она была одинаково расположена по сравнению с остальными товарами
и еще нужно выровнять все заголовки блоков по одной линии (скрин2) и сделать отступы поменьше (выделил красным)
Выровняем кнопки "Подробнее" по нижней линии. В шаблоне "Товары" строчка кода этой кнопки
<a class="readmore-3" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>				</div>
вот этот <div> в конец переставьте вначало, перед <a>. Далее ~30 строками выше код
<div class="goodsListItemBlock withBorder cornerAll">
измените так
<div class="goodsListItemBlock withBorder cornerAll" style="position: relative;">
В main.css код
  a.readmore-3 {
margin: auto;
font: bold 12px/30px Arial, Geneva, sans-serif;
  color: #666;
  text-decoration: none;
  background: url({ASSETS_IMAGES_PATH}read_more_only_button.jpg) no-repeat left top;
  height: 30px;
  width: 135px;
  padding-left: 15px;
  display: block;}
  a.readmore-2:hover{color: #fff; background: url({ASSETS_IMAGES_PATH}read_more_only_button.jpg) no-repeat left bottom;}
замените на этот
  a.readmore-3 {
font: bold 12px/30px Arial, Geneva, sans-serif;
  color: #666;
  text-decoration: none;
  background: url({ASSETS_IMAGES_PATH}read_more_only_button.jpg) no-repeat left top;
  height: 30px;
  width: 150px;
  display: block;}
  a.readmore-2:hover{color: #fff; background: url({ASSETS_IMAGES_PATH}read_more_only_button.jpg) no-repeat left bottom;
position: absolute;
left: 15%;
bottom: 3px;
}
Выровнять заголовки в левом блоке можно так. В main.css в коде 
.lenta {
position: absolute;
background: no-repeat url({ASSETS_IMAGES_PATH}verh_catalog.png);
width: 220px;
height: 30px;
z-index: 1;
margin-left: -27px;
}
удалите margin-left: -27px;
А в коде 
.leftmenu li h2 {
font: bold 17px/60px Helvetica, "Trebuchet MS", Arial, sans-serif;
color: #ED6D18;
text-transform: uppercase;
margin-left: 40px;
margin-top: -5px;
}меняйте margin-left: 40px; чтобы двигать все эти заголовки. При значении 40px, заголовки будут примерно посередине. Чтобы они выровнялись по левому краю, можно присвоить значение 10px.
Теперь с ценами. В шаблоне "Товары" код 
{% IF CLIENT_IS_LOGIN %}<a href="{goods.URL_MIN_PRICE_OLD}">{goods.MIN_PRICE_OLD | money_format}</a>{% ELSE %}<a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>{% ENDIF %}
измените на 
<a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
Для товаров, отображаемых таблицей. И код 
Цена сейчас: {% IF CLIENT_IS_LOGIN %}<a href="{goods.URL_MIN_PRICE_OLD}">{goods.MIN_PRICE_OLD | money_format}</a>{% ELSE %}<a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>{% ENDIF %}
замените на 
<a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
Для товаров, отображаемых списком.

#200 punkkez

punkkez

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

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

Отправлено 01 Август 2013 - 18:20

спасибо, поти все вышло как надо, кроме кнопки подробнее, она прилипла к левому краю
Обратно в Магазины


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

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

  1. Форум владельцев интернет-магазинов
  2. → Практика работы интернет магазина
  3. → Магазины
  4. Privacy Policy