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.
Add the CSS below the photo to the Custom CSS Box on the Settings > Global Options page of our plugin. Make sure and check the box to turn the option on (see example photo below). You may need to empty the cache or empty your browser cache if you are not seeing the changes.
.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.