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


odissei

Регистрация: 26 окт. 2012
Offline Активность: 26 сент. 2013 17:48
*****

#36354 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено odissei на 24 Декабрь 2012 - 11:16

апну тему, а то вдруг потерялась))

Решение ведь не сложное полагаю (ведь есть образец).

Еще раз вопрос:
Помогите пожалуйста кодом, для двух вариантов указанных в сообщении
http://forum.storela...кле/#entry36240

Заранее спасибо.


#36358 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено Koderhan на 24 Декабрь 2012 - 12:14

Просмотр сообщенияodissei (24 Декабрь 2012 - 11:16) писал:

апну тему, а то вдруг потерялась))

Решение ведь не сложное полагаю (ведь есть образец).

Еще раз вопрос:
Помогите пожалуйста кодом, для двух вариантов указанных в сообщении
http://forum.storela...кле/#entry36240

Заранее спасибо.
В файле main.csstemplate.
Найти код:
#bottobj { background:url({ASSETS_IMAGES_PATH}conteiner-bg.png) 0 -11px no-repeat; width:1000px; height:11px; margin:0 auto; }
Заменить:
#bottobj {width:1000px; height:11px; margin:0 auto; }
В файле 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}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->
Найти код:

			 {% IF news_list_articles.SHOW_TIME %}
				 <div class="statedate fnt12 fnt11n txtalgnlft">
				 {news_list_articles.TIME | date("d.m.Y")}
				 </div>
			 {% ENDIF %}
			 </div>
		 {% ENDFOR %}
		 </div>
		 <div class="blockbottom"></div>
	 </div>
	 {% ENDIF %}
	 <!-- END Если есть список статей и если в тарифном плане подключен модуль новостей -->
{% ENDIF %}
</div>
ScreenShot 285.jpg
И вставить после:
<!-- Подвал -->
<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}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->
ScreenShot 284.jpg

Для добавления эффекта закругления углов.
В файле main.csstemplate.
Найти код:
#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
padding-left: 15px;
padding-right: 15px;
}
Заменить:
#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
}



#36360 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено odissei на 24 Декабрь 2012 - 12:27

Сделал как писали, как то все поломалось.

Что не так?


#36366 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено Koderhan на 24 Декабрь 2012 - 14:21

попробуйте восстановить шаблон из резервной копии и заново повторить эти же действия.


#36434 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено odissei на 25 Декабрь 2012 - 02:04

Хм, не получается.

По порядку:
1.Делаю изменения в стилях, приведенные в посте (или посту :)) № 11 даннной темы.
Тут все просто и ясно.

2. По коду HTML начинается путанится у меня:
2.1. Найти и удалить код:
<!-- Подвал -->
<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}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->

Здесь надо удалить код подвала.
А ниже, надо вставить код (другой) после кода подвала.

Если удалить код подвала, то подвал просто исчезнет.

Потому я решил что конечный код, должен соответствовать вашим скриншотам (рисункам) кода (именно последнему):
Получается по тому рисунку надо было сделать так:
Найти следующий код, и вставить его после подвала:
<div class="clear"></div>
</div>
</div>
<div id="bottobj"></div>

В итоге мы имеем следующий код:
{% IF news_list_articles.SHOW_TIME %}
				 <div class="statedate fnt12 fnt11n txtalgnlft">
				 {news_list_articles.TIME | date("d.m.Y")}
				 </div>
			 {% ENDIF %}
			 </div>
		 {% ENDFOR %}
		 </div>
		 <div class="blockbottom"></div>
	 </div>
	 {% ENDIF %}
	 <!-- END Если есть список статей и если в тарифном плане подключен модуль новостей -->
{% ENDIF %}
</div>
<!-- Подвал -->
<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}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->

<div class="clear"></div>
</div>
</div>
<div id="bottobj"></div>

Который соответствует коду, который приведен на вашем последнем скриншоте.

Получилось вот так:1.jpg
Я со страницы убрал все, чтобы она в один скрин влезла.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

В принципе это соответствует 1му варинту из сообщения №7 данной темы. Но не много не то (там я рисовал что стекло проходит под футером, а не как окантовка только по бокам). (возможно код представить как это сделать, пример все тот же инфэшн.рф)

