In this article we will share the most common CSS changes that you can use for your feeds in EmbedFeed. The idea with the Custom CSS option is to give you an entire flexibility to make sure the design of the social media feed fits with your website branding and layout.
In this example we are changing the CSS of the Layout: Feed.
Box style
The css class to change the box style is .es-box
Image style
The css tag for changing the image style is .es-photo
Video style
The css tag for changing the video style is .es-video
Avatar style
The css tag for changing the avatar style is .es-avatar.avatar-80
Text style
The css tag for changing the text style is .es-text
__________________
Example of custom CSS code
Here is an example for the changes of the design and style for the feed:
Example 1
.es-box {
border: 5px solid #1818ff;
border-radius: 30px;
background: #f1f1ff;
}
Here is the change:
Example 2.es-text {
font-size: 16px;
color: #0000cf;
}
Here is the change:
Example 3 .es-avatar.avatar-80 {
height: 40px;
width: 40px;
}
Here is the change:
Example 4
#es-header .es-follow-btn {
color: transparent;
line-height: 10px;
}
#es-header .es-follow-btn:after {
content: "EmbedSocial";
display: block;
color: #ffffff;
margin-bottom: 8px;
}
How to apply the custom CSS to the feed:
Just go to the Custom CSS section and add the changes in the Custom CSS field, click Preview to see how the changes look, if this is what is you are looking for, click on the Apply button.
Once finished, click the top right button Save to make sure the changes are reflected on your website.
For any questions or additional assistance please feel free to reach out anytime.
We're happy to help!