Skip to main content
All CollectionsEmbedFeedFAQs and Troubleshooting
How to add Custom CSS in EmbedFeed?
How to add Custom CSS in EmbedFeed?

Frequently used CSS classes to customize your social media feed.

Laze Trajkov avatar
Written by Laze Trajkov
Updated over a year ago

In this article, you will find the most used and needed CSS codes that you can manually apply to your EmbedFeed widgets.

Custom CSS can be applied, inside the widget settings, and on the bottom-left side, you will find the 'Custom CSS' tab:

Please find below, the Custom CSS codes for different purposes:



Header Image height and width:


.es-widget-header-image {
border: 3px dashed purple;
height: 100px;
width: 100px;
}

Feed box, border size, and background color:


.esu-box {
border-radius: 30px;
border: none;
background-color: whitesmoke;
}


Feed post username font size:


.esu-username {
font-size: 18px;
text-transform: capitelize;
}


​Feed post date font size and color:


.esu-date {
font-size: 16px;
color: #696b70;
}


Feed post, border-radius:

.esu-media-box {
border-radius: 30px;
}

Feed post, play icon opacity:


.esu-play-icon circle {
fill-opacity: 1;
}

Feed post logo opacity:

.esu-logo path {fill-opacity: #000000;}

Feed post, caption font size:


.esu-caption-text {
font-size: 16px;
-webkit-line-clamp: 4;
}


​Feed post, "see more" color and decoration:


.esu-text-toggle {
font-size: 16px;
text-decoration: underline;
color: #0d0def;
}


If you have any questions, click the bottom right chat icon to talk with our customer success team or send us an email at support@embedsocial.com

We're here for you 🙏

Did this answer your question?