Если немного изменить, то это будет соответствовать варианту 2 из 7 поста. Только надо чтобы оконтовка из стекла по бокам, была на протяжении всей страницы (т.е. начало с самого вверха, как и есть счас, и заканчивалась в самом низу страници, ниже футера). Если это довольно трудно (громоздить всякой фигни придется) то можно сделать, опять же, как на том эе инфэшн.рф, - стекло начинается к верхнему краю впритык, а внизу заканчивается под футером, немного не доходя нижнего края страницы. Важное условие: под футером все должно быть под стеклом (не только бока).

Для наглядности привожу скриншоты:
1. Надо чтобы было вот так:
3.jpg
Оно же, с вашего поста:
4.png

2. Или, хотя бы, вот так:
2.jpg

Ресурс : bel-mag.ru

Еще раз спасибо за помощь, большое.
Надеюсь не сильно одолел уже)


#36442 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено miyako на 25 Декабрь 2012 - 07:18

Просмотр сообщенияodissei (25 Декабрь 2012 - 02:04) писал:

Хм, не получается.

По порядку:
1.Делаю изменения в стилях, приведенные в посте (или посту :)) № 11 даннной темы.
Тут все просто и ясно.

2. По коду HTML начинается путанится у меня:
2.1. Найти и удалить код:
<!-- Подвал -->
<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}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->

Здесь надо удалить код подвала.
А ниже, надо вставить код (другой) после кода подвала.

Если удалить код подвала, то подвал просто исчезнет.

Потому я решил что конечный код, должен соответствовать вашим скриншотам (рисункам) кода (именно последнему):
Получается по тому рисунку надо было сделать так:
Найти следующий код, и вставить его после подвала:
<div class="clear"></div>
</div>
</div>
<div id="bottobj"></div>

В итоге мы имеем следующий код:
{% IF news_list_articles.SHOW_TIME %}
				 <div class="statedate fnt12 fnt11n txtalgnlft">
				 {news_list_articles.TIME | date("d.m.Y")}
				 </div>
			 {% ENDIF %}
			 </div>
		 {% ENDFOR %}
		 </div>
		 <div class="blockbottom"></div>
	 </div>
	 {% ENDIF %}
	 <!-- END Если есть список статей и если в тарифном плане подключен модуль новостей -->
{% ENDIF %}
</div>
<!-- Подвал -->
<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}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
</div>
</div>
</div>
<!-- Подвал-Конец -->

<div class="clear"></div>
</div>
</div>
<div id="bottobj"></div>

Который соответствует коду, который приведен на вашем последнем скриншоте.

Получилось вот так:Прикрепленный файл 1.jpg
Я со страницы убрал все, чтобы она в один скрин влезла.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

В принципе это соответствует 1му варинту из сообщения №7 данной темы. Но не много не то (там я рисовал что стекло проходит под футером, а не как окантовка только по бокам). (возможно код представить как это сделать, пример все тот же инфэшн.рф)

Если немного изменить, то это будет соответствовать варианту 2 из 7 поста. Только надо чтобы оконтовка из стекла по бокам, была на протяжении всей страницы (т.е. начало с самого вверха, как и есть счас, и заканчивалась в самом низу страници, ниже футера). Если это довольно трудно (громоздить всякой фигни придется) то можно сделать, опять же, как на том эе инфэшн.рф, - стекло начинается к верхнему краю впритык, а внизу заканчивается под футером, немного не доходя нижнего края страницы. Важное условие: под футером все должно быть под стеклом (не только бока).

Для наглядности привожу скриншоты:
1. Надо чтобы было вот так:
Прикрепленный файл 3.jpg
Оно же, с вашего поста:
Прикрепленный файл 4.png

2. Или, хотя бы, вот так:
Прикрепленный файл 2.jpg

Ресурс : bel-mag.ru

Еще раз спасибо за помощь, большое.
Надеюсь не сильно одолел уже)

В панели управления магазином, в разделе "Сайт" > "Редактор тем" в блоке "Стили и скрипты" находим файл main.csstemplate, открываем его и вставляем следующий код:
#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
}
И замените его на:
#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
padding-left: 15px;
padding-right: 15px;
border-radius: 10px;
height:100%;
}



#36173 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено miyako на 22 Декабрь 2012 - 12:38

Просмотр сообщенияodissei (22 Декабрь 2012 - 12:15) писал:

Еще вопросик:
А где увеличить ширину этого самого прозрачного поля, чтобы края были не в притык к левой и правой стороне контента, а чуть больше? Как на том же инфэшн?




