Custom Instagram Widget With CSS in FeedWind

  • Created : Oct, 9, 2019
  • Last Updated: Jul, 28, 2020

Customizing your Instagram Feed With CSS

Like the Facebook and Google Calendar widgets, you can use CSS to create a custom Instagram widget like any website. The setup screen for our Instagram feed widget allows you to create a variety of specific colors, fonts, and ways to display information, so you can find one that matches your brand design closely. It can also be considered an even more advanced method of customization, where the only catch is that some knowledge of basic CSS is required before you toggle the values.

CSS classes in detail

The following is a listing of relevant CSS classes for you to use as reference as you experiment with your custom Instagram CSS file:

Implementation instructions

1. Create a CSS file

Use any basic text editor software to prepare the CSS file. Your operating system’s default is an option, but you may want to opt for a slightly more flexible editor like Notepad++ for its color coding and auto-complete efficiency boosts.

We have provided an example CSS file at the end of this document that you can copy into a text file and save with the ‘.css’ file extension. As you experiment, remember that a CSS file should be split into three sections–Container, Header, and Content. Once you’ve uploaded the CSS file, you can try reloading newer versions of the same CSS file until you’ve captured the scheme that suits the website’s design.

2. Customizing Instagram widget

Some parts of the FeedWind settings screen will be disabled when using CSS, shown by grey text. This prevents conflict between the CSS file and FeedWind’s default limits.

FeedWind has the option to set the maximum length of the titles and content of feeds by specifying the number of characters to display. FeedWind adjusts the number of feeds shown based on the value entered for the maximum length. If a feed item displays outside the container, adjust the settings like line-height and width in the custom CSS file or adjust the number of characters allowed in the content in FeedWind’s settings.

3. Uploading Instagram widget CSS to a web server

To store your CSS file offsite:
Upload it to any platform like Dropbox, Github, or your own custom web server that can generate a custom URL.
Navigate to General > Advanced in the FeedWind setup screen.
Enter the URL of the custom CSS location in its corresponding box. The new custom Instagram widget design will refresh and display in the preview area.

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now