Site icon Interpult Studio

Пользовательский виджет Instagram с CSS в FeedWind


Настройка ленты Instagram с помощью CSS

Как и виджеты Facebook и Google Calendar, вы можете использовать CSS для создания собственного виджета Instagram, как и любого веб-сайта. Экран настройки нашего виджета ленты Instagram позволяет вам создавать различные цвета, шрифты и способы отображения информации, чтобы вы могли найти тот, который точно соответствует дизайну вашего бренда. Это также можно считать еще более продвинутым методом настройки, единственная загвоздка которого заключается в том, что перед переключением значений требуется некоторое знание основ CSS.

Классы CSS в деталях

Ниже приведен список соответствующих классов CSS, которые вы можете использовать в качестве справочного материала во время экспериментов с собственным CSS-файлом Instagram:

Инструкции по внедрению

1. Создайте файл CSS

Используйте любой базовый текстовый редактор для подготовки файла CSS. По умолчанию для вашей операционной системы это вариант, но вы можете выбрать немного более гибкий редактор, такой как Блокнот++ за его цветовое кодирование и повышение эффективности автозаполнения.

В конце этого документа мы предоставили пример файла CSS, который вы можете скопировать в текстовый файл и сохранить с расширением файла «.css». Когда вы экспериментируете, помните, что файл CSS должен быть разделен на три части: Контейнер, Заголовок и Содержимое. После того, как вы загрузили файл CSS, вы можете попробовать повторно загрузить более новые версии того же файла CSS, пока не получите схему, соответствующую дизайну веб-сайта.

2. Настройка виджета Instagram

Некоторые части экрана настроек FeedWind будут отключены при использовании CSS, что отображается серым текстом. Это предотвращает конфликт между файлом CSS и ограничениями FeedWind по умолчанию.

FeedWind имеет возможность установить максимальную длину заголовков и содержимого каналов, указав количество отображаемых символов. FeedWind регулирует количество отображаемых каналов на основе введенного значения максимальной длины. Если элемент фида отображается за пределами контейнера, настройте такие параметры, как высота и ширина строки, в пользовательском файле CSS или настройте количество символов, разрешенных в содержимом, в настройках FeedWind.

3. Загрузка CSS виджета Instagram на веб-сервер

Чтобы сохранить файл CSS вне сайта:
Загрузите его на любую платформу, такую ​​как Dropbox, Github, или на свой собственный веб-сервер, который может генерировать собственный URL-адрес.
Перейдите к Общие > Расширенные на экране настройки FeedWind.
Введите URL-адрес пользовательского расположения CSS в соответствующем поле. Новый пользовательский дизайн виджета Instagram обновится и отобразится в области предварительного просмотра.

Примечание: Невозможно использовать каждую команду CSS в пользовательском CSS FeedWind. Например, команды -repeat для изображений-оболочек в заголовке не поддерживаются. CSS слишком динамичен, чтобы охватить все возможности операторов и комбинаций параметров. Простой способ узнать, работает ли ваш CSS с FeedWind, — добавить новый элемент в текст CSS и обновить веб-страницу, чтобы увидеть, как он выглядит.


Похожие сообщения



Source link

Exit mobile version