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


Зафиксировать Шапку, Разделить Меню, Баннеры

шапка

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

#1 марик

марик

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

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

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

Добрый день.
Помогите, пож-та.
1. Зафиксировать фон шапки. У меня монитор на 17", когда смотрю на ноуте (15) шапка уезжает влево. Надо, чтобы она не отделялась от основной таблицы.
2. баннеры между шапкой и контентом. Подскажите, что я сделала не так? У первого баннера ссылку не видно. Они должны появляться на каждой странице.
3. Как сделать, чтобы на Главной и в Каталоге товары  выходили  только по 3 штуки и бОльшего размера? Занимали всю ширину таблицы.
4. как разделить левое меню? рисунок
5. не фиксируется Выбор ни на одной странице. Появляется, только при нажатии на него и пропадает. Похоже задела код, но не могу найти где.


сайт: http://magic-jewelry.ru/

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

  • 2014-05-10_203132.jpg
  • 2014-05-11_120211.jpg


#2 lew

lew

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

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

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

Цитата

1)
В админке откройте main.css
найдите строку
#headerWrap {height: 370px; background: url(http://i64.fastpic.ru/big/2014/0510/9c/41d0a3a2502b7caaa44565690aeaf19c.jpg)no-repeat;position: relative;}
Замените на эту
#headerWrap {height: 370px; background: url("http://i64.fastpic.ru/big/2014/0510/9c/41d0a3a2502b7caaa44565690aeaf19c.jpg") no-repeat scroll 38% 0 rgba(0, 0, 0, 0); position: relative;}

Цитата

2)
откройте HTML
найдите код
<!-- Корзина -->
<div id="cartInfo">
<a href="{CART_URL}">товаров на</a>:
<span id="cartSum">
{% IF cart_count_empty %}
<span class="red">0</span> {CURRENCY_NAME}
{% ELSE %}
{% FOR cart_sum %}
<span>{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
{% ENDFOR %}
{% ENDIF %}
</span>
</div>
<!-- end Корзина -->



</div>


</div>



<div style="position:absolute;left:380px;top:285px;width: 900px;>
<tr>
<td>
<a href="http://magic-jewelry.ru/page/Skidki " ><img src="http://i62.fastpic.ru/big/2014/0508/14/33af728a16da67c23b216697a1bdea14.jpg" alt="Скидки" /></a>
<a href=" " ><img src="http://i62.fastpic.ru/big/2014/0508/a0/5ba870bb08599991c6ffdb1b8926e1a0.jpg" alt="Безналичный расчет" /></a>
<a href="http://magic-jewelry.ru/page/Доставка " ><img src="http://i62.fastpic.ru/big/2014/0508/77/83698921b3a4ba518f9e1eaaea6aff77.jpg" alt="Бесплатная доставка" /></a>
<a href=" " ><img src="http://i62.fastpic.ru/big/2014/0508/1c/6ce8c7706c6e2b0d101def4d05d3561c.jpg" alt="Подарки" /></a>
</td>
</tr> </div>



<div id="contentWrap">
<div id="content">

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

<!-- Корзина -->
<div id="cartInfo">
<a href="{CART_URL}">в корзине товаров на</a>:
<span id="cartSum">
{% IF cart_count_empty %}
<span class="red">0</span> {CURRENCY_NAME}
{% ELSE %}
{% FOR cart_sum %}
<span>{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br />
{% ENDFOR %}
{% ENDIF %}
</span>
</div>
<!-- end Корзина -->


<div style="position:absolute;left:54px;top:285px;width: 900px;">

<a href="http://magic-jewelry.ru/page/Skidki " ><img src="http://i62.fastpic.ru/big/2014/0508/14/33af728a16da67c23b216697a1bdea14.jpg" alt="Скидки" /></a>
<a href=" " ><img src="http://i62.fastpic.ru/big/2014/0508/a0/5ba870bb08599991c6ffdb1b8926e1a0.jpg" alt="Безналичный расчет" /></a>
<a href="http://magic-jewelry.ru/page/Доставка " ><img src="http://i62.fastpic.ru/big/2014/0508/77/83698921b3a4ba518f9e1eaaea6aff77.jpg" alt="Бесплатная доставка" /></a>
<a href=" " ><img src="http://i62.fastpic.ru/big/2014/0508/1c/6ce8c7706c6e2b0d101def4d05d3561c.jpg" alt="Подарки" /></a>
</div>

</div> <!-- header-->


</div><!-- headerWrap -->







<div id="contentWrap">
<div id="content">

Цитата

3)
откройте HTML,
в строчку поиска (в правом верхнем углу кода) введите следующее значение:   goods.index | is_divided("4","</tr><tr>","")}{%
она найдёт три строчки. И в каждой из них меняйте "4" на "3"
Откройте товары.
там сделайте тоже самое, но там такая строчка только одна.

Цитата

4. как разделить левое меню? рисунок
не полностью понял вопрос? сделать больше отступы между ними? УТОЧНИТЕ ПОЖАЛУЙСТА, а то боюсь ответить не правильно.

#3 марик

марик

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

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

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

Спасибо. Шапка и баннер норм.
Разделить меню, чтобы отдельно были Каталог товаров, Вы смотрели и все последующие менюшки слева. Между ними пробел, они сами в рамке. Планирую поменять цвет фона.
И еще товаров стало по 3 штуки (спасибо!), а как увеличить их размер? Сделать немного крупнее рисунки, уж больно они мелкие. Например на Главной, чтобы были на ширине слайдера, не просто отодвинуть, а увеличить размер. рисунок

Пока писала, возникло еще 2 вопроса.
1. Надо немного отодвинуть баннеры друг от друга.
2. не нашла, где можно поменять цвет кнопок: Положить в корзину, Пересчитать, Оформить заказ

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

  • 2014-05-11_135448.jpg
  • 2014-05-11_144800.jpg


#4 lew

lew

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

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

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

Цитата

И еще товаров стало по 3 штуки (спасибо!), а как увеличить их размер? Сделать немного крупнее рисунки, уж больно они мелкие. Например на Главной, чтобы были на ширине слайдера, не просто отодвинуть, а увеличить размер.
откройте main.css
строчку
.goodsListItemBlock {height:210px;width: 210px;margin: 5px 30px 25px 5px;overflow:hidden;}
замените на эту
.goodsListItemBlock {height:210px;width: 210px;margin: 5px 30px 25px 5px;overflow:hidden;}

Цитата

1)
откройте HTML
найдите код
<div style="position:absolute;left:54px;top:285px;width: 900px;">
замените на этот
<div class="indents-banners" style="">
потом откройте main.css
и в самом внизу вставьте новый код
.indents-banners{position:absolute;left:54px;top:285px;width: 900px;}
.indents-banners a{ margin: 0 8px 0 0;}
2)
для решения этой проблемы сперва вам нужно один файлик загрузить
Как это сделаете, я продолжу вам подсказывать.

