Custom Instagram Widget With CSS in FeedWind

  • Created : Oct, 9, 2019
  • Last Updated: Oct, 25, 2019

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. ]

4. Instagram Widget CSS Template

The following example of a CSS stylesheet is also a good template for you to experiment with the basics.


/* This adds the ability to utilize Google WebFonts in your FeedWind widget */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);


/* This is the styling for main Instagram feed container */
#fw-ig-container {
	width:100%;
	margin:0;
	padding:0;
	font-family: ‘Noto Sans’, Helvetica, sans-serif;
	font-size:16px;
	border:1px solid #dbdee1;
	border-radius:5px;
	overflow:hidden;
	box-sizing:border-box;
	text-align: left;
}


/* This is the styling for the header container */
#header {
	margin: 0;
	padding: 0;
	background-color: #ffedc0;
	background-image: none;
	font-size: 16px;
}


/* This is the styling for the header title*/
.fw-ig-header-title {
    padding: 20px;
    word-wrap: break-word;
    border-bottom: 1px solid #dbdee1;
}


/* This is the styling for the Instagram icon logo [Black/Color] in header*/
.fw-ig-logo img { 
	width: 21px;
    height: 21px;
    margin-right: 5px;
    vertical-align: middle;
}


/* This is the styling for the Main Title link in the header container*/
.fw-ig-header-title a:link {
    color: #000000;
	text-decoration: none;
	font-size: 25px;
}


/* This is the styling for a “visited” Main Feed Title link in the header container*/
.fw-ig-header-title a:visited {
color: #ff1346;
text-decoration: none;
}


/* This is the styling for a Main Title link on “mouseover” (also known as “hover”) in the header container*/
.fw-ig-header-title a:hover {
color: #505659;
text-decoration: none;
}


/* This is the styling for the feed Instagram title username size and color*/
.fw-ig-feed-title-username {
	font-size: 14px;
}


header .fw-ig-feed-title-username a, header .fw-ig-feed-title-username a:link, header .fw-ig-feed-title-username a:visited {
	color: #ff1346;
}


/* This is the styling for the feed items scroll area*/
#fw-ig-feed-items-scroll-area {
	background-color: #ffffff;
	background-image: none;
	width: 1px;
	min-width: 100%;
	overflow:hidden ;
}


/* This is the styling for ig feed items*/
#fw-ig-feed-items {
	margin: 0;
	padding: 0;
	overflow: hidden;
}


/* This is the styling for the feed items item*/
#fw-ig-feed-items .fw-ig-feed-item {
	margin: 0;
	padding: 0;
	clear: both;
	border-bottom: 1px dashed #CCCCCC;
}


/* This is the styling for the feed item user info*/
.fw-ig-feed-item-user-info {
	padding: 0px 10px 0px 10px;
}


/* This is the styling for the feed item User image icon size and border style*/
.fw-ig-feed-item-user-img {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
	vertical-align: middle;
	margin: 10px 10px 10px 0;
}


/* This is the styling for the feed item User fullname font color and size*/
.fw-ig-feed-item-fullname {
	color: #14171a;
    font-size: 16px;
    margin: 10px 10px 10px 0;
    display: inline-block;
}


/* This is the styling for the feed item username @username font color and size*/
.fw-ig-feed-item-username {
	color: #657786;
    font-size: 14px;
    margin: 10px 10px 10px 0;
    display: inline-block;
}


/* This is the styling for the feed item block*/
.fw-ig-feed-item-module {
	display: block;
    overflow: hidden;
}


/* This is the styling for the feed item content block*/
.fw-ig-feed-item-content-module {
	padding: 0px;
}


/* This is the styling for the feed item image block*/
.fw-ig-feed-item-large-image-module {
	margin: 0;
    float: none;
}


/* This is the styling for the feed item large image block*/
.fw-ig-feed-item-large-image {
	margin: 0;
    padding: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
}


/* This is the styling for the feed item description size/color*/
#fw-ig-feed-items .fw-ig-feed-item-description {
	margin: 0;
    padding: 10px 10px 10px 10px;
    color: #da1818;
    word-wrap: break-word;
    line-height: 1.5;
    font-size: 16px;
    overflow: hidden;
    display: block;
}


/* This is the styling for the feed item date position*/
.fw-ig-date-position {
	float: left;
    margin: 0px;
    padding: 0px;
}

/* This is the styling for the feed item date size/color*/
.fw-ig-feed-item-date {
	margin: 0 0 10px 0;
    font-size: 12px;
    color: #505659;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}


/* This is the styling for the feed item Like icon size/color */
.fa .fa-heart-o {
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* This is the styling for the feed item Likes count text size/color */
.fw-ig-like-count {
	font-size: 14px;
	color:#929ba3;
    vertical-align: middle;
}


/* This is the styling for the feed full Video content block */
.fw-ig-feed-item-video-content-module {
	padding: 0;
}


/* This is the styling for the feed only Video content block */
#fw-video-wrapper {
	height: 300px !important;
}


/* This is the styling for the feed item thumbnail image width/height */
.fw-ig-feed-item-image {
	margin: 0;
	padding: 0; 
	width: 100%;
	height: 300px;
	overflow: hidden;
}


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