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!

Did this answer your question?