Прикрепленные файлы



#5 lew

lew

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

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

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

на всякий случай выслал скриншот, если вы пока не знаете как загружать файлы.

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

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

  • Что надо сделать чтобы получилось вот так2.png


#6 марик

марик

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

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

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

Просмотр сообщенияlew (11 Май 2014 - 16:38) писал:

на всякий случай выслал скриншот, если вы пока не знаете как загружать файлы.

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

Товары и баннеры - норм. Спасибо!
Фаил загрузила.

#7 lew

lew

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

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

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

потом откройте HTML
найдите строчку
<link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />
замените на эту
 <link rel="stylesheet" href="{ASSETS_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />

потом откройте файл jquery.ui.all.min.css
и найдите строчку (примерно строка 750-800)


.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
				border: 1px solid #d3d3d3;
				background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
				font-weight: normal;
				color: #555;
			}
и  background: #e6e6e6 - меняйте на цвет который хотите
если картинка не нужна будет, то вместо url(images/ui-bg_glass_75_e6e6e6_1x400.png) поставmте none

#8 марик

марик

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

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

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

Просмотр сообщенияlew (11 Май 2014 - 17:05) писал:

потом откройте HTML
найдите строчку
<link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />
замените на эту
 <link rel="stylesheet" href="{ASSETS_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />

Готово.

#9 марик

марик

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

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

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

Все нашла, все поменяла. Проблемка: поставила другой цвет фона и надписи, сделал надписи жирнее и теперь активные стали меньше размером. Как сделать их одинаковыми?


Вопрос не актуален. Разобралась сама)

#10 марик

марик

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

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

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

Просмотр сообщенияlew (11 Май 2014 - 17:05) писал:

потом откройте HTML
найдите строчку
<link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />
замените на эту
 <link rel="stylesheet" href="{ASSETS_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />

потом откройте файл jquery.ui.all.min.css
и найдите строчку (примерно строка 750-800)


