Начать новую тему

Иконки социальных сетей

Сгенерировала иконки соц сетей тут http://www.perfecticons.com/
Сохранила архив, загрузила файлы в раздел файлы.
Добавила код в блок подвала

Итоговый результат прикрепила скриншотом. Анимация работает.
1) Я понимаю, что в коде нужно вставить ссылки на загруженные файлы, но в каком виде это делать и куда вставлять понять не могу
2) Соц кнопки очень близко к границам подвала, как это исправить?
Прикрепила еще архив с файлами и текстовый документ с кодом

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



png
zip
docx
(483 KB)

еще 2 человек задают этот вопрос

Здравствуйте.


> 1) Я понимаю, что в коде нужно вставить ссылки на загруженные файлы, но в каком виде это делать и куда вставлять понять не могу


Чтобы получить ссылку к файлу, который вы загрузили в раздел Администрирование > Файлы, пожалуйста, сделайте следующее:


1. Убедитесь в том, что файл располагается в разделе Пользовательские файлы. Если это не так, перенесите файлы в этот раздел.

2. Нажмите на изображение правой кнопкой мыши для открытия контекстного меню и выберите Свойcтва

3. Скопируйте URL из секции Ссылка. Этот URL вы можете использовать для доступа к файлу.


> 2) Соц кнопки очень близко к границам подвала, как это исправить?


Для регулирования расстояния между секциями и блоками мы рекомендуем использовать свойство margin. Если вам необходимо присвоить данное свойство к определенной секции или блоку, пожалуйста, сделайте следующее:


1. В администраторской части магазина перейдите на странице Дизайн > Макеты.

2. Найдите необходимую секцию или блок.

3. Задайте название класса в поле Пользовательский CSS-класс или скопируйте существующий класс.

4. В редакторе тем откройте поле Пользовательские CSS.

5. Добавьте необходимый для используемого CSS класса в поле.

6. Нажмите Сохранить.

 

Чтобы узнать, какое значение свойства margin необходимо выставить, вы можете воспользоваться инструментами разработчика в вашем браузере. Обычно он вызывается нажатием клавиши F12 на клавиатуре. Для поиска нужного элемента вам необходимо нажать на иконку с лупой (в браузере Google Chrome) или на иконку курсора, наводящую на прямоугольную область (в браузере Mozilla Firefox), выделить интересующий вас элемент на странице. Затем в секции Elements > Styles (в браузере Google Chrome) или Styles (в браузере Mozilla Firefox) вы сможете добавлять необходимые значения, выбирая подходящее. Когда желаемый результат достигнут, полученный код можно перенести в редактор тем Мерчиума.


Спасибо.

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

CSS-правила необходимо добавить в раздел Пользовательские CSS редактора тем. Для вставки HTML-кода, пожалуйста, создайте HTML-блок в необходимой секции макета страницы (например, Дизайн > Макеты > По умолчанию). Насколько мы понимаем из предоставленной инструкции, ссылки на файлы указываются в CSS-правилах вместо заполнителя PATH_TO. 


Спасибо.


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

Воспользовалась вышеизложенными рекомендациями и советами, но у меня всё-равно на иконках высвечиваются буквы и символы (как в скринах пользователя ultravas). Подскажите пожалуйста что сделать?

@dkristina89,


Здравствуйте.


По всей видимости, файлы не подключены к стилю магазина. Пожалуйста, разместите файлы в разделе Администрирование > Файлы > Пользовательские файлы и укажите ссылку на них в правилах, указанных в разделе Дизайн > Стили. Чтобы получить правильную ссылку на размещенные файлы сделайте следующее:


1. Убедитесь в том, что файл располагается в разделе Пользовательские файлы. Если это не так, перенесите файлы в этот раздел.

2. Нажмите на файл правой кнопкой мыши для открытия контекстного меню и выберите Свойcтва

3. Скопируйте URL из секции Ссылка. Этот URL вы можете использовать для доступа к файлу.


Пожалуйста, проверьте.


Спасибо.

Добрый день!

Сделала всё как Вы сказали, но всё равно картинки не привязываются к кнопкам, прикрепляю скрины.

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

jpg
(216 KB)
jpg
(229 KB)
jpg
(441 KB)

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


Как мы видим, на снимке 1.jpg неверно указаны ссылки на размещенные файлы. По всей вероятности, у вас скопирован путь из контекстного меню Свойства, а не ссылка. Вам необходимо скопировать ссылку до вашего файла.


Надеемся, данная информация окажется полезной для вас.


Спасибо.


Спасибо большое!!! Наконец-то разобралась в чем тут дело, всё получилось!!

Спасибо за ваш ответ. Мы всегда рады вам помочь.

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

Попробовала воспользоваться кнопками с сайта http://www.perfecticons.com и всей вышенаписанной информацией, но столкнулась с проблемой. Опишу действия пошагово:

1. Выбрала на сайте нужные кнопки и получила архив и два куска кода HTML и CSS.

2. В макете добавила HTML блок с HTML кодом кнопок. Рис. 1. и Рис.1.1.

3. Поместила скачанные файлы в раздел пользовательских. Рис. 2. 

4. Исправила в CSS коде ссылки на файлы. Рис. 3.

5. Создала новый стиль в Дизайн->Стили и вставила в него исправленный CSS код. Рис 4.

6. Выбрала созданный стиль для основного макета. Рис 5.

Однако, подключение стиля к кнопкам все равно не происходит. Рис 6.

Никак не могу понять в чем моя ошибка. Подскажите, пожалуйста!

png
png
png
png
png
png
png

К сожалению, имена файлов картинок в предыдущем комментарии были на кириллице и теперь не читаемы. Исправляю это недоразумение:


png
(4.87 KB)
png
(26.6 KB)
png
(78.7 KB)
png
(70.1 KB)
png
(22.8 KB)
png
(29 KB)
png
(31.4 KB)
Здравствуйте!

В ваших Пользовательских CSS остался неизмененным путь к файлу:
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(PATH_TO/socicon.svg) format(svg);
    }
}

Мы изменили эту часть кода на следующую:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(http://d178h43i90tztq.cloudfront.net/users/25939/images/companies/1/socicon/socicon-1.3/socicon.svg) format(svg);
    }
}

 

Сейчас иконки отображаются в браузере Safari.


Однако иконки не отображаются в браузере Firefox.  К сожалению, мы не изучаем сторонний код в рамках услуг поддержки Мерчиума. Приносим извинения за возможные неудобства. В этой ситуации мы можем предложить вам услуги нашего сертифицированного партнера - компании ООО “Симтек Девелопмент”. Сайт компании ООО “Симтек Девелопмент” находится по адресу http://www.simtechdev.ru/. Эта компания специализируется на предоставлении различного рода услуг пользователям программной платформы CS-Cart (Мерчиум создан на базе CS-Cart) по всему миру.


Спасибо.

Большое спасибо! Это исправление я вносила, но, по какой-то причине оно не сохранилось на сервере. Ошибку кое-как нашла, был пропущен апостроф при вставке ссылки на файл. Пришлось применять свойство margin, чтобы выровнять секцию кнопок. Теперь кнопки работают и отображаются как я и хотела. Еще раз большое спасибо за помощь!

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

Пожалуйста! Мы рады слышать, что вы нашли ошибку и у вас все получилось. Спасибо, что написали нам.

 


Войдите, чтобы опубликовать свой комментарий