CSS: Instagram Header

Alignment & Text Color #

In this post we are going to show you how you can modify the Instagram header slightly with a few custom CSS additions. This CSS can also be useful on darker backgrounds. Take a look at the example photos and custom CSS below.

This is how the header looks with no added Custom CSS

.fts-profile-wrap {
/* This will align the header to the left instead of center */
margin: 0 !important;
}
.fts-profile-wrap {
/* This will change the color of the profile wrap */
color: #FFF !important;
}
.fts-profile-wrap a {
/* This will change the link color of the profile wrap */
color: #cacaca !important;
}
.fts-profile-wrap .fts-follow-header-wrap {
/* This will change the border color of the Instagram Share button */
border: 1px solid #cecece !important;
}
.fts-profile-wrap .fts-follow-header-wrap:hover, .fts-profile-wrap a:hover {
/* This will opacitate the link hover color of the profile wrap */
opacity:.9 !important;
}

This is how the header looks with the Custom CSS added. Note: The blue background is not added in our custom CSS, that was just added so you can see the white text and links the new customized header has.