Пробовал тут менять, увеличивать. Тогда все ломается: левая граница прижимается, а с права появляется место.

Подскажите какой класс ковырять? где выставить center, если надо?

Замените код :
#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
}
на этот:
#container {
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
margin: 0 auto;
max-width: 1000px;
width: 1000px;
padding-left: 10px;
padding-right: 10px;
}



#36156 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено odissei на 22 Декабрь 2012 - 09:42

Спасибо, есть с чем играться ближайшее время))


#36148 Как Сделать Прозрачность (Как-Будто На Стекле)

Отправлено Vaccina на 22 Декабрь 2012 - 04:49

Вам необходимо в файле стилей main.css раздела редактора тем - найти

#container {
	margin: 0 auto;
	max-width: 1000px;
	width: 1000px;
}

и заменить на

#container {
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 3px 3px 15px rgba(1, 3, 1, 0.75);
	margin: 0 auto;
	max-width: 1000px;
	width: 1000px;
}

далее вам понадобиться задать общий фон. Это вы можете сделать в классе

#backtop {
	background: url("/web/upload/assets/images/145/144230/bgout.jpg") repeat scroll center bottom transparent;
}

вам необходимо или изменить изображение "bgout.jpg" в разделе редактора тем, или же прописать в данном классе другое изображение.

Возможно вам так же понадобиться убрать белый фон у общего контента. Это может сделать в классе

#cntrobj {
	background: url("/web/upload/assets/images/145/144230/conteiner-bg-y.jpg") repeat-y scroll 0 0 transparent;
}

просто заменив его на

#cntrobj {
	background: transparent;
}



#36054 Счетчик Кол-Ва Товара

Отправлено Vaccina на 21 Декабрь 2012 - 02:46

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

Код поля ввода кол-во товара будет выглядеть так

<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text" />

Код для замены

(вид таблица)
<a href="{goods.URL}" class="whtgreen" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">Подробнее</a>

Данные изменения необходимо проводить в шаблоне "Товары"
(вид список)
<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>



#35908 Переадресация На Определенный Участок Страницы

Отправлено Koderhan на 20 Декабрь 2012 - 10:42

На той страницы где должна произойти прокрутка на определенный участок кода добавить код:
id="bar" 
к любому тегу, и при этом будет производиться прокрутка именно для этого тега с id bar.
пример.
<p id="bar">какой то текст</p>



#35884 Счетчик Кол-Ва Товара

Отправлено miyako на 20 Декабрь 2012 - 08:30

Просмотр сообщенияodissei (20 Декабрь 2012 - 08:18) писал:

Спасибо, все работает, но есть один побочный эффект - появилась рамка в поиске:

Прикрепленный файл Без-имени-2.jpg

Это добавление в стилях как-то влияет на форму поиска, может еще на какие формы?
Как исправить?