.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {
				border: 1px solid #d3d3d3;
				background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
				font-weight: normal;
				color: #555;
			}
и  background: #e6e6e6 - меняйте на цвет который хотите
если картинка не нужна будет, то вместо url(images/ui-bg_glass_75_e6e6e6_1x400.png) поставmте none

Вроде разобралась. Спасибо! А что насчет разделения левого меню на столбцы?

#11 MikDark

MikDark

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

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

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

Просмотр сообщениямарик (11 Май 2014 - 17:57) писал:

Вроде разобралась. Спасибо! А что насчет разделения левого меню на столбцы?

Немного не понятно, что Вы имеете ввиду. Увеличить расстояние между блоками Каталог и Вы смотрели или что-то другое?

#12 марик

марик

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

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

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

Просмотр сообщенияMikDark (12 Май 2014 - 07:29) писал:

Немного не понятно, что Вы имеете ввиду. Увеличить расстояние между блоками Каталог и Вы смотрели или что-то другое?

Нужно, чтобы эти блоки были подальше друг от друга и в рамке. Каталог, Вы смотрели и все подобные в левом меню. рисунок
И вы не могли бы ответить мне на вопрос в этой ветке: http://forum.storela..._40#entry137772  о всплывающей корзине.
Спасибо.

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

  • 2014-05-11_135448.jpg


#13 MikDark

MikDark

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

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

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

Просмотр сообщениямарик (12 Май 2014 - 09:16) писал:

Нужно, чтобы эти блоки были подальше друг от друга и в рамке. Каталог, Вы смотрели и все подобные в левом меню. рисунок
И вы не могли бы ответить мне на вопрос в этой ветке: http://forum.storela..._40#entry137772  о всплывающей корзине.
Спасибо.

В шаблоне HTML вам нужно каждый отдельный участок кода, например:
<!-- Каталог -->
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 <ul id="subNavigation">
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
		 <!-- end Каталог -->

и
<!-- Последние товары, просмотренные пользователем -->
			 {% IFNOT recently_viewed_goods_empty %}
			 <br /><h4 class="contentTbodyCatalogHeader">Вы смотрели</h4>
			 <div class="contentTbodyRecentlyViewed">
			 <table class="recent_viewed">
				 {% FOR recently_viewed_goods %}
				 {% IF recently_viewed_goods.index>3 %}{break}{% ENDIF %}
				 <tr class="alignLeft {% IF recently_viewed_goods.last %}last{% ENDIF %}">
				 <td class="img txtalgncnt">
					 <a href="{recently_viewed_goods.URL}" title="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;"><img class="goods-image-icon" src="{% IF recently_viewed_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{recently_viewed_goods.IMAGE_ICON}{% ENDIF %}" alt="{recently_viewed_goods.NAME}" /></a>
				 </td>
				 <td class="link statetitle fnt12n txtalgnlft">
					 <a href="{recently_viewed_goods.URL}" title="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;">{recently_viewed_goods.NAME}</a>
				 </td>
				 </tr>
				 {% ENDFOR %}
			 </table>
			 </div>
			 {% ENDIF %}
			 <!-- Последние товары, просмотренные пользователем -->

заключить между тэгами <div class="leftborder"> и </div>

Далее в шаблоне main.css дописать:
.leftborder {
border: 1px solid #000000;
}

1px - толщина рамки, #000000 - код цвета. Можно сгенерировать здесь

#14 марик

марик

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

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

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

Просмотр сообщенияMikDark (12 Май 2014 - 09:39) писал:

