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

[grappp]

Здравствуйте, подскажите, пожалуйста как перенести каталог из левого меню над шапку.
Каждой категории присвоить картинку.

Примерно как тут:



И как можно каталог разделить. Например, что бы в шапке (как в примере выше) отображалось 5ть разделов, а в подвале (как в примере ниже) уже все разделы.


И подскажите, пожалуйста, как можно сделать такой подвал:




Заранее спасибо за помощь.

[Vaccina]

про каталог вам ответили в другой теме, уточните пожалуйста на счет подвала, какие блоки помимо каталога там будут располагаться?

[grappp]

Vaccina (26 Сентябрь 2014 - 01:11) писал:

про каталог вам ответили в другой теме, уточните пожалуйста на счет подвала, какие блоки помимо каталога там будут располагаться?

Хотелось бы 4ри блока

1 блок (название магазина)
- О Нас
- Связь с нами
- Новости
- Акции
- Карта сайта

2 блок (Клиенту)
- Личный кабинет
- Оплата
- Доставка

3 блок (Бренды)

"тут идут бренды" (разделы каталога, которые не вошли в шапку)

4 блок (Мы в социальных сетях)

[Vaccina]

В шаблоне HTML найдите:

<!-- Подвал -->
<div id="footer">
<div id="main">
<div class="menufooter">
	 <ul>
	 {% FOR menu %}
		 {% FOR footer %}
		 {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %}
		 {% ENDFOR %}
	 {% ENDFOR %}
	 </ul>
</div>
<div class="copyring">
	 <p>&copy; {DATE_YEAR} {SETTINGS_STORE_NAME}. <br />{SETTINGS_STORE_ORG_NAME}.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->

замените на:

<!-- Подвал -->
<div id="footer">
<div class="column">
<h3>Заголовок</h3>
	 <ul>
	 {% FOR menu %}
		 {% FOR footer %}
		 {% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %}
		 {% ENDFOR %}
	 {% ENDFOR %}
	 </ul>
</div>
<div class="column">
<h3>Заголовок</h3>
	 <ul>
	 {% FOR menu %}
		 {% FOR footer2 %}
		 {% FOR links %}<li {% IF menu.footer2.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer2.links.URL}" {% IF menu.footer2.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer2.links.TITLE %}title="{menu.footer2.links.TITLE}"{% ENDIF %}>{menu.footer2.links.NAME}</a></li>{% ENDFOR %}
		 {% ENDFOR %}
	 {% ENDFOR %}
	 </ul>
</div>
<div class="column">
<h3>Заголовок</h3>
	 <ul>
	 {% IFNOT catalog_empty %}
		 {% FOR catalog %}
		 {% IFNOT catalog.HIDE %}
			 <li style="{% IF catalog.LEVEL>0%}displai:none;{% ENDIF %}"><a href="{catalog.URL}">{catalog.NAME}</a></li>
		 {% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}
	 </ul>
</div>
<div class="column">
<h3>Заголовок</h3>
	 <a href="ссылка на группу\страницу"><img src="ссылка на картинку соц сети" alt="" />
</div>
</div>
<!-- Подвал-Конец -->

далее в шаблоне main,css добавьте:

#footer .column{
display:inline-block;
width:20%;
margin:0 2%
}
#footer .column h3{
font-size:16px;
font-weight:bold;
}

также в разделе Сайт - Меню - создайте блок меню с переменной footer2 и добавьте необходимые ему пункты(он отвечает за блок "клиентам")

[grappp]

Все сделал по инструкции, но вышло как-то не так (
На скринах все видно!

Заранее спасибо за помощь!

[grappp]

В общем скрытые категории в подвале я вывел другим способом ) По аналогии с использованием footer2 только создал еще footer3

Теперь вот только по футеру выровнять бы все.

[grappp]

Так, блоки выровнял сам )
А как вообще убрать эту серую подложку в футере? И между блоками добавить графический разделитель.

[grappp]

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

[MikDark]

grappp (26 Сентябрь 2014 - 12:39) писал:

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

1.png

2.png

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

#footer {
clear: both;
width: 100%;
margin: 20px 0 17px 0;
}

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

#footer {
clear: both;
width: 1000px;
margin: 20px auto 17px auto;
}

[grappp]

У меня такого кода вообще не было )
Я его добавил просто и все стало ОК.

Спасибо большое!

[grappp]

Подскажите, пожалуйста, а как можно поменять цвет и размер шрифта?



И как можно избавиться от этой невидимой полоски?

[Alekseys]

grappp (26 Сентябрь 2014 - 13:38) писал:

Подскажите, пожалуйста, а как можно поменять цвет и размер шрифта?

1.png

И как можно избавиться от этой невидимой полоски?

2.png

Здравствуйте. В main.css замените

#footer .column h3 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}

на

#footer .column h3 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: red;
}

затем в конец main.css добавьте

#footer .column a {
color: red;
}

и редактируя параметр color: red; выберите нужный цвет.Полоску в нижней части сайта убрать не получится, единственное, что можно сделать - удалить в main.css

#backtop {
background: url(http://design.aquaink.ru/bgout.jpg) bottom center no-repeat fixed;
}

либо отредактировать bgout.jpg так, чтобы эта полоса не была так заметна.

[grappp]

Alekseys (26 Сентябрь 2014 - 14:09) писал:

Полоску в нижней части сайта убрать не получится, единственное, что можно сделать - удалить в main.css

#backtop {
background: url(http://design.aquaink.ru/bgout.jpg) bottom center no-repeat fixed;
}

либо отредактировать bgout.jpg так, чтобы эта полоса не была так заметна.

Вы меня видимо не поняли )
Полоса не имеет отношения (как мне кажется) к слою bgout.jpg

Смотрите, если я чуть чуть поднимаю прокрутку, то полоса исчезает и под ней как раз bgout.jpg  а вот если прокрутить до самого конца то она вытягивается от куда-то.
И это точно не bgout.jpg, так как у меня фон закреплен.

На скринах видно:

[Alekseys]

grappp (26 Сентябрь 2014 - 17:29) писал:

Вы меня видимо не поняли )
Полоса не имеет отношения (как мне кажется) к слою bgout.jpg

Смотрите, если я чуть чуть поднимаю прокрутку, то полоса исчезает и под ней как раз bgout.jpg  а вот если прокрутить до самого конца то она вытягивается от куда-то.
И это точно не bgout.jpg, так как у меня фон закреплен.

На скринах видно:

1.png

2.png

В main.css замените

#backtop {
background: url(http://design.aquaink.ru/bgout.jpg) bottom center no-repeat fixed;
}

на

#backtop {
background: url(http://design.aquaink.ru/bgout.jpg) bottom center no-repeat fixed;
padding-bottom: 1px;
}