В панели управления магазином, в разделе "Сайт" > "Редактор тем" в блоке "Стили и скрипты" находим файл main.csstemplate, открываем его и находим следующий код:
[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]input.text{border: solid 1px #E8E8E8;padding:2px;font: italic 12px Verdana, Geneva, sans-serif;}

Заменяем на:
input.text_q{border: solid 1px #E8E8E8;padding:2px;font: italic 12px Verdana, Geneva, sans-serif;}


В панели управления магазином, в разделе "Сайт" > "Редактор тем" в шаблоне "Товар" находим следующий код:
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text" />

и заменяем его на:
<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:43px;" maxlength="12" value="1" title="Количество" class="text_q" />



#35478 Некорректное Отображение Темы "Пластик"

Отправлено Koderhan на 17 Декабрь 2012 - 14:07

Просмотр сообщенияhd-tools.ru (17 Декабрь 2012 - 13:07) писал:

Шаблон восстановили, 1 проблема решилась.

Но теперь хочется вернуться к началу... Как и говорил ранее (п.2 первого сообщения темы) проблема с шаблоном возникла после его обновления, а обновлять его начал из-за некорректного отображения маркированных списков (лишний, ни к чему не привязанный маркер)

Изображение

На данный момент, ничего не изменилось, лишний маркер всё на том же месте. Как его убрать?

И баг, с буквой "б" при написании тэгов (п.4, первого сообщения темы) всё также не устранён.
В файле main.csstemplate.
Найти код:
	 #left .block .navigation ul li, #right .block .navigation ul li { background:url({ASSETS_IMAGES_PATH}block-main-nav-bg.jpg) no-repeat; width:223px; border-top:1px solid #FFF; border-bottom:1px solid #e2e2e2; overflow:hidden; }
	 #left .block .navigation ul li:hover, #right .block .navigation ul li:hover { background:url({ASSETS_IMAGES_PATH}block-main-nav-bg.jpg) 0 -34px no-repeat; }
Заменить:
	 #left .block .navigation ul li, #right .block .navigation ul li { background:url({ASSETS_IMAGES_PATH}block-main-nav-bg.jpg) no-repeat; background-position:left center; width:223px; border-top:1px solid #FFF; border-bottom:1px solid #e2e2e2; overflow:hidden; }
	 #left .block .navigation ul li:hover, #right .block .navigation ul li:hover { background:url({ASSETS_IMAGES_PATH}block-main-nav-bg.jpg) 0 -34px no-repeat; background-position:left center;}



#35466 Некорректное Отображение Темы "Пластик"

Отправлено support 2.0 на 17 Декабрь 2012 - 12:51

Просмотр сообщенияodissei (17 Декабрь 2012 - 11:58) писал:

Адрес моего магазина:
bel-mag.ru

Тема шаблона - Пластик

На этом домене должно работать? Или не стоит ждать и другую тему ставить?

Да, данная тема должна была работать на Вашем сайте. Спасибо за сообщение данной ошибки. Приносим свои извинения! Сейчас тема Платик на Вашем сайте восстановлена. За сообщение ошибки счет Вашего Интернет-магазина пополняется на 500р!


#35761 Кнопка Подъема

Отправлено miyako на 19 Декабрь 2012 - 13:53

Просмотр сообщенияodissei (19 Декабрь 2012 - 12:23) писал:

Здравствуйте еще раз!

Не могу понять в чем проблема, читал темы другие.

Делаю по следующему мануалу (здесь на форуме ссылку давали):
http://corneradmin.4..._show.php?id=16

По верхнему варианту пробовал. Сначала была ошибка JS. После в коде html удалил эту строку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Теперь вообще никаких сподвижек, как будто ничего и не ставил.

Вот этот код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
	 // hide #back-top first
	 $("#back-top").hide();
	
	 // fade in #back-top
	 $(function () {
		 $(window).scroll(function () {
			 if ($(this).scrollTop() > 100) {
				 $('#back-top').fadeIn();
			 } else {
				 $('#back-top').fadeOut();
			 }
		 });
		 // scroll body to 0px on click
		 $('#back-top a').click(function () {
			 $('body,html').animate({
				 scrollTop: 0
			 }, 800);
			 return false;
		 });
	 });
});
</script>
Я вставлял между тегами <head> </head> в шаблон HTML.

Вот этот код:
#back-top {
	 bottom: 4%;
	 position: fixed;
	 right: 4%;
}
#back-top a {
	 width: 108px;
	 display: block;
	 text-align: center;
	 font: 11px/100% Arial, Helvetica, sans-serif;
	 text-transform: uppercase;
	 text-decoration: none;
	 color: #bbbbbb;
	 opacity: 0.5;
	 /* замедление */
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
}
#back-top a:hover {
	 color: #000000;
	 opacity: 1;
}
/* изображение со стрелкой (тег span) */
#back-top span {
	 width: 64px;
	 height: 64px;
	 display: block;
	 margin-bottom: 7px;
	 background: url(http://i35.fastpic.ru/big/2012/0421/73/39dcabc5368215af545fe408f1499c73.gif) no-repeat center center #dddddd;
	 /* закругленные углы */
	 -webkit-border-radius: 15px;
	 -moz-border-radius: 15px;
	 border-radius: 15px;
	 /* замедление */
	 -webkit-transition: 1s;
	 -moz-transition: 1s;
	 transition: 1s;
}
#back-top a:hover span {
	 background-color: #777;
}
Я вставлял в самом конце файла стилей.

Ссылка на картинку стрелки другая, в стилях менял, кнопку заливал.

В чем может быть проблема?

В панели управления магазином, в разделе "Сайт" > "Редактор тем" в шаблоне HTML перед строкой
</body>
  вставьте следующий код:
  <p id="back-top" style="display: block;">
	  <a href="#top"><span></span>Наверх</a>
   </p>