В шаблоне HTML вам нужно каждый отдельный участок кода, например:
<!-- Каталог -->
		 <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>
			 <ul id="subNavigation">
		 {%IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
					 <li>
					 <a href="{catalog.URL}"
						 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
						 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
					 >{catalog.NAME}</a>
					 </li>
				 {% ENDIF %}
				 {% ENDFOR %}
			 {% ENDIF %}
		 </ul>
		 <!-- end Каталог -->

и
<!-- Последние товары, просмотренные пользователем -->
			 {% IFNOT recently_viewed_goods_empty %}
			 <br /><h4 class="contentTbodyCatalogHeader">Вы смотрели</h4>
			 <div class="contentTbodyRecentlyViewed">
			 <table class="recent_viewed">
				 {% FOR recently_viewed_goods %}
				 {% IF recently_viewed_goods.index>3 %}{break}{% ENDIF %}
				 <tr class="alignLeft {% IF recently_viewed_goods.last %}last{% ENDIF %}">
				 <td class="img txtalgncnt">
					 <a href="{recently_viewed_goods.URL}" title="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;"><img class="goods-image-icon" src="{% IF recently_viewed_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{recently_viewed_goods.IMAGE_ICON}{% ENDIF %}" alt="{recently_viewed_goods.NAME}" /></a>
				 </td>
				 <td class="link statetitle fnt12n txtalgnlft">
					 <a href="{recently_viewed_goods.URL}" title="Перейти на страницу &laquo;{recently_viewed_goods.NAME}&raquo;">{recently_viewed_goods.NAME}</a>
				 </td>
				 </tr>
				 {% ENDFOR %}
			 </table>
			 </div>
			 {% ENDIF %}
			 <!-- Последние товары, просмотренные пользователем -->

заключить между тэгами <div class="leftborder"> и </div>

Далее в шаблоне main.css дописать:
.leftborder {
border: 1px solid #000000;
}

1px - толщина рамки, #000000 - код цвета. Можно сгенерировать здесь


Спасибо. А как теперь их разделить? И чтобы цвет верхнего заголовка был во весь блок? рисунок

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

  • 2014-05-12_104241.jpg


#15 MikDark

MikDark

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

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

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

Просмотр сообщениямарик (12 Май 2014 - 09:48) писал:

Спасибо. А как теперь их разделить? И чтобы цвет верхнего заголовка был во весь блок? рисунок

Сюда:
.leftborder {
border: 1px solid #000000;
}

между скобок добавьте еще строчку:
margin-bottom: 10px;

10px - отступ, можно его менять.

Далее в main.css нужно добавить:
.leftMenuBlock .leftborder {background-color: rgb(200, 219, 241);}


#16 марик

марик

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

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

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

Просмотр сообщенияMikDark (12 Май 2014 - 09:51) писал:

Сюда:
.leftborder {
border: 1px solid #000000;
}

между скобок добавьте еще строчку:
margin-bottom: 10px;

10px - отступ, можно его менять.

Далее в main.css нужно добавить:
.leftMenuBlock .leftborder {background-color: rgb(200, 219, 241);}

Блоки разделились, но по-прежнему вверхушка не на всю длину.

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

  • 2014-05-12_110005.jpg


#17 MikDark

MikDark

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

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

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

Просмотр сообщениямарик (12 Май 2014 - 10:06) писал:

Блоки разделились, но по-прежнему вверхушка не на всю длину.

Извиняюсь, нужно было добавить этот код:
#leftMenuBlock .leftborder {background-color: rgb(200, 219, 241);}


#18 марик

марик

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

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

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

Просмотр сообщенияMikDark (12 Май 2014 - 10:11) писал:

Извиняюсь, нужно было добавить этот код:
#leftMenuBlock .leftborder {background-color: rgb(200, 219, 241);}

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

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

  • 2014-05-12_104241.jpg


#19 MikDark

MikDark

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

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

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

Просмотр сообщениямарик (12 Май 2014 - 10:15) писал:

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

Тогда отмените изменения, далее находим:
.contentTbodyCatalogHeader {
margin: 0 1em 0.33em 0.7em;
padding-bottom: 0.2em;
background-color: rgb(200, 219, 241);
border: 0px solid rgb(18, 88, 30);
border-radius: 5px;
padding: 10px;
}

и меняем на:
.contentTbodyCatalogHeader {
margin: 0px;
padding-bottom: 0.2em;
background-color: rgb(200, 219, 241);
border: 0px solid rgb(18, 88, 30);
padding: 10px;
}


#20 марик

марик

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

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

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

Просмотр сообщенияMikDark (12 Май 2014 - 10:21) писал:

Тогда отмените изменения, далее находим:
.contentTbodyCatalogHeader {
margin: 0 1em 0.33em 0.7em;
padding-bottom: 0.2em;
background-color: rgb(200, 219, 241);
border: 0px solid rgb(18, 88, 30);
border-radius: 5px;
padding: 10px;
}

и меняем на:
.contentTbodyCatalogHeader {
margin: 0px;
padding-bottom: 0.2em;
background-color: rgb(200, 219, 241);
border: 0px solid rgb(18, 88, 30);
padding: 10px;
}

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

При выборе товара в левом меню блоки разделились только вверху, а нужно, чтобы все без исключения были отдельно. рисунок.

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

  • 2014-05-12_112632.jpg
  • 2014-05-12_113607.jpg






Темы с аналогичным тегами шапка

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

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